使用断点暂停代码

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用断点暂停 JavaScript 代码。本指南介绍了 DevTools 中可用的各类断点，以及何时使用和如何设置各种类型。如需了解调试流程的交互式教程，请参阅 Chrome DevTools 中的调试 JavaScript 使用入门。

各类断点使用时间概览

最广为人知的断点类型是代码行断点。但是，如果您不知道在何处查找，或者您处理的是大型代码库，则无法高效设置代码行断点。了解如何使用及何时使用其他类型的断点后，即可在调试时节省时间。

断点类型在以下情况下，请使用此功能：
代码行暂停特定的代码区域。
条件代码行在确切的代码区域中暂停，但仅当其他一些条件成立时。
Logpoint在不暂停执行的情况下将消息记录到控制台。
DOM暂停在更改或移除特定 DOM 节点或其子节点的代码上。
XHR当 XHR 网址包含字符串模式时暂停。
事件监听器在触发 click 等事件后运行的代码中暂停。
异常在引发已捕获或未捕获异常的代码行暂停。
功能在每次调用特定函数时暂停。
受信任类型暂停可信类型违规行为。

代码行断点

在知道需要调查的确切代码区域时，可以使用代码行断点。 DevTools 始终会在执行此代码行之前暂停。

如需在 DevTools 中设置代码行断点，请执行以下操作：

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

代码行断点。

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

代码中的代码行断点

在代码中调用 debugger 即可暂停到该行。这相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。

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

条件代码行断点

如果您想停止执行，但只在某个条件成立时停止，则可以使用条件代码行断点。

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

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

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

条件代码行断点。

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

记录代码行断点

使用日志代码行断点（日志点）将消息记录到控制台，无需暂停执行，也无需使用 console.log() 调用让您的代码杂乱无章。

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

  1. 打开 Sources 面板。
  2. 打开包含您想要换行的代码行的文件。
  3. 转到相应代码行。
  4. 代码行的左侧是行号列。右键点击该列。
  5. 选择添加日志点。代码行下方会显示一个对话框。

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

    例如，您可以记录：

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

    在本例中，记录的消息为：

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

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

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

此示例显示了第 30 行中的日志点，该日志点会将字符串和变量值记录到控制台。

修改代码行断点

使用断点部分停用、修改或移除代码行断点。

修改断点组

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

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

此视频展示了如何收起组，以及逐个或按组停用或启用断点。停用断点后，来源面板会使行号旁边的标记变为透明。

组具有上下文菜单。在断点部分，右键点击某个组，然后选择：

组的上下文菜单。

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

修改断点

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

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

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

    更改断点的类型。

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

    断点的上下文菜单。

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

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

使用“一律不在此处暂停”跳过断点

使用永不在此处暂停代码行断点可跳过因其他原因而发生的暂停。如果您已启用异常断点，但调试程序一直在您不感兴趣调试的特别噪杂的异常上停止，此功能会很有用。

如需将某个休息位置静音，请执行以下操作：

  1. 在 Sources 面板中，打开源文件，然后找到您不想在其中设置断点的行。
  2. 右键点击左侧行号列中的行号，该行号位于导致换行的语句旁边。
  3. 从下拉菜单中选择一律不在此处暂停。该行旁边会出现一个橙色（条件）断点。

您还可以在执行暂停时静音断点。观看下一个视频，了解工作流程。

利用在此处一律不暂停，您可以将调试程序语句和除代码行断点和事件监听器断点之外的所有其他断点类型静音。

如果不应暂停的语句与导致暂停的语句不同，则包含多个语句的行中的 Never pause here 可能会失败。在源映射代码中，并非每个断点位置都对应于导致断点的原始语句。

DOM 更改断点

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

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

  1. 点击元素标签页。
  2. 前往要设置断点的元素。
  3. 右键点击相应元素。
  4. 将鼠标悬停在断点 (Break on) 上，然后选择子树修改 (Subtree configuration)、属性修改 (Attribute modified) 或节点移除。

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

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

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

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

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

您可以在其中执行以下操作：

  • 使用 复选框。 启用或停用它们。
  • 右键点击 > 在 DOM 中移除或显示这些元素。

DOM 更改断点的类型

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

XHR/提取断点

如果想在 XHR 的请求网址包含指定字符串时中断，可以使用 XHR/fetch 断点。DevTools 会在 XHR 调用 send() 的代码行暂停。

例如，在您发现您的页面请求的是错误网址，并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时，这类断点很有用。

若要设置 XHR/提取断点，请执行以下操作：

  1. 点击来源面板。
  2. 展开 XHR Breakpoints 窗格。
  3. 点击 添加 Add breakpoint（添加断点）。
  4. 输入要对其设置断点的字符串。当 XHR 请求网址的任意位置显示此字符串时，DevTools 会暂停。
  5. 按 Enter 键进行确认。

创建 XHR/提取断点。

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

事件监听器断点

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

  1. 点击来源面板。
  2. 展开 Event Listener Breakpoints 窗格。DevTools 会显示 Animation 等事件类别列表。
  3. 勾选这些类别之一以在触发该类别的任何事件时暂停，或者展开类别并勾选特定事件。

创建事件监听器断点。

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

此外，Debugger 还会暂停在任何类型的 Web Worker 或 worklet 中发生的事件，包括 Shared Storage Worklet。

调试程序在服务工作器的事件中暂停。

此示例显示了在服务工件中发生的 setTimer 事件上暂停的调试程序。

您还可以在元素 > 事件监听器窗格中找到事件监听器列表。

异常断点

如果想要在引发已捕获或未捕获异常的代码行暂停，可以使用异常断点。在 Node.js 以外的任何调试会话中，您都可以独立针对这两种异常暂停。

在 Sources 面板的 Breakpoints 部分中，启用以下任一选项或同时启用这两个选项，然后执行代码：

  • 选中 复选框。 遇到未捕获的异常时暂停。

    当相应的复选框处于启用状态时，遇到未捕获的异常时暂停。

    在此示例中，执行会在遇到未捕获的异常时暂停。

  • 选中 复选框。 在遇到异常时暂停。

    在遇到异常时暂停（前提是相应的复选框处于启用状态）。

    在此示例中，执行在捕获到异常时暂停。

异步调用中的异常

启用“已捕获”和“未捕获”复选框后，Debugger 会尝试暂停同步和异步调用中的相应异常。在异步情况下，调试程序会在多个 Promise 中查找拒绝处理脚本，以确定何时停止。

捕获了异常并忽略了代码

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

下一个示例展示了 Debugger 在被忽略的 library.js 抛出的已捕获异常暂停，该异常会传递非忽略的 mycode.js。

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

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

函数断点

如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。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();

确保目标函数在范围内

如果想要调试的函数不在范围内，DevTools 会抛出 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.

如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在范围内。下面介绍一个策略：

  1. 在函数在范围内时设置代码行断点。
  2. 触发断点。
  3. 当代码仍在代码行断点位置暂停时，即于 DevTools 控制台中调用 debug()。

可信类型断点

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

在 Sources 面板的 Breakpoints 部分，前往 CSP Violation Breakpoints 部分，启用以下任一选项或同时启用这两个选项，然后执行代码：

  • 检查 复选框。 接收器违规。

    在启用相应复选框后，在发生接收器违规时暂停。

    在此示例中，系统会在发生接收器违规时暂停执行。

  • 查看复选框。违规行为。

    当相应复选框处于启用状态时，在违反政策时暂停。

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

如需详细了解如何使用此 API，请参阅以下资源：