Javascript 调试技巧

Javascript 调试技巧

在代码中寻找错误
1）alert 方法： 弹框提示



2）console 方法 在调试窗口上打印 JavaScript 值

3）断点调试

在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理.

a) Sources断点

打开开发工具——“点击Sources菜单”——“左侧树中找到相应文件”——"点击行号列"即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。


b) Debugger断点

操作就跟在Sources面板添加断点调试几乎一模一样，唯一的区别在于调试完后需要删除该语句。
但是在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点，此时"debugger;"就发挥作用了。

4) DOM断点调试

a) 当节点内部子节点变化时断点（Break on subtree modifications）

b) 当节点属性发生变化时断点（Break on attributes modifications）

c) 当节点被移除时断点（Break on node removal）

4) 事件监听器断点 Event Listener Breakpoints