哪些不为人知的实用chrome debug技巧

这个跟上一篇chrome开发功能是姐妹篇,都是‘不为人知’系列。哈哈~
这篇主要讲一下在debug过程中,使用到的实用技巧。当然也比较小众的技巧。

  1. 编辑断点。chrome浏览器的debug本身做得非常程序员化,可以支持编辑断点。就是可以设置在什么情况下触发断点。这个功能当在循环语句中打断点的时候,非常有用!因为通常情况下并不是所有这个循环下的断点都要进。为了提高定位问题的速度,可以给断点增加一个条件,只有当条件语句为true时,才触发断点。
    看截图,在断点上右键,然后选Edit breakpoint
    编辑断点1
    此时写条件语句,只有当条件语句为true时,才触发断点。
    编辑断点2

  2. 在断点处执行上下文环境下执行语句。这个功能其实大家都会用。但是大家用的流程是这样的:复制代码,然后打开console,粘贴代码,最后执行代码看看结果。其实还有更简单的方式,选中需要执行的代码,然后按快捷键ctrl+shift+e,就直接能在控制台看到执行结果。
    执行选中语句