Chrome开发者工具JS断点调试实战技巧

JavaScript调试技巧

格式化压缩代码

一：格式化压缩代码

快速跳转到某个断点的位置

技巧二：快速跳转到某个断点的位置

右侧的Breakpoints面板会汇总你在JS文件中设置的所有断点。点击与checkbox同一行的区域，可以暂时取消该断点；若点击checkbox下方的区域，则会直接跳转到该断点所在的代码位置。

查看断点内部的作用范围

技巧三：查看断点内部的作用范围【很实用】

右侧的Scope面板提供了大量实用信息，例如this关键字的指向、变量是否有值、断点处对象的状态或其他类型信息等。

监听事件断点

技巧4：监听事件断点

右侧的Event Listener Breakpoints允许你选择性监听特定行为事件，如键盘输入、鼠标拖拽等。勾选对应的checkbox即可生效，当触发相关行为时，程序会自动跳转到执行该行为的JS代码处。

DOM及 XHR监听跳转

技巧5：DOM及 XHR监听跳转

DOM Breakpoints（DOM断点）：当你在Elements面板中感觉某段DOM元素可能涉及某些行为，但无法确定确切位置时，可以使用此功能进行监听。

XHR Breakpoints（XHR断点）：用于监听向服务器发起的请求，这是AJAX开发中的核心要点。

默认情况下会勾选所有XHR行为，你也可以通过判断URL进行筛选。不过在实际使用中，我较少使用此功能。

单步执行、单步进入、强制进入、单步退出

技巧6：单步执行、单步进入、强制进入、单步退出

这是调试过程中必不可少的功能。熟悉Firebug的开发者对此应该很熟悉，两者基本一致；先参考相关示意图；

功能名词依次如下，如有不懂可参考我之前的Firebug系列文章：

• Pause script excution【单步执行，在断点处暂停，等待调试–不是直译】：暂停后，该按钮会变为Resume script excution【继续执行】，快捷键为【F8 或者 Ctrl + \】
• Step over next function call【单步跳过】：执行时会跳到下一个断点，快捷键为【F10 或者 Ctrl + `】
• Step into next function call【单步进入】：会进入函数内部进行调试，快捷键为【F11 或者 Ctrl + ;】
• Step out of current function【单步跳出】：会跳出当前断点所在的函数，快捷键为【Shift + F11 或者 Ctrl + Shift + ;】

后面的功能则是Chrome的特色功能：

• Deactivate breakpoints：使所有断点临时失效，快捷键为【Ctrl + F8】
• Don't Pause on exceptions：不要在表达式处暂停，此外还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】

总结

总结

本文到此结束，更深入的技巧及一些提高效率的小操作将在下篇文章中介绍，希望对大家的学习有所帮助，也希望大家多多支持本站。