你不知道的Chrome DevTools（2）：那些debug的技巧

warnerwu 发布于2019-08-19 14:38 / 2020人阅读

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。

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的方式不会因为代码行数改变而定位不到，但必须要刷新代码才能把断点删掉。

简单的debug流程基本上就是交替使用下面几个按钮或者快捷键。

这里介绍一个小技巧：如果添加“条件判断”的断点？相信大家在调试的时候，最烦就是在for循环中的断点了，需要不断地按下一步来在循环中找到要验证的数据。在代码中添加debugger的方式可以这么写：

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

其实也不用这么麻烦的，在断点的地方右键，选择“Edit breakpoint”就可以写上你想出现调试的条件表达式。

另外，当你在Chrome开发工具中配置了workspace之后，你就可以直接在source面板上编辑代码并保存代码了，相当方便。当然，这只针对本地开发的代码，对于线上的代码就无能为力了。

代码格式化

目前线上的js代码基本上都是做个压缩和变量名混淆的，这样对于js代码的体积压缩有好处，但对于要调试的前端工程师来说，却是个大麻烦。

上图的按钮就是为这种情况而生的，点击它就能格式化当前的代码，变成有换行格式的代码，阅读起来不再那么晦涩难懂。
然而，变量名还是一些简单的字母，看起来还是非常的费劲。有办法把混淆的变量名变回原本的变量名吗？
答案是有的！不过需要原先的代码支持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

GPU云服务器云服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78043.html

你不知道的Chrome DevTools（1）：神奇的console

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。在代码中使用的最简单的用法就是写个在控制台打印一行消息。跟的区别在于会对输出的对象进行展开。用于显示一组的控制台输出，要搭配来使用。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12...

KevinYan 2019-08-19 14:34 评论0 收藏0
你不知道的Chrome DevTools（4）：推荐几款DevTools插件

摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...

svtter 2019-08-21 12:17 评论0 收藏0
Chrome 控制台常用调试技巧详解

1、Chrome控制台小技巧打开和关闭抽屉式选项卡：按Esc键可打开和关闭 DevTools 的 Drawer（抽屉式选项卡）在Drawer（抽屉式选项卡）中，你可以在 Console 控制台中执行命令，查看动画检查器(Animations)，配置网络条件(network conditions)和渲染(rendering)设置，搜索(search)字符串和文件等 showImg(https...

JouyPub 2019-08-23 18:35 评论0 收藏0
Chrome 控制台常用调试技巧详解

1、Chrome控制台小技巧打开和关闭抽屉式选项卡：按Esc键可打开和关闭 DevTools 的 Drawer（抽屉式选项卡）在Drawer（抽屉式选项卡）中，你可以在 Console 控制台中执行命令，查看动画检查器(Animations)，配置网络条件(network conditions)和渲染(rendering)设置，搜索(search)字符串和文件等 showImg(https...

trigkit4 2019-08-30 11:20 评论0 收藏0