Chrome调试必知必会(上)作为一名前端er，在日常的coding过程中经常会需要调试JavaScript脚本执行的某

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

作为一名前端er，在日常的coding过程中经常会需要调试JavaScript脚本执行的某个功能，比如查看代码执行过程中的变量是否符合预期，一般console.log就能满足要求。但是console.log有以下几个弊端：

如果要查看某个变量的值，需要在源码中找到相关代码，插入console.log，然后重新加载页面，在Console面板中查看运行结果
使用console.log，需要开发者手动设定需要监视的变量，不管变量有几个，变量多的时候插入的console.log也会变多
提交代码的时候需要手动去掉调试代码，也是一个额外的工作量

因此，使用console.log并不是一个理想的选择，更为高效的调试方式是设置断点。通过打断点的方式可以有效避免以上提到的问题。

断点的类型多种多样，在Source面板中设置，首先来了解一下Source面板

Sources面板

浏览器的Source面板中是调试源代码的主要场所，可以设置多种类型的断点：行断点、条件断点、DOM断点、异步请求断点、异常断点、函数断点等，在Console中也可以进行简单调试，查看当前作用域内的变量，查看相关DOM节点信息等。

通过Chrome的Source面板你可以：

查找文件
编辑CSS和JS文件
创建和保存代码片段(snippets)。代码片段可以运行在任何页面，跟书签类似
调试JS
设置工作空间

设置行断点

通过cmd+p的方式找到目标文件，在Source面板中可以看到每行代码左侧有个行标，鼠标点击行标就设置了一个行断点，代码运行到该行时会停止，此时可以在右侧watch选项中查看范围内变量，也可以在Console中打印输出范围内变量，因为在Console中可以访问当前范围内的所有变量。

还有一种在源代码中设置debugger的方式，如果要查看代码运行到某行代码的情况，在源代码中找到该行代码，在其后插入一行语句debugger;，代码运行到改行也会停止。

行断点的设置方式跟在文件中设置debugger;是类似的。

设置条件断点

当确切的知道需要探查的代码区域，但是只有在设置的条件为true的时候才会停止，那么使用条件断点。

设置方式为：

在Source面板中打开需要设置断点的文件，找到目标行，行左侧是行标，右击行标，选择Add conditional breakpoint(添加条件断点)，然后下方会出现一个对话框，在对话框中输入条件表达式，然后键入Enter，断点处于激活状态，橙色的图标会出现在行数字的左侧。

设置DOM断点

了解了如何在JS文件中设置断点，如何在页面渲染的时候查看DOM的变化呢？

答案就是设置DOM断点。通过设置DOM断点，可以将代码暂停在引发DOM节点或其子节点变化的部分。

设置方式为：

在Elements面板中找到你想设置断点的元素，右击该元素，鼠标选择Break on然后选择Subtree modifications, Attribute modifications, 或者 Node removal

Subtree modifications: 子节点发生变化时触发。包括当前选中节点的子元素被移除、添加，或者子元素内容发生变化。子节点属性发生变化，或当前选中节点的变化则不会触发。
Attribute modifications: 节点属性发生变化时触发。包括属性新增、移除或属性值发生变化。
Node removal: 当前节点被移除时触发。

异步请求断点

异步请求(XHR/Fetch)断点的使用场景为：当需要在请求的URL中包含特定字符的时候暂停代码执行，开发工具会在XHR调用send()的代码行暂停。

注意：这项功能在 Fetch 请求中同样适用。

页面发送的请求URL不正确，并且你想快速找到导致错误请求的AJAX或Fetch的源代码时，这种断点就非常有帮助了。

设置方式也非常简单：

在Sources面板中展开右侧XHR Breakpoints选项，右击选择添加断点或点击右侧+符号，在对话框中输入暂停代码的url片段。开发工具会在发送URL中包含该片段的xhr请求时暂停运行。

比如下图中输入了api/test，那么在请求地址中包含api/test时，DevTool就会暂停运行。

事件监听断点

Event listener breakpoints事件监听断点在事件触发后暂停运行，比如click事件，或者与鼠标相关的事件，mouseover, mouseout等。

设置方法为：

在Sources面板中，展开Event Listener Breakpoints选项，开发工具会展示事件类别列表，比如Animation, Mouse

click类型的事件断点在查看当前点击元素的坐标时很有帮助，在Local中可以看到当前对象的相关信息。

异常断点

当代码抛异常时怎么查看上下文信息？答案是设置异常断点。

异常断点会在抛出异常或未捕获异常的代码行暂停代码运行。

设置方式也很简单：在Sources面板中点击Pause on exceptions图标，激活之后图标呈蓝色

Tip: Pause On Caught Exceptions是个可选项，除了在未捕获的异常暂停代码，在异常被捕获时代码也会暂停。

函数断点

所谓函数断点，就是在函数被调用时暂停代码的功能。

通过debug(functionName)调用，functionName是你想调试的函数名。你可以在源代码中插入debug()语句，就跟console.log()一样，也可以在Console面板中调用。

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.