使用断点暂停代码

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

最广为人知的断点类型是代码行断点。但代码行断点 这种设置方式效率低下，尤其是在您不知道具体要查找何处， 大型代码库。知道如何以及何时使用另一个工具，可以在调试时节省时间 断点类型

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

代码行断点

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

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

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

代码行断点。

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

代码中的代码行断点

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

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

条件代码行断点

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

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

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

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

条件代码行断点。

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

记录代码行断点

使用日志代码行断点（日志点）将消息记录到控制台，无需暂停执行，也无需使用 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 行的一个日志点，它会将字符串和变量值记录到 Console 中。

修改代码行断点

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

修改断点组

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

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

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

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

组的上下文菜单。

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

修改断点

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

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

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

    更改断点的类型。

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

    断点的上下文菜单。

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

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

使用“永不暂停”跳过断点

使用此处一律不暂停代码行断点来跳过因其他原因发生的暂停。如果您已启用异常断点，但调试程序在您不想调试的特别嘈杂的异常上停止，这将非常有用。

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

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

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

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

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

DOM 更改断点

如果想要暂停更改 DOM 节点或其 子女。

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

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

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

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

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

  • Elements >DOM Breakpoints 窗格。
  • 来源 >DOM 断点侧窗格。

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

在该页面中，您可以：

  • 您可以通过 复选框。 启用或停用这些控件。
  • 右键点击 >在 DOM 中移除或显示它们。

DOM 更改断点的类型

  • 子树修改。当当前所选节点的子级被移除或 或更改子元素的内容。未在子节点属性更改时触发，或 对当前所选节点进行任何更改。
  • 属性修改：在 当前选定的节点时，或当属性值发生更改时。
  • 节点移除：在移除当前选定的节点时触发。

XHR/提取断点

如果要在 XHR 的请求网址包含指定的 字符串。DevTools 会在 XHR 调用 send() 的代码行暂停。

举例来说，如果您发现自己的网页请求的是错误的网址， 而您希望快速找到导致错误请求的 AJAX 或 Fetch 源代码。

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

  1. 点击来源面板。
  2. 展开 XHR Breakpoints 窗格。
  3. 点击 添加 Add breakpoint。
  4. 输入要换行的字符串。出现此字符串时，开发者工具会暂停 XHR 请求网址中的任意位置。
  5. 按 Enter 键进行确认。

创建 XHR/提取断点。

以下示例展示了如何在 XHR/fetch Breakpoints 中为包含 org。

事件监听器断点

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

  1. 点击来源面板。
  2. 展开 Event Listener Breakpoints 窗格。开发者工具会显示事件类别列表，如 为 Animation。
  3. 选中其中一个类别即可在触发该类别的任何事件时暂停，或展开 选择类别并选中特定事件。

创建事件监听器断点。

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

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

Debugger 在 Service Worker 的事件上暂停。

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

您还可以在 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：