阅读 677

浏览器debugger技巧

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

文章分类
前端
文章标签