一、使用谷歌控制台Sources面板可以：
- 查看文件
- 编辑 Css 和 JavaScript。
- 创建和保存 JavaScript 的代码段，您可以在任何页面上运行此代码段。 代码段与小书签相似。
- 调试 JavaScript。
- 设置工作区，以将您在 DevTools 中作出的更改保存到文件系统的代码中。
二、熟悉 Sources 面板
三、左侧面板
【3.1】page 已加载的全部资源，以域名划分文件夹。
【3.2】Content Scripts 浏览器扩展工具的脚本，比如我安装了 Axure 原型扩展插件
【3.3】Snippets 代码片段，可以在这里添加一小段程序，这个一小段程序可以访问这个页面中的变量和函数等。不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)
【3.4】Filesystem&Overrides 可以加载本地文件夹
四、中间面板
【4.1】添加断点
断点： 代码行号所在的位置叫做行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个类似肩章的五边形图标。特别提一下的是，这个图标的颜色是蓝色的
条件断点： 右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件满足时，断点才会生效。回车后，效果如下
行内断点： 我先在15行处添加了一个断点，当程序中断在 15 行时，出现了下图的例子。但与一般的例子不同的是，上面有 3 处标红的位置，表示 3 处断点。但第 1 个断点跟后 2 个不一样的是，第 1 个断点是默认处于激活状态，而后 2 个则不是，只有点击激活后才能生效
【4.2】右键行号
- Add breakpoint 添加断点
- Add conditional breakpoint 添加条件断点
- Never pause here 永不停顿
- Blackbox script (黑盒脚本) 我们写项目时，很多时候是要引用第三方库或框架的，当我们调试时，调试的对象应该是我们自己写的代码，但很多时候，我们经常在焦灼地进行下一步下一步时，突然代码跳到了第三方库或框架的源码上去，这让我们焦灼的内心更添了一把柴火。黑盒脚本就是用来解决这个问题的。它能够将一个脚本文件标记为 "Blackbox Script"，那么我们就永远不可能进入这个文件内部，这个文件对我们来讲就是一个黑盒子。为什么要强调“永远”呢？因为不仅普通的断点不能访问这个被标记了的脚本，其他的，比如说 DOM 断点、事件断点等等都无法访问那个脚本文件内部。
【4.3】右键已断点行号
- Remove breakpoint 删除断点
- Edit breakpoint 修改断点
- Disable breakpoint 忽略断点
- Blackbox script (黑盒脚本)
【4.4】打开文件 以用 Cmd + p / Ctrl + p 在任何一个功能面板上搜索一个文件
五、右侧面板
【5.1】按钮组介绍
继续执行代码，直到遇到另一个断点。
按正常步骤，应该会一行一行的执行相关代码，以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上。
当中断停留在一个函数调用处时，会进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。
当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句
单步执行
在不取消断点标记的情况下，使得所有断点失效
在异常处产生断点
【5.2】面板介绍
- Watch (变量监听)：对加入监听列表的变量进行监听,在该面板的右侧有添加变量和刷新变量列表的按钮。如下图：
在断点1，2，3时所监听到num的值分别是undefined，0，1。
- Call Stack (函数调用堆栈)：Call Stack 面板会显示代码的执行路径。比如在 fnA() 中调用了 fnB()，fnB() 中调用了 fnC()，那么中断如果在 fnC() 内部的话，那么 Call Stack 面板会依次显示 fnC、fnB、fnA
- Scope (作用域): Scope 面板显示了你当前断点所在函数所有属性的值。Scope 会显示三种类型的值： Local、Closure 和 Global。如下图，当前作用域里的对象是本地参数Local
- BreakPoints (断点列表)：展示断点列表，将每个断点所在文件/行数/该行简略内容展示
- XHR Breakpoints (请求断点列表)：对达到满足过滤条件的请求进行断点拦截，点击该面板右侧加号按钮，会跳出"Break when URL contains"以填写过滤条件。如下图，我们对请求URL包含字母a的内容进行断点
- DOM Breakpoints (DOM断点列表)：给DOM加断点，在达到规定条件时触发断点，截断javascript的执行并且定位到断点处。例如：在 Elements 面板，右键 body 元素—>Break on —>attribute modifications，在DOM Breakpoints面板中会显示DOM元素名
- Event Listener Breakpoints (可断点的事件监听列表)：打开这个列表，可以在监听事件并且在触发该事件时进入断点，调试器会停留在触发事件代码行。只需要展开事件列表，选择要监听的事件打上勾即可。
【5.3】右键Breakpoints里面某个断点
- Remove breakpoint：删除选中的断点
- Deactivate breakpoints：暂时忽略所有断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Activate all breakpoints可恢复所有断点)
- Disable all breakpoints： 暂时忽略所有断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Enable all breakpoints可恢复所有断点)
- Remove all breakpoints：删除所有断点
- Remove other breakpoints：删除其他断点
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
