浏览器家园·资讯

展开

你不知道的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+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面板上编辑代码并保存代码了，相当方便。当然，这只针对本地开发的代码，对于线上的代码就无能为力了。
workspace

代码格式化

目前线上的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

文章TAG：你不知道  不知道  不知道的  知道  你不知道的Chrome  

加载全部内容
相关教程
猜你喜欢
大家都在看