本文介绍如何在 Microsoft Edge DevTools 中使用调试器，包括如何设置代码行断点。 若要设置其他类型的断点，请参阅 使用断点暂停代码。

若要了解调试的基础知识，请参阅 JavaScript 调试入门，这是使用现有基于表单的网页的教程。 本教程包含屏幕截图，因此你可以浏览它。 可以使用演示网页轻松试用调试器功能。

修复 bug 时，通常希望尝试对 JavaScript 代码进行一些更改。 无需在外部编辑器或 IDE 中进行更改，将文件重新上传到服务器，然后刷新页面;相反，若要测试更改，可以直接在 DevTools 中编辑 JavaScript 代码并立即查看结果。

查看和编辑 JavaScript 文件：

选择 “源” 工具。

在“ 导航器 ”窗格中，选择文件，在 “编辑器 ”窗格中将其打开。

在 “编辑器 ”窗格中，编辑文件。

按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 进行保存。 然后，DevTools 将 JavaScript 文件加载到 Microsoft Edge 的 JavaScript 引擎中。

若要使缩小的文件易于阅读，请单击“编辑器”窗格底部的“格式化 () ”按钮。

若要在运行时中间暂停代码，请设置断点。 最基本的已知断点类型是代码行断点。

如果知道需要调查的代码的确切区域，请使用代码行断点。 DevTools 始终在指定的代码行暂停，然后再运行它。

设置代码行断点：

选择 “源” 工具。

打开包含代码行的文件。

单击代码行号左侧的区域。 或者，右键单击行号，然后选择 “添加断点”。

红色圆圈 (或最近，蓝色矩形) 随后显示在行号旁边，指示断点。

设置代码行断点可能效率低下，尤其是在不知道要查找的确切位置或代码库很大的情况下。 若要在调试时节省时间，请了解如何以及何时使用其他类型的断点。 请参阅 使用断点暂停代码。

在断点处暂停代码后，单步执行代码，一次一行，并在此过程中调查控制流和属性值。

在包含与正在调试的问题无关的函数的代码行上暂停时，请单击“ 单步 执行 ( ”按钮，以运行函数而不单步执行。

例如，假设你正在调试以下代码片段。

你将在 上 A暂停。 单击“ 单步执行”后，DevTools 将运行单步执行函数中的所有代码，即 B 和 C。 然后，DevTools 在 上 D暂停。

在包含与正在调试的问题相关的函数调用的代码行上暂停时，单击“单步执行 () ”按钮以进一步调查该函数。

例如，假设你正在调试以下代码：

你将在 上 A暂停。 单击“ 单步执行”后，DevTools 将运行此代码行，然后在 上 B暂停。

在与正在调试的问题无关的函数中暂停时，单击“ 单步执行 ( 执行) 按钮以运行函数的其余代码。

例如，假设你正在调试以下代码：

你将在 上 A暂停。 单击“ 单步执行”后，DevTools 在 中 getName()运行其余代码，这只是 B 在本例中，然后在 上 C暂停。

调试长函数时，可能有很多与调试问题无关的代码。

可以单步执行所有行，但很乏味。

稍好一点，可以在感兴趣的行上设置代码行断点，然后单击“ 恢复脚本执行 () 按钮。

但有一种更快的方法：右键单击代码行，然后选择“ 继续到此处”。 DevTools 将运行到该点的所有代码，然后在该行上暂停。

若要在调用堆栈中 top 函数的第一行暂停，在代码行上暂停时，请右键单击“ 调用堆栈 ”窗格，然后选择“ 重启帧”。 top 函数是运行的最后一个函数。

以下代码是单步执行的示例：

若要忽略所有断点并强制脚本继续运行，请单击并按住“ 恢复脚本执行 () 按钮，然后单击强制 脚本执行 () 按钮。

使用 Web 辅助角色或服务辅助角色时，单击“ 线程 ”窗格中列出的上下文以切换到该上下文。 蓝色箭头图标表示当前选择的上下文。

例如，假设你在main脚本和服务辅助角色脚本中的断点上暂停。 你希望查看服务辅助角色上下文的本地和全局属性，但源工具显示main脚本上下文。 若要切换到服务辅助角色上下文，请在“ 线程 ”窗格中单击服务辅助角色条目。

在代码行上暂停时，使用“ 作用域 ”窗格可以查看和编辑局部范围、闭包范围和全局范围中的属性和变量的值。

使用“ 监视 ”窗格可监视自定义表达式的值。 可以监视任何有效的 JavaScript 表达式。

若要创建新的监视表达式，请单击“ 添加监视表达式 () 按钮。

若要刷新所有现有表达式的值，请单击“ 刷新 () ”按钮。 单步执行代码时，值会自动刷新。

若要删除监视表达式，请右键单击该表达式，然后选择“ 删除监视表达式 () 。

在代码行上暂停时，使用“ 调用堆栈 ”窗格查看已达到此点的调用堆栈。

单击某个条目以跳转到调用该函数的代码行。 蓝色箭头图标表示 DevTools 当前突出显示的函数。

注意

在代码行上未暂停时， “调用堆栈 ”窗格为空。

若要将当前调用堆栈复制到剪贴板，请右键单击“ 调用堆栈 ”窗格，然后选择“ 复制堆栈跟踪”。

以下代码是输出的示例：

若要在调试时忽略脚本，请将脚本添加到 “忽略列表”。 当脚本包含在 “忽略列表”中时，脚本在 “调用堆栈 ”窗格中被遮盖，在单步执行代码时永远不会单步执行脚本的函数。

例如，在以下代码片段中， line A 使用 lib，这是一个第三方库。 如果你确信要调试的问题与该第三方库无关，那么将脚本添加到 忽略列表是有意义的：

若要从“编辑器”窗格将脚本添加到“忽略列表”，请执行以下操作：

打开此文件。

右键单击文件中的任何位置，然后选择“ 添加要忽略的脚本”列表：

若要从“调用堆栈”窗格将脚本添加到“忽略列表”，请执行以下操作：

右键单击脚本中的函数，然后选择“ 添加要忽略的脚本”列表：

若要从 “设置”中标记单个脚本或脚本模式，请执行以下操作：

打开“设置”。

导航到设置的 “忽略列表” 页。

单击“ 添加模式 ”按钮。 显示建议的模式： /framework\.js$

输入要添加到 忽略列表的脚本名称或脚本名称的正则表达式模式。

单击“添加”按钮。

如果发现自己在控制台中一遍又一遍地运行相同的调试代码，请考虑使用代码片段。 代码片段是在 DevTools 中创作、存储和运行的运行时脚本。

请参阅 在任何网页上运行 JavaScript 的代码片段。

注意

此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品在 Creative Commons 署名 4.0 国际许可下获得许可。