使用断点暂停代码

使用断点暂停代码

在开发和调试JavaScript代码时，断点是一个非常重要的工具。通过设置断点，开发者可以在代码执行到特定位置时暂停，从而检查变量状态、调用堆栈等信息，帮助定位和解决问题。本文将详细介绍Microsoft Edge浏览器开发者工具中各种断点的使用方法和最佳实践。

本文内容

使用断点暂停JavaScript代码。本文介绍DevTools中可用的每种类型的断点，以及何时使用以及如何设置每种类型。

有关使用现有网页的介绍性教程，请参阅开始调试JavaScript。

何时使用每个断点类型的概述

最知名的断点类型是代码行。但是，设置代码行断点可能效率低下，尤其是在你不知道要查找的确切位置时，或者你使用的是大型代码库。可以通过了解如何以及何时使用其他类型的断点来节省调试时间。

代码行断点

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

在DevTools中设置代码行断点：

1. 选择“源”工具。
2. 打开包含要中断的代码行的文件。
3. 转到代码行。
4. 代码行左侧是行号列。单击它。行号列旁边会显示一个红色图标：

代码中的代码行断点

使用代码中的debugger语句在该行上暂停。这等效于代码行断点，只不过断点是在代码中设置的，而不是在DevTools UI中设置的。

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

当上述代码片段在Microsoft Edge中运行时，DevTools会在运行该行之前暂停在包含debugger语句的行上console.log('c');。

条件代码行断点

当知道需要调查的代码的确切区域时，请使用条件代码行断点，但仅当某些其他条件为 true 时才需要暂停。

设置条件代码行断点：

1. 选择“源”工具。
2. 打开包含要中断的代码行的文件。
3. 转到代码行。
4. 代码行左侧是行号列。右键单击它。
5. 选择“添加条件断点”。对话框显示在代码行下方。
6. 在对话框中输入条件。
7. 按Enter激活断点。行号列旁边会显示一个红色图标：

管理代码行断点

使用“断点”窗格可从单个位置禁用或删除代码行断点。

• 选中条目旁边的复选框以禁用该断点。
• 右键单击某个条目可删除该断点。
• 右键单击“断点”窗格中的任意位置可删除所有断点。

若要禁用所有断点，请单击“停用断点”按钮：

DOM 更改断点

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

设置 DOM 更改断点：

1. 选择“元素”工具。
2. 转到要设置断点的元素。
3. 右键单击元素，单击“中断”，然后单击子树修改、属性修改或节点删除：

DOM 更改断点的类型

• 子树修改。删除或添加当前所选节点的子节点，或者更改子节点的内容时触发。在子节点属性更改或对当前所选节点的任何更改时未触发。
• 属性修改：在当前所选节点上添加或删除属性时，或者在属性值更改时触发。
• 节点删除：删除当前所选节点时触发。

XHR/fetch 断点

如果要在XmlHttpRequest(XHR) 或提取请求发生时中断，请使用 XHR/fetch断点。DevTools 在发生 XHR 或 Fetch 请求的代码行上暂停。

当网页请求不正确的 URL，并且你想要快速找到导致错误请求的 XHR 或提取源代码时，这非常有用的一个示例。

设置 XHR 断点：

1. 选择“源”工具。
2. 展开“XHR/提取断点”面板。
3. 单击“添加断点”。
4. 输入要中断的全部或部分 URL。当输入的值出现在 XHR 或提取请求 URL 中的任何位置时，DevTools 会暂停。
5. 按Enter进行确认。

事件侦听器断点

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

1. 选择“源”工具。
2. 展开“事件侦听器断点”面板。DevTools 显示事件类别的列表，例如动画。
3. 选择一个类别，以在触发该类别中的任何事件时暂停。或者，展开类别，然后选择特定事件：

异常断点

如果要暂停引发捕获或未捕获异常的代码行，请使用异常断点。

1. 选择“源”工具。
2. 若要在代码引发 JavaScript 异常时暂停，请在“断点”窗格中选中“在未捕获的异常时暂停”复选框。
3. 若要暂停捕获的异常（例如块捕获try/catch异常时），请选中“在捕获的异常上暂停”复选框：

函数断点

debug(function)运行 方法，其中function是要调试的 JavaScript 函数，每当运行特定函数时要暂停时。可以在代码中插入debug()(（例如，使用console.log()语句) 时），或者从 DevTools控制台工具运行 方法。

debug()等效于在函数的第一行设置代码行断点。

function sum(a, b) {
  let result = a + b; // DevTools will pause before running this line.
  return result;
}
// Call the debug method by passing a reference to the function object,
// not its name as a string.
debug(sum);
sum();

确保目标函数在范围内

如果要调试的函数不在范围内，DevTools 将ReferenceError引发 。

(function () {
  function foo() {
    console.log('foo');
  }
  function bar() {
    console.log('bar');
  }
  // Here, calling debug(bar) works because
  // bar is defined in the current scope.
  debug(bar);
  bar();
})();
// Here, calling debug(foo) won't work, because foo
// isn't defined in the current scope.
debug(foo);

从控制台工具调用debug()时，下面是一种确保目标函数在范围内的方法：

1. 在函数位于作用域中的某个位置设置代码行断点。
2. 触发断点。代码在断点处暂停，当前函数的变量在范围内。
3. 在 DevTools 控制台中调用debug()，同时代码仍在代码行断点上暂停。

Logpoints

Logpoint 是一种断点变体，它不会在调试器中“中断”，而是将消息直接记录到控制台。通过 DevTools 插入日志点的方式与使用任何其他断点的方式相同。

设置日志点：

1. 选择“源”工具。
2. 打开包含要插入日志点的代码行的文件。
3. 右键单击代码行左侧的行号列。
4. 选择“添加日志点”。对话框显示在代码行下方。
5. 输入将在命中日志点时计算的消息或 JavaScript 表达式。
6. 按Enter激活日志点。行号旁边会显示一个红色图标。

有关详细信息，请参阅控制台工具中的日志消息。