提高 Debug 效率的小功能

2019-07-29-16-06-16.jpg

前言

打代码的时候肯定也会遇到很多需要 debug 的时候,或定位 bug,或查看代码运行状况。正所谓工欲善其事,必先利其器,懂得如何更好地去 debug 肯定可以为我们节省不少时间。接下来介绍几种在开发中常会用到的 debug 方法,希望可以为大家提高效率。

条件断点

条件断点,顾名思义,就是符合条件才会断住的断点。只需要在代码行数号码上面按下鼠标右键,就可以看到 Add conditional breakpoint... 的选项
2019-07-29-17-28-02.png
该选项用于创建一个条件断点。如下图是一个条件断点,
2019-07-29-17-25-42.png
它的作用是在 sum === 10 的时候会阻塞代码的执行。
条件断点常用在某个循环里面需要根据条件来阻塞代码。

Tips:

  1. 也可以在配置条件断点的表达式里面输入 console.log 语句,代码执行到这里的时候就会执行打印语句。这就跟 logpoint 的作用非常类似了。
  2. 有时候可能不知道代码应该在那里断,这时候可以借助 DOM 断点来帮助你定位。
    2019-07-30-09-58-44.png

console

  1. console.log
    这个相信大家都用过,但是如果有时候打印的值太多,会容易让人忘记这个值代表的是哪个变量,这里可使用 ES6 的解构赋值语法,就会自动带上变量名。
    如果我们要打印变量 a,b:
    2019-07-30-09-37-32.png

  2. console.assert ,自带的断言工具。
    2019-07-29-18-26-02.png

  3. console.table
    这个方法可以很规范“美观”地输出我们想要的信息,既可以用于对象也可以用于数组,更支持对详细属性的提取,更详细可以看 MDN
    这里举一个例子,对于一个 BlockSvg[]BlockSvg 里面有个属性 type,我想要拿到积木区所有积木的名字并规范输出。
    2019-07-30-09-46-22.png

“观察者”

点击“眼睛”图标可以添加一条表达式,
2019-07-30-10-00-16.png
这条表达式可以是变量也可以是判断条件,添加成功后会常驻在 console 上方并实时显示表达式的值,如上文的 sum:
2019-07-30-10-03-43.png

请求重发不需要刷新页面

对于 XHR 请求,有时候我们需要检测请求的可用性或者联调,这时候并不需要刷新页面,可以使用 Replay XHR 这个选项,就可以重新发一次这个请求了。
2019-07-30-09-50-53.png

override 的妙用

Source 的左侧边栏会有一个 override 的选项,
2019-07-30-10-06-08.png
这真是个非常好用的功能,它的强大之处在于可以用于 debug 线上代码,其实就是将本地修改存到一个文件夹,然后重新请求线上网站的时候会先从本地的资源取,所以线上的代码其实是你保存到本地的代码,从而达到 debug 的效果。但是要注意调试完需要删除掉本地 override 的代码。

不要忽略右键菜单

开发者工具的右键菜单会提供很多有用的选项,但是很多时候我们并没有注意到。

  1. 有时候我们需要找一个层级比较深的元素,需要在 Elements 页那里对元素进行不断的展开,我们可以使用
    2019-07-30-09-54-06.png
    顾名思义就是递归展开,这样可以节省很多时间。

  2. 有一些伪类的样式不好调试,可以使用
    2019-07-30-09-55-10.png
    如选择 :hover ,该元素就会维持在 hover 状态,此时测试 hover 的样式就不用移动鼠标到元素上方了。

这里说的都是我常在开发 debug 上会用到的一些小功能,这些都是从工具的方面提高 debug 的效率,大家对代码的熟悉掌握程度才是关键。🌝