设置断点
方式一:在代码中添加
在一行代码的前面或者后面写上 debugger
运行到这的时候就会停止啦
方式二:在浏览器控制台内
直接在控制台的 Sources(源代码) 目录下点击左边的行数即可

然后刷新页面
遇到断点后

遇到断点后,程序会停止运行。此时注意,打断点的那行代码并没有被执行。
调试面板按钮功能说明:
- 继续执行 (Resume):一直执行到下一个断点或脚本结束。
- 单步跳过 (Step Over):执行下一行逻辑,不进入函数内部(快捷键 F10)。
- 单步进入 (Step Into):跳入函数中去执行(快捷键 F11)。
- 跳出函数 (Step Out):从当前执行的函数中跳出。
- 禁用断点 (Disable Breakpoints):禁用所有的断点,不做任何调试。

查看变量

可以查看到不同作用域下的变量的动态变化。Scope 面板展示了代码块范围内的所有变量:

注意事项
提醒一句:对有异步代码的文件进行断点时有个小提醒,可能你在断点的情况下正常运行了,但不断点的情况下就不正常。这时候就要想到异步的时机问题,可能断点的时候异步就执行完了。
常用快捷键补充


