众所周知,前端开发调试具有非常复杂的特点。既可以从浏览器调试,也可以从Hybrid、NodeJS、小程序等平台调试。调试工具也具有多样化的特点,如Charles、Spy-Debugger、Whistle以及本篇将重点介绍的Chrome DevTools。
Chrome DevTools 是谷歌浏览器自带的调试工具,使用方式通常有以下几种:
使用快捷键 Ctrl+Shift+I
以上两种为最常用的使用方式。操作后跳出多面板界面(以下是我学习前端写的第一个页面,以此为例)
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.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面板的一个突出特点就是可以实时显示代码,分为以下4个区域:
在上一个面板中我们详细介绍了通过日志进行debug。这里借助source有着debug的另一种方式:
在断点调试器中有一些重要的常用功能,下面进行介绍:
再介绍一下Scope和Call Stark。Scope表示作用域,可以查看程序执行所作用的范围;而Call Stark表示作用栈,展示执行顺序。添加断点结合使用后,可以展示程序的全部执行顺序。
当我们打开浏览器一般网页(比如百度),打开console界面的JavaScript代码通常只有“一行”。这是因为前端代码具有“开源性”,处于安全考虑将代码压缩。
这时候,如果想调试一段被压缩后的JS代码,可以用到Source Map工具:
此时需要一段mappings字段,存储了源文件和source map的映射。
这里简单介绍一下映射准则:
通过mappings字段即可显示原码。Source Map的使用及具体操作过程不再展开。
下面三个面板本人使用相对较少,故简单介绍。
用于生成页面渲染模式图,分为四个区域
显示页面中所有的请求信息(可定位页面和后端的各种交互)
分为6个区域:
值得注意的是,Network面板通过no throttling选项,可以选择手动模拟网速
应用面板。
该面板有一个特殊功能,可以直接再网页清除该网页缓存(一般做法为进入浏览器设置清除缓存)
操作步骤:左侧选择Storage→clear site data,即可清除数据