JavaScript调试：Pause Code With Breakpoints in Google Chrome Debugger

上一节：JavaScript调试：使用Google Chrome Debugger【简洁；高效；易学】

一共两节（基本上调试JavaScript够用了）

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

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

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

断点类型	当你想要暂停时使用这个...
行的代码Line-of-code	在确切的代码区域。
条件行代码Conditional line-of-code	在确切的代码区域，但仅在某些其他条件为真时。
DOM	在更改或删除特定DOM节点或其子节点的代码上。
XHR	当XHR URL包含字符串模式时。
事件监听器Event listener	在事件之后运行的代码，例如 `click`，被触发。
例外Exception	在抛出捕获或未捕获异常的代码行上。
功能Function	每当调用特定函数时。

代码行断点

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

在DevTools中设置代码行断点：

单击“ Sources ”选项卡。
打开包含要中断的代码行的文件。
去代码行。
代码行的左侧是行号列。点击它。行号列顶部会显示一个蓝色图标。

一行代码断点。图1：第29行设置的代码行断点

代码中的代码行断点

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

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

条件行代码断点

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

设置条件行代码断点：

单击“ Sources ”选项卡。
打开包含要中断的代码行的文件。
去代码行。
代码行的左侧是行号列。右键单击它。
选择Add conditional breakpoint。代码行下方会显示一个对话框。
在对话框中输入您的条件。
按Enter以激活断点。行号列顶部会显示橙色图标。

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

管理代码行断点

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

“断点”窗格。图3：Breakpoints窗格显示两个代码行断点：一个在第15行get-started.js，另一个在第32行

选中条目旁边的复选框以禁用该断点。
右键单击某个条目以删除该断点。
右键单击“ Breakpoints”窗格中的任意位置以取消激活所有断点，禁用所有断点或删除所有断点。禁用所有断点等同于取消选中每个断点。取消激活所有断点会指示DevTools忽略所有代码行断点，但也要保持其启用状态，以便它们在重新激活它们时处于与之前相同的状态。

“断点”窗格中的已停用断点。图4：“ 断点”窗格中的已停用断点已禁用且透明

DOM改变断点

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

设置DOM更改断点：

单击“ Elements”选项卡。
转到要设置断点的元素。
右键单击该元素。
将鼠标悬停在“ Break on”上，然后选择“子树修改Subtree modifications”，“ 属性修改Attribute modifications ”或“ 节点删除Node removal”。

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

DOM的类型更改断点

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

XHR / Fetch断点

如果要在XHR的请求URL包含指定字符串时中断，请使用XHR断点。DevTools暂停XHR调用的代码行send()。

注意：此功能也适用于获取请求。

这有用的一个示例是，当您看到页面请求的URL不正确，并且您希望快速找到导致错误请求的AJAX或Fetch源代码时。

要设置XHR断点：

单击“ Sources”选项卡。
展开“ XHR Breakpoints”窗格。
单击“ Add breakpoint”。
输入要中断的字符串。当此字符串出现在XHR的请求URL中的任何位置时，DevTools会暂停。
按Enter确认。

创建XHR断点。图6：在XHR Breakpoints 为orgURL 中包含的任何请求创建XHR断点

事件监听器断点

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

单击“ Sources”选项卡。
展开“ Event Listener Breakpoints”窗格。DevTools显示事件类别列表，例如Animation。
检查其中一个类别，以便在触发该类别的任何事件时暂停，或者展开类别并检查特定事件。

创建事件侦听器断点。图7：为。创建事件侦听器断点 deviceorientation

异常断点

如果要在抛出捕获或未捕获的异常的代码行上暂停，请使用异常断点。

单击“ Sources”选项卡。
单击Pause on exceptions 。启用后会变为蓝色。
（可选）如果除了未捕获的异常之外还要暂停捕获的异常，请选中“ Pause On Caught Exceptions”复选框。

暂停未捕获的异常。图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();

确保目标函数在范围内

ReferenceError如果要调试的函数不在范围内，DevTools会抛出一个。

(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控制台调用，确保目标函数在范围内可能会非常棘手。这是一个策略：

在函数作为范围的某处设置 line-of-code breakpoint。
触发断点。
debug()在代码仍然在代码行断点处暂停时，在DevTools控制台中调用。

open content licenses：

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work.