你不知道的Chrome DevTools(2):那些debug的技巧

无色 2019年7月5日17:16:27 评论 441

Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools,使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的标签代码就能看到页面效果,这年头谁不会用Chrome开发者工具呀。

但是Chrome能做的远不止你平常用的那么简单,这一个小小的开发工具集成了很多高级的功能你未必知道。我打算把一些Chrome DevTools上使用的高级技巧写成《你不知道的Chrome DevTools》这一系列的博文,希望大家一起学习学习。


关于web前端的调试

在描述怎么用Chrome的开发工具来进行web前端应用调试前,有必要唠叨一下web前端的调试。众所周知,因为JavaScript这种语言的解析性的关系,在浏览器中调试页面的JS代码显得非常的麻烦。没有C和Java那种编译器带的调试工具,没有很好的语法定位和变量监控的,所以有时候页面出错也不知道来自哪里。然而,这还不是最严重的,因为JS的语法比较宽松和随意,所以同一功能多种写法,各种奇葩bug都有。web前端开发依赖的浏览器环境才是最坑爹的地方,不同的浏览器之间存在大量的兼容性问题。

Anyway,相信以后JS的发展或者工具的发展让web前端的调试变得舒服高效。

不简单的sources面板

debug第一步就是打开Chrome开发工具的sources面板。。。(这么简单的道理还用你来说?!)呵呵,sources面板其实不简单。用过类似sublime text的代码编辑器都知道一些快捷键,例如ctrl+p用来打开一个文件、ctrl+shift+f用来全局搜索关键字。其实在Chrome开发工具也有类似的快捷键。

  • ctrl+o 打开一个js文件
  • ctrl+p 同ctrl+o
  • ctrl+f 查找当前js文件中的关键字
  • ctrl+shift+f 全局查找关键字
  • ctrl+shift+e 在控制台运行当前选中的代码片段

值得一提的是ctrl+shift+e这个快捷键,可以立马在控制台运行当前选中的代码片段。相信做过js的debug的时候,大家都有这样的经验,想看当前代码中某句代码的执行结果,只好先选中复制这段代码,打开控制台,粘贴代码,回车运行看结果。这么长的流程,全交给ctrl+shift+e这个快捷键,赞吧!

断点

给代码添加断点的方法有两种,在代码中写debugger和在source面板中鼠标单击添加断点。两者的不同点在于:鼠标单击的方式会在代码行数改变的时候无法定位到之前的位置,但可以在调试的过程中删除断点;debugger的方式不会因为代码行数改变而定位不到,但必须要刷新代码才能把断点删掉。
你不知道的Chrome DevTools(2):那些debug的技巧
简单的debug流程基本上就是交替使用下面几个按钮或者快捷键。
你不知道的Chrome DevTools(2):那些debug的技巧
这里介绍一个小技巧:如果添加“条件判断”的断点?相信大家在调试的时候,最烦就是在for循环中的断点了,需要不断地按下一步来在循环中找到要验证的数据。在代码中添加debugger的方式可以这么写:

for(var i = 0; i < length; i++){
    if(i === 2){
        debugger;
    }
}

其实也不用这么麻烦的,在断点的地方右键,选择“Edit breakpoint”就可以写上你想出现调试的条件表达式。
你不知道的Chrome DevTools(2):那些debug的技巧
另外,当你在Chrome开发工具中配置了workspace之后,你就可以直接在source面板上编辑代码并保存代码了,相当方便。当然,这只针对本地开发的代码,对于线上的代码就无能为力了。
你不知道的Chrome DevTools(2):那些debug的技巧

代码格式化

目前线上的js代码基本上都是做个压缩和变量名混淆的,这样对于js代码的体积压缩有好处,但对于要调试的前端工程师来说,却是个大麻烦。
你不知道的Chrome DevTools(2):那些debug的技巧
上图的按钮就是为这种情况而生的,点击它就能格式化当前的代码,变成有换行格式的代码,阅读起来不再那么晦涩难懂。
然而,变量名还是一些简单的字母,看起来还是非常的费劲。有办法把混淆的变量名变回原本的变量名吗?
答案是有的!不过需要原先的代码支持source map。
source map其实是在代码在发布的时候声明它的变量替换的规则文件。例如在jQuery1.9.0更高的版本的代码,末尾有一句:
//@ sourceMappingURL=jquery.min.map
这就是声明了它的source map文件的路径,而source map文件里大概是这样子的:

{
    "version": 3,
    "file": "jquery.min.js",
    "sources":["jquery.js"],
    "names": ["window","undefined","isArraylike"],
    "mappings": "CAaA,SAAWA,EAAQC"
}

names就是原本的变量名字,mappings则表示该变量名字出现的位置。具体的位置规则是利用了VLQ编码,有兴趣的同学可以自己去挖掘。如果你想简单点,就直接使用Google的Closure编译器来创建这样的map文件。

总结

前端ers在调试js代码的时候,知道Chrome开发工具上的小技巧,可以提高查找问题的效率。

写在最后的话:本文基本上是在参考了Google的DevTools文档之后,结合自己的经验来写的,目的是把文档中说到的一些特别的方法介绍给大家,如果想多点了解,可以到Google的DevTools文档看看。致谢!

参考文献

https://developers.google.com/chrome-developer-tools/?hl=zh-cn

无色

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: