Javascript 调试技巧

在代码中寻找错误
1)alert 方法: 弹框提示
Javascript 调试技巧
Javascript 调试技巧
Javascript 调试技巧
2)console 方法 在调试窗口上打印 JavaScript 值
Javascript 调试技巧
3)断点调试
在浏览器开发者工具中为JS代码添加断点,让JS执行到某一特定位置停住,方便开发者对该处代码段的分析与逻辑处理.
a) Sources断点
打开开发工具——“点击Sources菜单”——“左侧树中找到相应文件”——"点击行号列"即完成在当前行添加/删除断点操作。当断点添加完毕后,刷新页面JS执行到断点位置停住,在Sources界面会看到当前作用域中所有变量和值,只需对每个值进行验证即可完成我们题设验证要求。
Javascript 调试技巧
Javascript 调试技巧
b) Debugger断点
操作就跟在Sources面板添加断点调试几乎一模一样,唯一的区别在于调试完后需要删除该语句。
但是在开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码在Sources树种无法找到,因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点,此时"debugger;"就发挥作用了。
Javascript 调试技巧
4) DOM断点调试
a) 当节点内部子节点变化时断点(Break on subtree modifications)
Javascript 调试技巧
b) 当节点属性发生变化时断点(Break on attributes modifications)

Javascript 调试技巧
c) 当节点被移除时断点(Break on node removal)

4) 事件监听器断点 Event Listener Breakpoints
Javascript 调试技巧

相关文章: