使用断点暂停代码

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用断点暂停 JavaScript 代码。本指南介绍了开发者工具中提供的各类断点，以及何时使用以及如何设置每种类型的断点。如需查看调试过程的互动式教程，请参阅在 Chrome 开发者工具中调试 JavaScript 入门。

何时使用每种断点类型的概览

最广为人知的断点类型是代码行断点。但是，设置代码行断点可能效率低下，尤其是在您不知道在何处查找或者您要使用大型代码库时。您可以了解如何及何时使用其他类型的断点，从而在调试时节省时间。

断点类型如果您有以下需求，请使用此方式 ...
代码行暂停在确切的代码区域上。
条件代码行在确切的代码区域暂停，但仅当其他一些条件成立时。
日志点在不暂停执行的情况下将消息记录到控制台。
DOM暂停更改或移除特定 DOM 节点或其子节点的代码。
XHR当 XHR 网址包含字符串模式时暂停。
事件监听器暂停在事件（例如 click）触发后运行的代码。
异常暂停抛出已捕获或未捕获异常的代码行。
函数每当调用特定函数时暂停。
可信类型出现可信类型违规行为时暂停。

代码行断点

如果您知道需要调查的确切代码区域，请使用代码行断点。 开发者工具总是会在执行这行代码之前暂停。

要在开发者工具中设置代码行断点，请执行以下操作：

  1. 点击来源标签页。
  2. 打开包含您要中断的代码行的文件。
  3. 转到代码行。
  4. 代码行左侧是行号列。点击该图标。行号列顶部会显示一个蓝色图标。

代码行断点。

此示例展示了在第 29 行设置的代码行断点。

代码中的代码行断点

从代码中调用 debugger 可在该行暂停。这相当于代码行断点，只不过此断点是在代码中（而不是在开发者工具界面中）设置。

console.log('a');
console.log('b');
debugger;
console.log('c');

条件代码行断点

如果您想停止执行，但仅在某些条件为 true 时，才使用条件代码行断点。

当您想跳过与您的情况无关的中断（尤其是在循环中）时，此类断点非常有用。

如需设置条件代码行断点，请执行以下操作：

  1. 打开来源标签页。
  2. 打开包含您要中断的代码行的文件。
  3. 转到代码行。
  4. 代码行左侧是行号列。右键点击该行。
  5. 选择添加条件断点。代码行下方会显示一个对话框。
  6. 在对话框中输入条件。
  7. 按 Enter 键激活断点。行号列顶部会显示一个带问号的橙色图标。

条件代码行断点。

此示例展示了一个条件代码行断点，该断点仅在迭代 i=6 处的循环中的 x 超出 10 时触发。

记录代码行断点

使用日志代码行断点 (logpoint) 将消息记录到 Console 中，此操作不会暂停执行，也不会因 console.log() 调用而使代码杂乱无章。

如需设置日志点，请执行以下操作：

  1. 打开来源标签页。
  2. 打开包含您要中断的代码行的文件。
  3. 转到代码行。
  4. 代码行左侧是行号列。右键点击该行。
  5. 选择添加日志点。代码行下方会显示一个对话框。

  6. 在对话框中输入您的日志消息。您可以使用与调用 console.log(message) 相同的语法。

    例如，您可以记录：

    "A string " + num, str.length > 1, str.toUpperCase(), obj

    在这种情况下，记录的消息为：

    // str = "test"
// num = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}

  7. 按 Enter 键激活断点。行号列顶部会显示一个包含两个点的粉色图标。

将字符串和变量值记录到控制台的日志点。

此示例展示了第 30 行的一个日志点，用于将字符串和变量值记录到控制台。

修改代码行断点

使用 Breakpoints 窗格停用、修改或移除代码行断点。

修改断点组

Breakpoints 窗格按文件对断点进行分组，并按行号和列号对其进行排序。您可以对群组执行以下操作：

  • 要收起或展开群组，请点击其名称。
  • 如需单独启用或停用某个组或断点，请点击该组或断点旁边的 复选框。。
  • 要移除某个群组，请将鼠标悬停在该群组上，然后点击 关闭。

此视频展示了如何折叠组，并逐个或按组停用或启用断点。当您停用某个断点后，来源面板会将行号旁边的标记设为透明。

组具有上下文菜单。在 Breakpoints 窗格中，右键点击一个组并选择：

组的上下文菜单。

  • 移除文件（组）中的所有断点。
  • 停用文件中的所有断点。
  • 启用文件中的所有断点。
  • 移除所有文件中的所有断点。
  • 移除其他断点中的其他断点。

修改断点

如需修改断点，请执行以下操作：

  • 点击断点旁边的 复选框。 即可启用或停用该断点。当您停用某个断点后，来源面板会将行号旁边的标记设为透明。
  • 将鼠标悬停在断点上，然后点击 修改。 进行修改，点击 关闭 将其移除。

  • 修改断点时，从内嵌编辑器中的下拉列表更改其类型。

    更改断点的类型。

  • 右键点击某个断点以查看其上下文菜单，然后选择以下某个选项：

    断点的上下文菜单。

    • 显示位置。
    • 修改条件或日志点。
    • 启用所有断点。
    • 停用所有断点。
    • 移除断点。
    • 移除所有文件中的其他断点。
    • 移除所有文件中的所有断点。

观看视频，了解各种断点修改的实际效果：停用、移除、修改条件、从菜单中显示位置和更改类型。

DOM 更改断点

如果您想在更改 DOM 节点或其子级的代码上暂停，可以使用 DOM 更改断点。

如需设置 DOM 更改断点，请执行以下操作：

  1. 点击元素标签页。
  2. 转到要为其设置断点的元素。
  3. 右键点击相应元素。
  4. 将鼠标悬停在中断上，然后选择子树修改、属性修改或节点移除。

用于创建 DOM 更改断点的上下文菜单。

此示例显示了用于创建 DOM 更改断点的上下文菜单。

您可以在以下位置找到 DOM 更改断点的列表：

  • 元素 > DOM 断点窗格。
  • Sources > DOM Breakpoints 侧窗格。

“Elements”和“Source”面板中的 DOM 断点列表。

在该页面上，您可以执行以下操作：

  • 通过 复选框。 可启用或停用此功能。
  • 在 DOM 中右键点击 > Remove 或 Reveal。

DOM 更改断点的类型

  • 子树修改。当移除或添加当前所选节点的子项，或更改子项的内容时触发。在子节点属性发生更改或对当前所选节点进行任何更改时不触发。
  • 属性修改：在当前所选节点上添加或移除属性，或属性值发生更改时触发。
  • 节点移除：在移除当前选定的节点时触发。

XHR/提取断点

如果您想在 XHR 的请求网址包含指定字符串时中断，可以使用 XHR/提取断点。开发者工具会在 XHR 调用 send() 的代码行暂停。

例如，您发现自己的网页请求的网址不正确，并且您希望快速找到导致错误请求的 AJAX 或 Fetch 源代码。

如需设置 XHR/fetch 断点，请执行以下操作：

  1. 点击来源标签页。
  2. 展开 XHR Breakpoints 窗格。
  3. 点击 添加。 添加断点。
  4. 输入要作为分隔符的字符串。如果此字符串出现在 XHR 请求网址的任意位置，开发者工具就会暂停。
  5. 按 Enter 键进行确认。

创建 XHR/fetch 断点。

此示例展示了如何在 XHR/fetch Breakpoints 中为网址中包含 org 的任何请求创建 XHR/fetch 断点。

事件监听器断点

如果您想暂停在事件触发后运行的事件监听器代码上，请使用事件监听器断点。您可以选择特定事件（如 click）或选择事件类别（如所有鼠标事件）。

  1. 点击来源标签页。
  2. 展开 Event Listener Breakpoints 窗格。开发者工具会显示事件类别列表，例如动画。
  3. 您可以选中其中某个类别，以便在触发该类别的任何事件时暂停，也可以展开相应类别并选中特定事件。

创建事件监听器断点。

以下示例展示了如何为 deviceorientation 创建事件监听器断点。

此外，Debugger 会暂停在任何类型的 Web 工作器或 worklet（包括共享存储 Worklet）中发生的事件。

Debugger 因 Service Worker 的事件暂停。

此示例展示了 Debugger 因 Service Worker 中发生的 setTimer 事件而暂停。

您还可以在 Elements > Event Listeners 窗格中找到事件监听器列表。

异常断点

如果您想在抛出已捕获或未捕获异常的代码行暂停，可以使用异常断点。您可以在除 Node.js 之外的任何调试会话中独立暂停这两个异常。

在 Sources 标签页的 Breakpoints 窗格中，启用以下选项之一或同时启用这两个选项，然后执行代码：

  • 勾选 复选框。 在未捕获到异常时暂停。

    启用相应复选框后，因未捕获到的异常而暂停。

    在本示例中，执行因未捕获到的异常而暂停。

  • 勾选 复选框。 在捕获到异常时暂停。

    启用相应复选框后，因捕获到异常而暂停。

    在本示例中，执行因捕获的异常而暂停。

异步调用中的异常

如果启用了“已捕获”和/或“未捕获”复选框，Debugger 会尝试在同步调用和异步调用中针对相应的异常暂停。在异步情况下，Debugger 会在 promise 中查找拒绝处理程序，以确定何时停止。

捕获到的异常和忽略的代码

启用 Ignore List 后，Debugger 会在未忽略的帧中捕获到或在调用堆栈中通过此类帧时遇到异常时暂停。

下一个示例展示了 Debugger 在被忽略的 library.js 抛出的异常（通过未忽略的 mycode.js）时暂停。

在捕获的异常（该异常通过调用堆栈中的未忽略帧）时暂停。

如需详细了解极端情况下的 Debugger 行为，请在此演示页面上测试一系列场景。

函数断点

如果您希望在每次调用特定函数时暂停，请调用 debug(functionName)，其中 functionName 是您要调试的函数。您可以将 debug() 插入代码中（如 console.log() 语句），也可以通过开发者工具控制台调用它。debug() 相当于在函数的第一行设置代码行断点。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

确保目标函数在范围内

如果您要调试的函数不在范围内，开发者工具会抛出 ReferenceError。

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

如果您是从开发者工具控制台调用 debug()，则很难确保目标函数在范围内。下面介绍一种策略：

  1. 在函数范围内的某个位置设置一个代码行断点。
  2. 触发断点。
  3. 当代码仍在代码行断点处暂停时，在开发者工具控制台中调用 debug()。

可信类型断点

Trusted Type API 可以防范称为“跨站脚本攻击”(XSS) 的安全漏洞。

在来源标签页的断点窗格中，转到 CSP 违规断点部分，并启用以下选项之一或两者都启用，然后执行代码：

  • 勾选 复选框。 接收器违规行为。

    启用相应复选框后，因接收器违规而暂停。

    在本示例中，执行因接收器违规行为而暂停。

  • 勾选 复选框。 违反政策。

    选中相应复选框后，因违反政策而暂停。

    在本示例中，执行因违反政策而暂停。可信类型政策是使用 trustedTypes.createPolicy 设置的。

您可以详细了解如何使用该 API：