使用断点暂停代码

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

各类断点使用时间概览

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

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

代码行断点

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

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

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

代码行断点。

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

代码中的代码行断点

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

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

条件代码行断点

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

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

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

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

条件代码行断点。

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

记录代码行断点

使用日志代码行断点（日志点）将消息记录到 Console，而无需暂停执行，也不会使用 console.log() 调用使代码变得杂乱无序。

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

  1. 打开来源面板。
  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 行中的日志点，该日志点会将字符串和变量值记录到控制台。

修改代码行断点

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

修改断点组

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

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

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

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

组的上下文菜单。

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

修改断点

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

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

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

    更改断点的类型。

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

    断点的上下文菜单。

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

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

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

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

如需将休息地点设为静音，请执行以下操作：

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

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

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

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

DOM 更改断点

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

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

  1. 点击元素标签页。
  2. 前往要设置断点的元素。
  3. 右键点击相应元素。
  4. 将鼠标指针悬停在 Break on 上，然后选择 Subtree modifications、Attribute modifications 或 Node removal。

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

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

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

  • 元素 > DOM 断点窗格。
  • Sources（来源）> DOM Breakpoints（DOM 断点）侧边栏。

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

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

  • 使用 复选框。 启用或停用它们。
  • 在 DOM 中右键点击 > Remove 或 Reveal。

DOM 更改断点的类型

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

XHR/提取断点

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

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

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

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

创建 XHR/提取断点。

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

事件监听器断点

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

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

创建事件监听器断点。

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

此外，当任何类型的网页工作器或工作件（包括共享存储空间工作件）中发生事件时，调试程序会暂停。

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

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

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

异常断点

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

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

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

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

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

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

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

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

异步调用中的异常

当“已捕获”和“未捕获”复选框中的任一复选框或两个复选框都处于开启状态时，调试程序会尝试在同步调用和异步调用中暂停相应的异常。在异步情况下，调试程序会在多个 Promise 中查找拒绝处理程序，以确定何时停止。

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

忽略列表处于启用状态时，调试程序会在非忽略的帧中捕获的异常或在调用堆栈中通过此类帧的异常上暂停。

以下示例展示了在被忽略的 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()。

可信类型断点

可信类型 API 可防范一种称为跨站脚本 (XSS) 攻击的安全漏洞利用。

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

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

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

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

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

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

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

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