开发工具

VScode
Chrome浏览器

设置断点

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

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

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