首先通过游览器运行代码，摁F12或者右键“检查”打开开发者工具，找到Sources，双击打开你要调试的文件，找到你要调试的代码，在开头的行号点一下就打好了断点。打好断点以后我们需要刷新一下，刷新完就会如图所示将会被激活才能看到调试过程。

java 网页js调试工具 js浏览器调试_js代码

当以上步骤做完后，右侧调试键才会被激活，如图所示：

java 网页js调试工具 js浏览器调试_断点调试_02

java 网页js调试工具 js浏览器调试_js代码_03

：恢复断点调试、常用在一个方法调用多个js文件（适用冗长js代码使用）、点击这个会直接跳转到下一个断点（逐过程执行）

java 网页js调试工具 js浏览器调试_断点调试_04

：停止断点调试

java 网页js调试工具 js浏览器调试_函数调用_05

逐语句执行，每点击它一次，js语句就会往后执行一句，快捷键-F10

java 网页js调试工具 js浏览器调试_函数调用_06

：进入函数内部、单步执行下一个函数调用

java 网页js调试工具 js浏览器调试_断点调试_07

：跳出当前函数调用

点击将会逐步执行我们的js代码，我们还可以在Watch里面输入我们要观察的值例如“i”、“sum”等从而观察到运行的状态，找出问题。