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

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