开发工具

VScode
Chrome浏览器

设置断点

在VScode中有js引用的html源码中，Alt+B快捷键打开默认浏览器，我的是chrome浏览器。按F12或右键检查进入开发者模式。选择Source，再选择自己的html源码，点击需要设置的断点行数，F5刷新即可开始断点调试。

断点调试

如图：
1表示继续脚本运行，直到遇到下一个断点或再次点击该位置图标暂停运行（如果脚本程序没有运行完的话）。
2表示逐函数运行，可以快速得到各个函数的运行结果。
3表示进入函数内部执行。
4表示跳出当前函数运行。
5逐步运行。
6使断点失效或激活断点。
7暂停脚本。

查看结果

有三种查看变量值结果的方法：

• 逐步运行到目标位置，鼠标悬停在变量处，即可查看变量值
• 逐步运行到目标位置，点开Scope（作用域）及下属Local或Closure (outer)查看
• 逐步运行到目标位置，在console控制台输入变量名查看