JS的断点调试记录

这里主要是对断点调试的过程进行记录（可能是因为我做的项目比较简单，其实都没有用过调试工具，一般就是打印就可以了）

1.在代码中添加断点：

在需要调试的地方添加代码 debugger，然后在浏览器运行就可以开启调试模式了。

 

2.在Chrome的开发者工具里面的Sources打开要调试文件，直接在对应的行数前面点一下即可

操作区域的按钮从左往右 依次是：

Resume script execution   恢复脚本执行

Step over next function call：执行到下一步的函数调用（跳到下一行）

Step into next function call：进入当前函数。

Step out of current function：跳出当前执行函数。

Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。

Pause on exceptions：异常情况自动断点设置。

 

3.页面事件的调试：

Event Listener Breakpoints

事件监听器断点，即根据事件名称进行断点设置。当事件被触发时，断点到事件绑定的位置。事件监听器断点，列出了所有页面及脚本事件，包括：鼠标、键盘、动画、定时器、XHR等等。极大的降低了事件方面业务逻辑的调试难度。

图片中的这个情况就是将所有的点击事件都监听了，点击所有的按钮都会被打上断点。然后方便进行调试

调试，是在项目开发中非常重要的环节，不仅可以帮助我们快速定位问题，还能节省我们的开发时间。熟练掌握各种调试手段，定当为你的职业发展带来诸多利益，但是，在如此多的调试手段中，如何选择一个适合自己当前应用场景的，这需要经验，需要不断尝试积累。