浅谈前端开发调试工具Chrome DevTools的使用

Zhqi HUA

已于 2022-02-05 19:29:52 修改

阅读量1.4k

点赞数 3

分类专栏： Henry学前端文章标签：前端 chrome javascript

于 2022-01-21 21:36:49 首次发布

本文链接：https://blog.csdn.net/m0_65305142/article/details/122628250

版权

Henry学前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端调试与调试工具了解

众所周知，前端开发调试具有非常复杂的特点。既可以从浏览器调试，也可以从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个区域：

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

在上一个面板中我们详细介绍了通过日志进行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代码通常只有“一行”。这是因为前端代码具有“开源性”，处于安全考虑将代码压缩。