神奇的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);

这样在控制台就会这样显示：

如果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.trace

console.trace跟log的区别在于trace会对输出的对象进行展开。

console.group

console.group用于显示一组的控制台输出，要搭配console.groupEnd来使用。

console.time

console.time用于显示代码执行的时间，要搭配console.timeEnd来使用。

其他

其他的console方法我将简单列举一下，就不一一详细说明了，详细可以参考Google的开发文档。

console.assert() 用于判断表达式，满足表达式时才输出语句；
console.debug() 用于输出输出debug的信息；
console.dir() 用于展开输出一个dom元素的JavaScript对象；
console.profile() 用于记录代码消耗CPU的信息；
console.timeStamp() 用于标记运行时的timeline信息；
console.count() 用于记录代码执行的次数；
console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）；
console.table() 用表格的形式来输出信息；
console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）；

另外，再来优惠大派送，介绍几个在Chrome控制台上比较有趣的命令。

$0 可以在控制台输出在Elements面板选中的页面元素；
$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果；
$x 可以用xPath的语法来获取页面上的元素；

结语

Chrome的console语法确实很强大很方便，多点使用不同的方法可以提高咱们前端的开发效率。写在最后的话：本文基本上是在参考了Google的DevTools文档之后，结合自己的经验来写的，目的是把文档中说到的一些特别的方法介绍给大家，如果想多点了解，可以到Google的DevTools文档看看。致谢！

参考文献

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

那些debug的技巧

关于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;
    }
}

其实也不用这么麻烦的，在断点的地方右键，选择“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

随意修改你的HTML

elements面板

使用Chrome开发工具中的elements面板估计是前端工程师修改一个页面内容最快的方法了。elements面板的左侧显示页面的HMTL元素，右侧显示选中元素的样式。使用方法也很简单，用左上角的“放大镜”在页面上选取元素，然后就可以查看该元素的HTML属性和CSS样式了。

多种方法修改HTML

要修改页面元素的HTML结构，其中一般涉及到：

修改HTML属性
修改整个HTML的代码
删除节点
移动节点的位置

对于上述几种要求，使用elements面板的时候都比较简单直接。要修改HTML属性，只需要在要修改的属性上双击，就会进入输入状态，输入你想要修改的属性；要修改整个HTML代码的时候，只需要在元素上右键-“Edit as HTML”即可；要删除节点，可以在选中元素后，按下delete快捷键，或者右键选择“Delete node”;需要移动节点的位置的时候，只需要鼠标拖动选中的元素到你想要的位置即可。

值得一提的是右键菜单上的“Force element state”这个操作，就是强制设置该元素的状态。状态分为四种，分别是active/hover/focus/visited。强制设置状态在某些情况下比较的有用，例如你想查看某些hover伪类的样式，又例如元素里有隐藏的元素，需要在鼠标hover的时候才出现，但你的鼠标移开的时候hover状态就消失了，强制显示hover状态比较方便你检查元素hover的情况。

另外，在调试的过程中可以给元素添加断点。很神奇吧？现在支持的断点的状态有：元素的子节点结构改变时、元素的属性改变时、元素被删除时。在大型项目中，这一断点比较有意思。大型项目中的HTML结构都比较宏大，而且脚本在改变HTML接口的时候你又难以跟踪元素HTML的状态。使用断点，这些都不是问题。右键菜单中即可把这一功能呼唤出来。

多种方法修改CSS

elements面板的右侧即是展示所选择元素的css样式的地方。然而右侧不止是修改和展示css样式的地方。实际上，右侧包括了以下集中功能：

展示和修改CSS样式
展示实际计算结果的样式
显示当前元素的事件监听情况
显示当前元素包含的dom断点
显示当前元素的对象属性

这些功能都在面板右侧的tab上有显示。另外，如果你有给Chrome开发工具安装插件，那么插件的功能区也会成为一个新的tab显示在后面。例如博主我就安装了jQuery Audit和JS Runtime这两个插件。

利用elements面板修改CSS样式是很简单的事情，但里面也有一些小窍门可以分享给大家。在CSS样式的属性值上，如果是数字的属性值，则可以通过按上下方向快捷键来给属性值加一，通过按住shift键的同时按上下方向快捷键，可以给属性值递增十。

同样，在elements面板的样式区域也可以给元素强制设置状态（active/hover/focus/visited）。做法和原理跟上面说的一样。

总结

总而言之，通过Chrome开发工具的elements面板可以很轻松地修改你的页面。

参考文献

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

Chrome DevTools 中你可能不知道的 9 个调试技巧

神奇的console

console简介

多彩的console.log

console的其他API

console.trace

console.group

console.time

其他

结语

参考文献

那些debug的技巧

关于web前端的调试

不简单的sources面板

断点

代码格式化

总结

参考文献

随意修改你的HTML

elements面板

多种方法修改CSS

总结

参考文献

推荐几款DevTools插件

关于DevTools插件

jQuery Audit

JS Runtime Inspector

Devtools redirect

jQuery Debugger

Grunt DevTools

CoffeeScript Console

Angular Batarang

DevTools Theme

猜你喜欢