谷歌浏览DevTools调试小技巧

1. 取色器

　　随便选取一个设置了颜色的DOM，鼠标靠近颜色，变成手型，单击就会出现取色器，还可以点击吸管来选取其他颜色

　　

2. 打印DOM元素

　　鼠标选中DOM元素；控制台输出$0,就会输出选中的DOM元素；$1还可以输出前一个选择的DOM元素，$2以此类推；

　　控制台根据class和ID输出DOM元素：$("#id")  $(".class")；和 document。querySelector("#box")效果一样

3. 事件监听器

　　在控制台通过monitorEvents来监听指定目标事件; 通过unmonitorEvents进行取消

4. 在线调试日志点

　　打开DevTools的source选线卡，找到目标JS所在行号，在行号处右击选则 Add LogPoint  然后输入要打印的变量

　　

5. 控制台输出置顶

　　如果控制台有很多输出，不好一直向下滑动，可以置顶监听