Chrome开发者模式下断点调试JS

写在前面

之前老大就教过如何在chrome的开发者模式下,设置断点,调试JS,第一次知道chrome还有这功能,觉得新鲜神奇。可惜后面偷懒没有及时记录下来,这次又遇到JS调试,脑子里一堆问号:上次是咋整的?Google了下,找到了一篇文章JS断点调试心得,文章写得很详细,这里我就简单粗暴记录下操作要点,随时备忘。

快速设置断点

以bootstrap的button页面为例:

打开chrome的开发者模式:【右键,点击inspect】

选择 sources, 找到你要设置断点的文件,在你需要debug的地方,点击设置断点。

这里有一个小技巧,对于压缩后的JS文件,点击下面的一个{} 按钮:

会将代码格式化,非常有用。

逐句调试

有两个频繁使用的调试按钮,如图所示,一个点击去往下一个断点,另一个点击会前往下一条语句。

巧用console

使用快捷键ESC,打开console,可以在console中输入变量,比如e,可以看到变量的具体内容。或者直接把光标放在需要查看的变量上,也可以看到变量的具体内容。

注意这里的console与source旁边那个console不同。在source旁边的console中输入变量,会发现什么也不会发生。

条件断点

可以给断点添加条件,添加条件后的断点,颜色会变成橙色。

比如在下面这个循环体中,需要debug 某一次循环,就可以设置条件断点 n==2,设置后,刷新页面,在console中输入n,会车,就会发现此时 n 为2,然后就可以在n = 2 时,开始你的debug之旅。

取消断点

临时禁用按钮:

如果要取消或者移除所有断点:

注意,需要在面板的Breakpoints下点击右键,才会弹出上图所示的功能列表。

参考

推荐:JS断点调试心得

如果想要详细了解面板知识,推荐这篇:用Chrome调试你的Javascript