ChromeDevTools中你可能不知道的9个调试技巧
神奇的console
Web前端开发过程中必然会⽤到Chrome浏览器⾃带的开发者⼯具Chrome DevTools，使⽤它作为Web前端开发性能调试的必备⼯具。就连隔壁的产品⼩哥都知道打开F12改⼀下页⾯元素的标签代码就能看到页⾯效果，这年头谁不会⽤Chrome开发者⼯具呀。
但是Chrome能做的远不⽌你平常⽤的那么简单，这⼀个⼩⼩的开发⼯具集成了很多⾼级的功能你未必知道。我打算把⼀些Chrome DevTools上使⽤的⾼级技巧写成《你不知道的Chrome DevTools》这⼀系列的博⽂，希望⼤家⼀起学习学习。
console简介
这⼀篇主要介绍我们常⽤的console这个浏览器api。在Javascript代码中使⽤console的最简单的⽤法就是写个console.log()在控制台打印⼀⾏消息。然⽽你知道吗？console除了⽤log这个⽅法来打印消息外，还error、warn、assert、dir、info、trace等⾼级⽅法，每个⽅法对应不⽤的⽤途，在下⽂将⼀⼀叙述。
多彩的console.log
其实console.log()⽅法⾥可以传⼊多个参数，控制台会根据参数的设置把多个消息打印到同⼀⾏的。⽐如这样：
console.log("test", 123);
1
这样在控制台就会这样显⽰：
如果log⽅法⾥第⼀个参数是带有特别标识符的字符串的话，控制台会根据不同的标识符来把后⾯的参数填充到前⾯的字符串中去。常见的标识符有以下：
%s 表⽰输出字符串
%d 表⽰输出数字（也可以⽤%i）
%f 表⽰输出浮点数值
%o 表⽰输出Dom元素
%O 表⽰输出JavaScript对象
%c 表⽰对输出的⽂字应⽤特殊的样式
从下⾯⼏个截图可以看得出这些标识符的⽤法了。
最特别的还是%c的⽤法，使⽤了%c你就可以让控制台输出的内容包含你⾃⼰定制的样式。例如这样：
可以看出%c应⽤的样式是CSS的语法，所以基本上CSS⽀持的样式语句都可以⽀持。当然，Chrome是有过滤⼀些CSS语法的，⽐如对元素定位的CSS语法就不⽀持（ps：貌似定位啥的也没⽤，除⾮是想捣乱的程序员，呵呵）
彩⾊的输出语句貌似看起来中看不中⽤，其实不然。⼤型的web开发项⽬，特别是多⼈分模块开发的时候，控制台⼀⼤堆console.log输出，你⼀下⼦不到你⾃⼰的模块的输出语句。如果给你⾃⼰的模块输⼊语句应⽤了不同的颜⾊，相对来说⽐较好定位到输出的地⽅，这是提⾼效率的⼀个⼩技巧。
console的其他API
其他的函数例如info,error,warn基本类似，只是在代表的意义和输出的样式有所区别。
除此之外，console还有⼀些⽐较少见但实⽤的api。
console.time
console.time⽤于显⽰代码执⾏的时间，要搭配console.timeEnd来使⽤。
其他
其他的console⽅法我将简单列举⼀下，就不⼀⼀详细说明了，详细可以参考Google的开发⽂档。
console.assert() ⽤于判断表达式，满⾜表达式时才输出语句；
console.debug() ⽤于输出输出debug的信息；
console.dir() ⽤于展开输出⼀个dom元素的JavaScript对象；
console.profile() ⽤于记录代码消耗CPU的信息；
console.timeStamp() ⽤于标记运⾏时的timeline信息；
< ⽤于显⽰此刻使⽤的内存信息（这是⼀个属性⽽不是⽅法）；
console.table() ⽤表格的形式来输出信息；
console.clear() 清空控制台的内容（当然你可以⽤快捷键ctrl+L）；
另外，再来优惠⼤派送，介绍⼏个在Chrome控制台上⽐较有趣的命令。
$0 可以在控制台输出在Elements⾯板选中的页⾯元素；
$_ 表⽰上⼀次在控制台键⼊的命令，你也可以⽤快捷键“上⽅向键”来达到同样的效果；
$x 可以⽤xPath的语法来获取页⾯上的元素；
结语
Chrome的console语法确实很强⼤很⽅便，多点使⽤不同的⽅法可以提⾼咱们前端的开发效率。写在最后的话：本⽂基本上是在参考了Google的DevTools⽂档之后，结合⾃⼰的经验来写的，⽬的是把⽂档中说到的⼀些特别的⽅法介绍给⼤家，如果想多点了解，可以到Google的DevTools⽂档看看。致谢！
参考⽂献
那些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的⽅式不会因为代码⾏数改变⽽定位不到，但必须要刷新代码才能把断点删掉。
这⾥介绍⼀个⼩技巧：如果添加“条件判断”的断点？相信⼤家在调试的时候，最烦就是在for循环中的断点了，需要不断地按下⼀步来在循环中到要验证的数据。在代码中添加debugger的⽅式可以这么写：
for(var i = 0; i < length; i++){
if(i === 2){
debugger;
}
}
1
2
3
4
5
其实也不⽤这么⿇烦的，在断点的地⽅右键，选择“Edit breakpoint”就可以写上你想出现调试的条件表达式。
另外，当你在Chrome开发⼯具中配置了workspace之后，你就可以直接在source⾯板上编辑代码并保存代码了，相当⽅便。当然，这只针对本地开发的代码，对于线上的代码就⽆能为⼒了。
代码格式化
⽬前线上的js代码基本上都是做个压缩和变量名混淆的，这样对于js代码的体积压缩有好处，但对于要调试的前端⼯程师来说，却是个⼤⿇烦。
web浏览器在哪里打开上图的按钮就是为这种情况⽽⽣的，点击它就能格式化当前的代码，变成有换⾏格式的代码，阅读起来不再那么晦涩难懂。
然⽽，变量名还是⼀些简单的字母，看起来还是⾮常的费劲。有办法把混淆的变量名变回原本的变量名吗？
答案是有的！不过需要原先的代码⽀持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"
}
1
2
3
4
5
6
7
names就是原本的变量名字，mappings则表⽰该变量名字出现的位置。具体的位置规则是利⽤了VLQ编码，有兴趣的同学可以⾃⼰去挖掘。如果你想简单点，就直接使⽤Google的Closure编译器来创建这样的map⽂件。
总结
前端ers在调试js代码的时候，知道Chrome开发⼯具上的⼩技巧，可以提⾼查问题的效率。
写在最后的话：本⽂基本上是在参考了Google的DevTools⽂档之后，结合⾃⼰的经验来写的，⽬的是
把⽂档中说到的⼀些特别的⽅法介绍给⼤家，如果想多点了解，可以到Google的DevTools⽂档看看。致谢！
参考⽂献
随意修改你的HTML
Web前端开发过程中必然会⽤到Chrome浏览器⾃带的开发者⼯具Chrome DevTools，使⽤它作为Web前端开发性能调试的必备⼯具。就连隔壁的产品⼩哥都知道打开F12改⼀下页⾯元素的标签代码就能看到页⾯效果，这年头谁不会⽤Chrome开发者⼯具呀。
但是Chrome能做的远不⽌你平常⽤的那么简单，这⼀个⼩⼩的开发⼯具集成了很多⾼级的功能你未必知道。我打算把⼀些Chrome DevTools上使⽤的⾼级技巧写成《你不知道的Chrome DevTools》这⼀系列的博⽂，希望⼤家⼀起学习学习。
elements⾯板
使⽤Chrome开发⼯具中的elements⾯板估计是前端⼯程师修改⼀个页⾯内容最快的⽅法了。elements⾯板的左侧显⽰页⾯的HMTL元素，右侧显⽰选中元素的样式。使⽤⽅法也很简单，⽤左上⾓的“放⼤镜”在页⾯上选取元素，然后就可以查看该元素的HTML属性和CSS 样式了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。