本文大部分转载自civerzhu的专栏https://segmentfault.com/blog/civerzhu
参考链接 https://developer.chrome.com/devtools/docs
console相关技巧
console.log
console.log()可以传入多个参数
console.log("test",123);
同时log的第一个参数是带有特别标示符的字符串的话控制台会有不同的效果
- %s 输出字符串
- %d/%i 输出数字
- %f 输出浮点数
- %o 输出Dom元素
- %O 输出JS对象
- %c 表示对输出的文字应用特殊的样式
console.log("%o",document.body.firstElementChild);
输出结果
<div class="...">...<div>
%c可以自定义输出样式
console.log("%cThis is a colorful text","color:blue; background:red");
可以看出%c应用的样式是CSS的语法，所以基本上CSS支持的样式语句都可以支持。当然，Chrome是有过滤一些CSS语法的，比如对元素定位的CSS语法就不支持（ps：貌似定位啥的也没用，除非是想捣乱的程序员，呵呵）
彩色的输出语句貌似看起来中看不中用，其实不然。大型的web开发项目，特别是多人分模块开发的时候，控制台一大堆console.log输出，你一下子找不到你自己的模块的输出语句。如果给你自己的模块输入语句应用了不同的颜色，相对来说比较好定位到输出的地方，这是提高效率的一个小技巧。
其他console Api
- console.warn
- console.info
- console.error
- console.trace
- console.group
console.time
console.time用于显示代码执行的时间，要搭配console.timeEnd来使用。
console.time("getData use time")
for(){
...
}
console.timeEnd("getData use time")
输出
getData use time： 50.0000ms
其他
其他的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的语法来获取页面上的元素；
Element 面板的使用
使用Chrome开发工具中的elements面板估计是前端工程师修改一个页面内容最快的方法了。elements面板的左侧显示页面的HMTL元素，右侧显示选中元素的样式。使用方法也很简单，用左上角的“选择鼠标”在页面上选取元素，然后就可以查看该元素的HTML属性和CSS样式了。
查看hover方法
右键Html元素菜单上的“Force element state”这个操作，就是强制设置该元素的状态。状态分为四种，分别是active/hover/focus/visited。强制设置状态在某些情况下比较的有用，例如你想查看某些hover伪类的样式，又例如元素里有隐藏的元素，需要在鼠标hover的时候才出现，但你的鼠标移开的时候hover状态就消失了，强制显示hover状态比较方便你检查元素hover的情况。
在elements面板的样式区域也可以给元素强制设置状态（active/hover/focus/visited）。做法和原理跟上面说的一样。
html加断点
在调试的过程中可以给元素添加断点。很神奇吧？现在支持的断点的状态有：元素的子节点结构改变时、元素的属性改变时、元素被删除时。在大型项目中，这一断点比较有意思。大型项目中的HTML结构都比较宏大，而且脚本在改变HTML接口的时候你又难以跟踪元素HTML的状态。使用断点，这些都不是问题。右键菜单中即可把这一功能呼唤出来。