chrome 断点

官方文档

概述

使用断点来暂停JavaScript代码。本指南解释了DevTools中可用的每种类型的断点，以及何时使用以及如何设置每种类型。

---

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

最着名的断点类型是代码行。但是，如果您不知道在哪里查找，或者您正在处理大型代码库，则可能无法设置代码行断点。通过知道如何以及何时使用其他类型的断点，您可以节省调试时间。

断点类型	当您想要暂停时使用此…
行断点	在一个确切的代码区域。
条件断点	在一个确切的代码区域，但只有在其他条件成立的情况下。
DOM更改断点	在更改或删除特定DOM节点或其子项的代码上。
XHR	当一个XHR URL包含一个字符串模式。
事件监听器	在事件之后运行的代码，例如 click 被触发。
异常	在引发捕获或未捕获异常的代码行上。
方法	每当一个特定的方法被调用。

行断点

当您知道需要调查的代码的确切区域时，请使用行断点。在执行这行代码之前，DevTools 总是暂停。
在DevTools中设置行断点：

1. 点击Sources选项卡。
2. 打开包含要打破的代码行的文件。
3. 找到代码行。
4. 行号的左边是行号列。点击它。一个蓝色的图标显示在行号。
   
   图1：第29行设置的行断点

代码中的行断点

debugger从你的代码中调用来暂停这一行。这相当于一行代码断点，除了断点是在您的代码中设置的，而不是在DevTools UI中设置的。

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

条件断点

当您知道需要调查的代码的确切区域时，使用有条件的代码行断点，但只有在其他条件成立时才想暂停。

要设置条件的一行代码断点：

1. 点击Sources选项卡。
2. 打开包含要打断点的代码行的文件。
3. 找到代码的行。
4. 行号的左边是行号列。用鼠标右键单击它。
5. 选择添加条件断点。代码行下面会显示一个对话框。
6. 在对话框中输入你的条件。
7. 按Enter激活断点。行号列上出现橙色图标。

图2：在第32行设置的条件的一行代码断点

管理行断点

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

图3：断点窗格显示了两行代码断点：一行在第15行get-started.js，另一行在第32行
- 选中条目旁边的复选框以禁用该断点。
- 用鼠标右键单击一个条目以删除该断点。
- 在“ 断点”窗格中的任意位置单击鼠标右键以停用所有断点，禁用所有断点或删除所有断点。禁用所有断点相当于取消选中每个断点。取消激活所有断点指示DevTools忽略所有的代码行断点，但也要保持它们的启用状态，以便它们在重新激活时处于和以前相同的状态。

图4：“ 断点”窗格中的禁用断点被禁用并且是透明的

---

DOM更改断点

当您想要更改DOM节点或其子节点的代码时，使用DOM更改断点。

要设置DOM更改断点：

1. 单击元素选项卡。
2. 去你想要设置断点的元素。
3. 用鼠标右键单击该元素。
4. 将鼠标悬停在Break上，然后选择Subtree修改，属性修改或节点删除。

图5：用于创建DOM更改断点的上下文菜单

DOM变化断点的类型

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

---

XHR断点

当XHR的请求URL包含指定的字符串时，如果要中断，请使用XHR断点。DevTools暂停在XHR调用的代码行上send()。
注意：此功能也适用于提取请求。

设置XHR断点：

1. 点击Sources选项卡。
2. 展开XHR断点窗格。
3. 点击添加断点。
4. 输入你想打破的字符串。当这个字符串出现在XHR请求URL的任何地方时，DevTools会暂停。
5. 按Enter确认。

图6：在创建XHR断点XHR断点 为包含任何请求org的URL

---

事件监听器断点

当您想要暂停事件侦听器代码时，使用事件侦听器断点。您可以选择特定事件，例如事件click类别，例如所有的鼠标事件。

1. 点击Sources选项卡。
2. 展开“ 事件侦听器断点”窗格。DevTools显示事件类别的列表，例如动画。
3. 选中这些类别中的一个可以暂停该类别的任何事件，或者展开类别并检查特定事件。

图7：创建一个事件监听器断点 deviceorientation

---

异常断点

当您想暂停引发捕获或未捕获异常的代码行时，使用异常断点。

1. 点击Sources选项卡。
2. 点击 暂停异常。启用后变成蓝色。
3. （可选）如果除了未捕获的异常外，还需要暂停捕获的异常，请选中“ 捕获异常时暂停”复选框。

图7：暂停未捕获的异常

---

方法断点

调用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.

如果您debug()从DevTools控制台调用，确保目标函数在范围内可能会非常棘手。这是一个策略：

1. 在功能范围的某处设置一行代码断点。
2. 触发断点。
3. debug()在代码行断点处仍然暂停代码时调用DevTools控制台。