我是Herry，一名平平无奇的前端开发。
背景
个人觉得debugger是开发最最基础，也是最最重要的能力之一。前端debugger分为浏览器端和Node端，本文记录一些个人常用的浏览器debugger技巧。
1. console对象
是的，前端说起调试，最常用的肯定就是console.log方法，但是console是一个对象，上面还有很多很方便的方法。
-
console.log：
console.log("a") // 在console输出字符串a console.log(a) // 在console输出变量a的值（a可以所有的js类型） console.log("a: ", a) // 在控制台输出字符串和变量 console.log("a: " + a) // 同上 // 自定义log样式，注意：log字符串前面要加上%c const style = 'background-color: #fff; color: red; font-size: 24px; padding: 20px;' console.log("%chello，这是我自定义的log样式", style) 复制代码 -
console.time + console.timeEnd
console.time('for耗时：') for (let i = 0; i < 10000; i++) {} console.timeEnd('for耗时：') // console上打印：for耗时：: 0.132080078125 ms 复制代码怎么样，用来计算某个代码块的耗时是不是非常方便。但注意前后两个方法的参数必须是一致的，才能达到对应关系。这里的一致是指“长相一致”，即只要值是一致的即可，不用考虑引用是否相同
-
console.warn：有warn样式的log
-
console.error：有error样式的log
-
console.info：有info样式的log
-
console.trace：从该语句开始，回溯每一步执行，知道触发的源头，可用于debugger堆栈调试
a() fn a() { b() } fn b() { c() } fn c() { console.trace(); d() } fn d() { console.log('end') } // 这里会从c函数的trace位置，回溯到a函数的执行，在console上显示出对应的源码索引 复制代码 -
console.table：可用于打印obj/arr成表格
console.table([1, 2, 3]) console.table({a: 1, b: 2, c: 3}) 复制代码注意：Console对象并不是JavaScript的内置对象，而是浏览器的内置对象，所以在控制台上的显示样式可能会因为浏览器的不同而有所差异。
2. debugger语句
在代码中加上debugger语句，是仅次于console.log的常用调试方式，这种断点调试方式相当于默认的breakpoint。
let a = 1
for (let i = 0; i < 100; i++) {
a++
}
debugger
// 浏览器运行到该js代码，则会自动进入breakpoint断点
复制代码3. chrmoe devtool breakpoint
-
breakpoint：默认断点。在devtool source面板源码上打个断点，或者是在源码里写
debugger语句，都是默认的breakpoint断点 -
logpoint：日志断点。在devtool source面板源码上，右键选择添加一个logpoint，里面写入药打印的日志信息。eg：
"a: ", a或a。当执行到logpoint时，不会暂停代码的运行，而是会将log打印到console上。注意，当调试带有sourceMap的压缩后的代码时，可能会导致运行时看到的变量名跟运行时拿到的变量名不一致。此时有2种方法，一种是在右侧的scope里找到真正的变量名，进行logpoint，第二种是disable掉sourceMap，这样就都是压缩混淆后的代码了，所以展示运行时的变量名。
-
conditional breakpoint：条件断点。顾名思义，就是指定条件才会进入改断点。同样是在devtool soure面板源码上，右键选择添加一个conditional breakpoint，里面写上进入该断点的条件，eg：
a === 100。
4. console的$系列
- $：这个不用多说了，就是jq对象
- $i：安装
Console Importer插件后，在console就可以利用$i(xx)命令，来下载xx库。eg：$i('lodash')，window对象上便有了_变量。这个原理应该是当执行$i(xxx)命令后，会在html上插入一个script标签来引入并执行xxx库的cdn文件。 - $1~$4：分别能拿到你鼠标最后点击的倒数1～4个dom节点
- $$(select)：$(select)拿到的是NodeList(伪数组)，而$$(select)拿到的则是一个纯正的数组，方便我们在控制台上调试API
5. Element
- inspect：有时候一些dom节点会嵌套很深，导致我们很难利用Element面板html代码来找到对应的节点。
inspect(dom元素)可以让我们快速跳转到对应的dom节点的html代码上。eg：在console输入inspect($(#app))，回车后便可以跳转到#app节点的html代码。 - 元素显隐：可以在Element上选中要隐藏的元素节点，然后右键选择
Hide Element来隐藏元素，也可以选中后按下h键盘，来快速地切换元素的显隐。
6. Performance
- chrome Performance面板上可以让我们了解到页面生成的各个步骤（eg：html parse、js run、定位、渲染、回流、重排重绘等）的耗时时间，进一步进行代码的优化。
写在最后
chrome devtool的调试能力远不止这些，是一个非常好用的调试工具，这里只罗列出来本人比较经常使用的技巧，若有错误，欢迎批评指正。