在 Chrome 中调试 JS 代码，那你不得不与 Chrome DevTools 的 Sources 面板打交道，所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS。

熟悉 Sources 面板

先来认识一下 Sources 面板(以我的 Github 首页举例)。

可以看到面板被分为左中右三个部分，左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板。整个面板就像一个 IDE，所以还是挺亲切的。

左边的文件导航面板包含 3 个面板：，分别是：

• Sources：这个面板很好理解，展示了网页所用到的所有文件

• Content scripts：Content scripts 指的是 Chrome 拓展注入在网页中的脚本。比如我安装了一个叫 JSONView 的 Chrome 拓展，打开我的 Content scripts 面板会看到：

  

• Snippets：Snippets 的含义是片段，在这里指的是一小段程序，这个一小段程序跟在其他地方不一样的是，可以访问这个页面中的变量和函数等。

中间面板的其他操作都比较显而易见，只是有 4 点需要简单提一下。

标记 1、2 处可以隐藏/展开左右两个面板，标记 3 处格式化代码，使得代码变得易于阅读，当代码被压缩时尤其有用。另外需要提一下的是打开文件的快捷方式，可以用 Cmd + p / Ctrl + p 在任何一个功能面板上搜索一个文件，按 enter 键在 Sources 面板上打开。

右边的调试面板比较复杂，需要借助调试的例子来解释作用。不过我们可以先大概熟悉一下：

右侧的面板为上下结构，上面是一组功能按钮，下面由很多面板组成，这些面板中，看名字大概能知道第二个显示的是调用栈，从四个开始就是各种类型的断点。那真相是什么呢？我们下面结合调试实例来解释这些按钮/面板的功能。

添加断点与断点类型

本文用到的测试代码为自己所写的 Demo。

添加断点

打开一个文件，中间的面板中显示了代码，代码的左侧有代码行号，代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标。特别提一下的是，这个图标的颜色是蓝色的。如下：

另外，如果一条语句由多行组成，如果在这条语句的行中添加断点的话，那么断点将会被加到下一条语句。举例如下：

在上面的代码中，你可以在 13 行添加断点，但如果你想在 14-17 行添加断点的话，那么断点将会被添加到 19 行。另外，你也不能为空行添加断点，那也会被添加到下一条语句上。比如你想在 18 行添加断点，但实际会被添加到 19 行。

条件断点

右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件满足时，断点才会生效。回车后，效果如下：

可以看见，条件断点跟一般断点的区别就是颜色变成了黄色。

行内断点

之前有人在评论里问，为什么我的这个系列文章要加一个 v57 这个前提，行内断点就是一个很好的回答。行内断点是从 Chrome(v55) 才有的一个功能，意思是你可以在一行内添加多个断点。看下面的例子：

跟前面添加断点方式一样，我先在 15 行添加了一个断点，当程序中断在 15 行时，出现了上图的例子。但与一般的例子不同的是，上面有 3 处标红的位置，表示 3 处断点。但第 1 个断点跟后 2 个不一样的是，第 1 个断点是默认处于激活状态，而后 2 个则不是，只有点击激活后才能生效。

断点的其他操作

• 忽略：如果你想暂时忽略某个断点，右键断点，选择 "Disable breakpoint"
• 修改：修改断点生效的条件。你可以将一个非条件断点通过这个方式修改成条件断点，也可以将条件断点变成非条件断点
• 删除：你可以直接点击断点，或者右键 "Remove breakpoint"

黑盒脚本

右键行号槽的时候，第一个选项总是："Blackbox Script"。

那什么是黑盒脚本呢？

我们写项目时，很多时候是要引用第三方库或框架的，当我们调试时，调试的对象应该是我们自己写的代码，但很多时候，我们经常在焦灼地进行下一步下一步时，突然代码跳到了第三方库或框架的源码上去，这让我们焦灼的内心更添了一把柴火。黑盒脚本就是用来解决这个问题的。它能够将一个脚本文件标记为 "Blackbox Script"，那么我们就永远不可能进入这个文件内部，这个文件对我们来讲就是一个黑盒子。为什么要强调“永远”呢？因为不仅普通的断点不能访问这个被标记了的脚本，其他的，比如说 DOM 断点、事件断点等等都无法访问那个脚本文件内部。

面板介绍 -- Breakpoints

这个面