JS调试技巧

1.用console.log()代替了alert()

2.js断点调试

1>Sources断点：在代码中加入console.log()来进行验证

打开SOurece菜单，左侧找到相应文件，点击行列号，即断点设置完。

从左到右，各个图标的表示功能分别为：

• Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）
• Step over next function call：执行到下一步的函数调用（跳到下一行）
• Step into next function call：进入当前函数
• Step out of current function：跳出当前执行函数
• Deactive/Active all breakpoints：关闭/开启所有所有断点（不会取消）
• Pause in exceptions：异常情况自动断点设置

2>Debugger断点：通过在代码中添加“debugger”语句，当代码执行到该语句的时候就会自动断点，接下来的操作和和Source几乎一模一样。

因为在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码），而这部分js代码在Source树中无法找到，因此无法直接在开发工具中直接添加断点，如果想给异步脚本添加断点，此时“debugger”就发挥作用了。

3>DOM断点调试

当节点内部子节点变化时断点：随着DOM节点的操作逐渐增多，难免会遇到很难定位代码段的情况，而我们却可以通过Elements面板，快速定位到相关DOM节点，所以DOM定位就很重要哦！

当节点属性发生变化时断点：将临时数据存储于DOM节点的自定义属性中，是很多开发者优先选择的方式。属性断点

当节点被移除时断点：通常情况是在执行"parentNode.removeChild(childNode)"语句的时候使用词方式，用的不多哦。

XHR Breakpoints：专为异步而生的断点调试功能， 我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL满足此条件，JS逻辑则会自动产生断点。

Event Listener Breakpoints:时间监听器断点，即根据名称进行断点设置。当事件被触发时，断点事件绑定的位置，事件监听器断点，列出了所有页面及脚本事件。极大的降低了事件方面业务逻辑的调试难度。