详情介绍
1. 打开开发者工具:在谷歌浏览器中,可通过快捷键“Ctrl+Shift+I”(在Mac电脑上为“Command+Option+I”)打开开发者工具,也可通过菜单栏选择“更多工具”-“开发者工具”来打开。
2. 设置断点:在开发者工具中,选择“Sources”标签页,在左侧的文件树中选择需要调试的JavaScript文件。然后在需要设置断点的代码行上点击左侧的行号,会出现一个红色的圆点,表示设置成功。当程序执行到这一行时,会自动暂停执行,等待操作。
3. 查看变量值:程序暂停执行后,可在“Scope”面板和“Console”面板中查看变量的值,以便了解程序在当前位置的状态。
4. 单步执行程序:可进行单步跳过、单步进入、单步跳出等操作。单步跳过(一般为“Step Over”或按F10)可执行当前行代码并跳到下一行,但不进入函数内部;单步进入(一般为“Step Into”或按F11)会进入函数内部逐步执行;单步跳出(一般为“Step Out”或按Shift+F11)可快速跳出当前函数,回到调用处继续执行。
5. 添加条件断点:在断点处添加条件,只有当条件满足时程序才会暂停执行,可减少不必要的中断,提高调试效率。
6. 使用其他调试功能:在“Call Stack”面板中查看程序的执行路径,了解函数的调用顺序;在“Watch”面板中添加需要监视的变量,观察变量值的变化;还可使用“XHR/fetch Breakpoints”来暂停AJAX请求的执行,方便调试相关代码。
7. 恢复脚本执行:若想放弃当前脚本的调试,可点击“恢复脚本执行”,当前脚本会直接执行到最后。若要重新调试,保持断点存在的前提下刷新页面即可。
8. 清除断点:调试结束后,可手动在断点处再次点击取消断点,或在断点列表中右键点击选择“删除”来清除断点,也可通过debugger指令来让chrome帮助打断点,但调试结束后需清除这些断点,否则代码会一直被暂停进入调试状态。