前端调试与调试工具了解

众所周知，前端开发调试具有非常复杂的特点。既可以从浏览器调试，也可以从Hybrid、NodeJS、小程序等平台调试。调试工具也具有多样化的特点，如Charles、Spy-Debugger、Whistle以及本篇将重点介绍的Chrome DevTools。

Chrome DevTools 是谷歌浏览器自带的调试工具，使用方式通常有以下几种：

• 右键-检查

• 使用快捷键 Ctrl+Shift+I

以上两种为最常用的使用方式。操作后跳出多面板界面（以下是我学习前端写的第一个页面，以此为例）

下面是7个常用面板的功能介绍及使用方法

Elements面板

elements面板可用于查看元素及DOM节点结构，动态修改元素和样式（通过.cls实时查看和修改样式），可以直接对元素本身修改。

了解过前端HTML，都应知道伪类(pseudo-classes)，它不基于标签和属性定义元素。常用的状态伪类，如将链接设置为状态伪类，便有 link / visited / hover / active / focus 等多种状态。但是类似的状态伪类对前端调试可不是善茬。

当设置了hover（鼠标覆盖未点击）的伪类需要在elements面板调试，就会发现一个严重的问题：你在页面上鼠标覆盖到目标物体，但是当你想同时点击下方对应元素进行修改，移动鼠标则又“关闭”了激发的hover状态。

为了解决这个问题，可以在elements面板中对对应元素右键→Force State→ :hover，就可以使样式显现并实时修改元素。

 

当元素样式较多时，如果想要修改某个特定的样式，寻找样式便成为一件困难的事。

这时可以点击在elements面板左侧点击对应的元素，右侧默认为Styles，此时需要转到Computed界面。这个页面你会看见数个表示页面结构的彩色框，下拉即可看到搜索栏。搜索属性，点击箭头转到对应生效的属性样式（注意由于CSS选择器的特异度，如果你对某个元素某个属性设置多种样式，浏览器只会依照所谓的“优先级”渲染一种样式。此时转到的是对应生效的样式，而不生效的会在搜索栏中以删除线形式呈现）。

 还有一个截图的小技巧，可以对节点（特定部分）截图。操作方法为：点击相应元素，右键，选择Capture node screenshot，图片便可以PNG格式下载（而不是传统电脑系统截屏复制到剪切板）。

 

Console面板

console面板控制与日志相关的内容，通俗点说可以直接输入日志并按需打印结果。

使用时，在源代码需要检查的节点添加基本日志种类，运行中在console面板查看打印结果。

下面讲一下日志的种类及呈现形式：

console.log	默认款日志，灰色
console.warn	警告，黄色
console.error	错误，红色
console.debug	调试，蓝色
console.info
console.table	可具象化展示JSON和数组数据（将数组化为表格/树形，利用console.die(..)打印节点，更易于阅读

此外，如果你觉得这些颜色仍不够明显，可在console.xxx(...)括号内通过定义样式(css)，使输出内容更为显眼。此时需要利用占位符 %c%s（一个css一个字符串），此处的css决定后面字符串，即输出日志的样式。

下面简单说一下占位符，它可以给日志添加样式，突出重要信息。常用的占位符如下：

%s   字符串        %o   对象占位符        %c样式占位符（css）        %d   数字

Source面板

source面板的一个突出特点就是可以实时显示代码，分为以下4个区域：

1. 页面资源文件目录树
2. 代码预览区域
3. Debug工具栏（从左到右功能依次为：暂停（继续）/ 单步跳过 / 进入函数 / 跳出函数 / 单步执行 / 激活（关闭）所有断点 / 代码执行异常处自动
4. 断点调试器

在上一个面板中我们详细介绍了通过日志进行debug。这里借助source有着debug的另一种方式：

• 在需检查位置源代码处加入debugger；则运行到此处时页面变灰，暂停执行。此时将鼠标移动到预览区的元素上，会显示实时值（也可以在断点调试器-watch 中添加监视变量，实时监测）
• 手动添加断点：在代码行前点击，出现蓝色标识（行为和添加debugger一样）

在断点调试器中有一些重要的常用功能，下面进行介绍：

• XHR-fetch breakpoints 当页面有请求时触发该断点（多用于线上页面）
• DOM breakpoints 结合elements页面，在查看元素结构时给元素添加断点。具体操作：elements页面→右键元素→Break on→subtree modification结构 / attribute modification属性 / node removal子元素移除
• 其余事件监听的breakpoints，如Event listeners breakpoints / CSP violation breakpoints

再介绍一下Scope和Call Stark。Scope表示作用域，可以查看程序执行所作用的范围；而Call Stark表示作用栈，展示执行顺序。添加断点结合使用后，可以展示程序的全部执行顺序。

当我们打开浏览器一般网页（比如百度），打开console界面的JavaScript代码通常只有“一行”。这是因为前端代码具有“开源性”，处于安全考虑将代码压缩。

这时候，如果想调试一段被压缩后的JS代码，可以用到Source Map工具：

此时需要一段mappings字段，存储了源文件和source map的映射。

这里简单介绍一下映射准则：

1. 英文：表示原码及压缩代码的位置关联
2. 逗号：分隔一行代码中的内容
3. 分号：表示换行（此处没有显示分号，是因为压缩后的代码只有一行。此处该准则可忽略）

通过mappings字段即可显示原码。Source Map的使用及具体操作过程不再展开。

下面三个面板本人使用相对较少，故简单介绍。

Permorance面板

用于生成页面渲染模式图，分为四个区域

1. 控制面板
2. 概览面板（FPS每秒帧数 / CPU处理各个任务花费的时间 / NET各个请求花费的时间）
3. 线程面板（Frames帧线程 / Main主线程-负责执行JS解析HTMLCSS并完成绘制 / Raster线程-负责完成某个layer或某些块tile的绘制）
4. 统计面板

Network面板

显示页面中所有的请求信息（可定位页面和后端的各种交互）

分为6个区域：

1. 控制面板
2. 过滤面板
3. 概览面板
4. Request Table面板
5. 总结面板
6. 请求详情面板

值得注意的是，Network面板通过no throttling选项，可以选择手动模拟网速

 

Application面板

应用面板。

该面板有一个特殊功能，可以直接再网页清除该网页缓存（一般做法为进入浏览器设置清除缓存）

操作步骤：左侧选择Storage→clear site data，即可清除数据