Chrome DevTools的Sources面板

这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战

Sources 面板

在 Chrome 中调试 JS 代码，那你不得不与 Chrome DevTools 的 Sources 面板打交道,使用谷歌控制台Sources面板可以:

• 查看文件
• 编辑 Css 和 JavaScript。
• 创建和保存 JavaScript 的代码段，您可以在任何页面上运行此代码段。 代码段与小书签相似。
• 调试 JavaScript。
• 设置工作区，以将您在 DevTools 中作出的更改保存到文件系统的代码中。

Ⅰ- Sources 面板图解

Ⅱ- 左侧面板详解

1) Page:

已加载的全部资源，以域名划分文件夹。

2) Content Scripts:

浏览器扩展工具的脚本，比如我安装了Vue.js devtools、React Developer Tools、PostWoman接口调试工具(挺好用的,点我传送)等插件都会显示出来

3) Snippets

代码片段，可以在这里添加一小段程序，这个一小段程序可以访问这个页面中的变量和函数等。不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)

4) Filesystem&Overrides

可以加载本地文件夹,就是可以将整个项目加载到此进行调试

Ⅲ- 中间代码展示面板详解

1) 添加断点

1. 断点:代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标(蓝色的)。

   

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

   

3. 行内断点:当你将代码打在某些js语句上是,与上述例子不同的是同一行出现了 3 处标红的位置(也可能是2行,这得看你标注的代码具体情况)，表示 3 处断点。但第1个断点跟后2个不一样的是，第1个断点是默认处于激活状态，而后2个则不是，只有点击激活后才能生效

   

2) 右键行号 及 右键断点

1. 右键行号

• Add breakpoint 添加断点

• Add conditional breakpoint 添加条件断点

• Never pause here 永不停顿

1. 右键断点

• Remove breakpoint 删除断点

• Edit breakpoint 修改断点

• Disable breakpoint 忽略断点

• Deactivate breakpoints：暂时忽略所有断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Activate all breakpoints可恢复所有断点)

• Disable all breakpoints： 暂时忽略所有断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Enable all breakpoints可恢复所有断点)

• Remove all breakpoints：删除所有断点

1. 比较奇怪的是我在网上看到的很多文章会写到右键有Blackbox script (黑盒脚本),但本人无,所以推测可能是浏览器版本问题

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

3) 打断点注意点

• 首先在浏览器页面按F12打开开发工具，点击Sources选项，默认显示的是Page标签。然后找到需要调试的源码文件。

• 如果是正常html页面，那么源码一般是在对应域名下面。如果是webpack处理的页面，并且开启了源码映射，源码就是在webpack://下面。可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码。

1. 只要找到源码，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发工具就会进入调试状态。

注意：有的数字行是灰色的，就是不可断点。有时候点击15行断点选中14行，这是因为浏览器真正执行的代码行不是你看到的那一行，可能是优化掉了或者经过某种转换。

1. 还有一种情况是:添加某一行断点，会跳转到另一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。上述情况，大部分都是因为浏览器显示的源码版本，跟真正的源码文件不一致，只需要刷新一下页面，保证显示的源码是最新的即可。

4) 打断点小技巧

① 小技巧1

有时候源码历经千辛万苦都找不到在哪，这时候就需要祭出console.log了。在需要调试的那一行代码前加上console.log(666),然后运行一次，到控制台查看结果输出，点击右边的链接会自动跳转到源码，这样就可以直接断点了

② 小技巧2

其实这个在上面左侧面板第四点Filesystem&Overrides部分讲过 -->点我传送

如下图，在Filesystem添加文件夹到工作路径，选择之后会有提示，点击接受。如果你的谷歌浏览器没有这玩意，请升级版本，还是没有的话，请忽略这段话。虽然不知道这是什么时候出的功能，但是我偶然发现的，它可以编辑之后真的保存到文件，这个可以当编辑器用了。

Ⅳ- 右侧断点调试按钮组详解

首先我们先介绍右侧功能按钮组的各个作用

• ：当程序中断在断点处时，点击去往下一个断点
• ：当程序中断在断点处时，长按上面的按钮出现此标志(还有一个方形按钮为中断)，点击这个按钮可以在 0.5s 内忽略任何中断，当中断出现在循环内部时一般比较有用
• ：执行下一条语句.按正常步骤，应该会一行一行的执行相关代码，以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上
• ：当中断停留在一个函数调用处时，点击这个按钮会进入函数内部，而上面的按钮则会执行函数调用的下一句，不会进入函数内部
• ：当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句
• ：在不取消断点标记的情况下，使得所有断点失效

Ⅴ- 右侧面板详解

此处用到上面左侧面板的Snippets相关知识插入了一个代码块模拟断点调试,方便展示

1) Watch (变量监听):

正如名字所表示的，观察，观察什么呢？主要观察变量。

示例图如下

2) BreakPoints(断点列表)：

展示断点列表，将每个断点所在文件/行数/该行简略内容展示

3) Scope (作用域):

Scope 面板显示了你当前断点所在函数所有属性的值。Scope 会显示2种类型的值： Script和 Global。如下图，当前作用域里的对象是本地参数Script

注:在网上查阅资料时很多都说Scope 会显示三种类型的值： Local、Closure 和 Global。但是本人没有,仍是推测版本问题,所以我仍是以本人所见为主,备注出此资料

4) Call Stack(函数调用堆栈):

Call Stack 面板会显示代码的执行路径

5) XHR Breakpoints (请求断点列表)

对达到满足过滤条件的请求进行断点拦截，点击该面板右侧加号按钮，会跳出"Break when URL contains"以填写过滤条件。如下图，我们对请求URL包含字母/console/querycentre....的内容进行断点

下方示例图为了不影响观看体验打码无用部分

6) DOM Breakpoints(DOM断点列表)

给DOM加断点，在达到规定条件时触发断点，截断javascript的执行并且定位到断点处。例如：在Elements面板，右键 body 元素→Break on→ modifications，在DOM Breakpoints面板中会显示DOM元素名

7) Event Listener Breakpoints (可断点的事件监听列表)

打开这个列表，可以在监听事件并且在触发该事件时进入断点，调试器会停留在触发事件代码行。只需要展开事件列表，选择要监听的事件打上勾即可

举个栗子,勾选键盘按下事件:

Ⅵ- 源码调试小贴士

现在的项目几乎都是经过编译过的，所以当我们调试时会与编译后的代码打交道，但那并不是我们想要的。不要急，Chrome DevTools 提供了预处理过的代码与源码的映射，主要表现在两点：

• 在 console 上，源链接指向的是源码，而不是编译后的文件
• 在 debug 时，在 Call Stack 面板上的源链接指向的也是源码，不是编译后的文件

不过需要注意的是，上面所讲的能查看源码的前提是 Chrome DevTools 在设置中提供了相应权限，具体是：Settings - Sources - Enable Javascript source maps / Enable CSS source maps，勾选这两项即可。不过，默认情况下就是勾选。