我是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的调试能力远不止这些,是一个非常好用的调试工具,这里只罗列出来本人比较经常使用的技巧,若有错误,欢迎批评指正。