title: Chrome Tools-Sources
tags:
  - 实践
categories:
  - 工作
date: 2019-09-20 14:29:00
---
嗯，跟前端暧昧的时间还是挺长了，是时候展现真正的技术了。

{% asset_img 1.jpg %}

常在写代码哪有不bug的道理，那对于前端朋友来讲chrome的工具栏基本上能满足大多数场景下的bug排查，对于奉行**假如你暂时不够牛逼，那就善用工具**的我来说，我心荡漾啊。必须记录一下，当然chrome提供的工具太多了，今天暂且主要聊聊Sources，也是我使用频率Top 2，结合一些网上的一些说明加自身的实践来说一说。

{% asset_img Inked0_LI.jpg 就是这玩意%}

不用再于数字不好看这些细节，我们走的是放荡不羁的路线，咱们挨个说啊。

<style> table th:first-of-type { width: 80px; } </style>  

|  数字   | 表头  |
|  ----  | ----  |
| 1  | 点击该箭头，移动鼠标到页面上定位到页面元素，跳转到Elements 工具栏。  |
| 2  | 用于模拟移动设备上的效果。   |
| 3  |  必用的模块，已加载的全部资源，以域名划分文件夹，调试时从这儿下手找源码，当然我通常直接快捷键Ctrl+P定位文件。 
| 4、5 |   Filesystem & Overrides 可以加载本地文件夹，把Chrome当成IDE用。 
| 6  |   Content scripts 扩展工具的脚本，比如百度翻译插件等 
| 7  |   Snippets 代码片段，不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove) 
| 8  |   源码面板，在此处进行打断点、修改端点等操作 
| 9  |   调试的快捷键面板 
| 10 |   变量监察：添加个变量后会一直监察这个变量的值，当前作用域无值时显示< not availble > 
| 11 |   Call Stack 函数调用栈，会列出断点的调用堆栈列表。 
| 12 |   Scope 断点所在作用域列表，级别划分如下： <ul> <li>Local 当前作用域 展示作用域下的变量</li><li>Closure (x) 闭包作用域，x是函数名称</li><li>Script 标签作用域</li><li>Global 全局作用域Window</li></ul> 
| 13 |   Breakpoints 源码的断点列表。 
| 14 |   XHR/fetch Breakpoints 请求断点：ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈，很方便追踪。 
| 15 |   DOM Breakpoints 这里列出html的断点。 
| 16 |   Global Listeners 全局监听器：指的是绑定在 window 对象上的事件。 
| 17 |   Event Listeners Breakpoints 所有事件的断点：勾选指定类型，比如Mouse/click，则所有的click事件都会被断住。   

markdown搞出这个表格太费劲，anyway看着舒服就好，下面聊聊对应上面表格中的一些具体的使用场景。    

- Filesystem Chrome式的IDE，可以编辑各种文件并且在当前页就可以实时刷新看到效果，如果写单个模块时蛮有用的，比较快。修改后ctrl+s保存，修改的是本地文件，刷新可看到效果。   

{% asset_img Filesystem.gif 演示一哈 %}   

- Overrides 覆盖网络请求的资源，即html、js、css、图片等资源，注意一定是同域名同路径同名的文件才能产生覆盖效果。勾选，Enable Local Overrides，修改文件后ctrl+s保存，修改的是Save as Overrides到本地的文件，刷新可看到效果。  
 {% asset_img network-overrides.gif 这个就不亲自演示了，网上找一个 %}  

- <span style=color:#17640E;background-color:#DDA71D;>**Snippets**</span>，也是我使用比较多的功能，以前不知道的时候都是找网上现场的js编辑器，但是受网络和维护的影响，有些时候不好用，而且很多还要区分ES5、ES6，自从有了Snippets，随便写各种代码片段超级好用。     但是要注意变量的作用域问题，所以最好用IIFE方式写代码，避免出现错误。  {% asset_img snippets.gif 演示一波 %}  

### 源码面板 ### 
- 这也是调试的时候使用频率超级高的区域，ctrl+p定位到文件，行号处右键出现对断点操作的一些选项，分新增和编辑两类。  

{% asset_img breakpoints.gif 演示一波 %} 

 - Add conditional breakpoint/edit breakpoint ，添加/修改带条件的断点，比如写a==="a"，则表示当a等于"a"时才触发断点，如下图。当条件表达式为真时，触发断点（条件性行断点的颜色为橙色）

{% asset_img debug03.gif %}

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

- 调试面板：Pause on exceptions，在发生异常的地方停顿

{% asset_img debug04.gif %}


### Watch面板 ###
- 用于监视变量的值。
{% asset_img watch.png %}

点击<span style=color:red;>**1**</span>处，将打开一个内联输入框，您可以在输入框中输入要监视的变量名称。输入完毕，按Enter键，即可将其添加到列表中。监视器将显示添加时变量的当前值。如果变量未设置或找不到，值将显示为<Not Available>。

点击<span style=color:red;>**2**</span>手动刷新变量。注：监视列表不是变量的实时视图，除非逐步执行。当使用断点逐步执行时，监视列表中的值将自动更新

点击<span style=color:red;>**3**</span>，删除变量。

### Call stack ###

代码暂停时，可以在Call Stack窗口查看当前的调用栈。展示了代码到暂停处的完整执行路径，这让我们能够深入代码去找出导致错误的原因。最后调用函数在最顶上，所以最好别用匿名函数，不利于调用栈查看。

### Scope ###

作用域：显示断点所在的作用域，级别划分如下：

Local 当前作用域 展开作用域下的变量
Closure (x) 闭包作用域，x是函数名称
Script 标签作用域
Global 全局作用域Window

### DOM Breakpoints ### 

当改变一个节点或者其子元素时，可以设置一个DOM断点：

1. 点击Elements面板 
1. 找到想要设置断点的元素 
1. 在此元素上右键
1. Break on --> Subtree modifications / Attribute modifications / Node removal
	
	Subtree modifications（子树修改）：当前选中的元素，删除、增加其子代或者改变其子代的内容。修改子元素的属性或者当前选中元素有任何改变都不会触发此类型断点
	Attributes modifications（属性修改）：当前选中的元素，增加、删除其属性，或者修改某个属性值
	Node Removal（节点移除）：移除当前选中的元素

### XHR/Fetch Breakpoints ###

当XHR的请求URL包含某一特定的字符串时，可以暂停调试代码。DevTools会在XHR调用send()那行代码的地方暂停。

1. 点击Sources面板 
1. 展开XHR Breakpoints小窗口
1. 点击“增加断点（Add breakpoint）”
1. 输入一个字符串，只要在某个XHR的请求URL中包含此字符串， 会进入断点（暂停），如下图。 

{% asset_img xhr.gif %}

### Event Listeners Breakpoints ###

这个断点类型也算是比较常用的一个了，特别是当我们调试别人的代码时，触发某个事件，想找到对应的代码。事件类型可以是很具体的，比如click事件，也可以是某一类别的事件，比如“鼠标事件”。
1. 点击Sources面板
1. 展开Event Listener Breakpoints小窗口
1. 勾选某一类别的事件或者是某一具体的事件

PS：

{% asset_img point_types.png 南风一溅-https://juejin.im/user/5754e1575bbb500064496593 %}

感谢：

{% blockquote 无名小贝勒 https://segmentfault.com/a/1190000008396389  Chrome DevTools — JS调试 %}
{% endblockquote %}
{% blockquote lsc183 https://www.cnblogs.com/lsc183/p/9915285.html  Chrome DevTools 的 Sources 调试
  %}
{% endblockquote %}
{% blockquote QAQ-YS https://zhuanlan.zhihu.com/p/80768870  使用 chrome-devtools Sources 面板 %}
{% endblockquote %}

`本文引用的内容，如有侵权请联系我删除，给您带来的不便我很抱歉。`