chrome控制台调试

一、Elements

二、Console

可以输出控制台信息，进行js语句交互

三、Sources

1、DOM断点调试

在elements面板中，选择需要设置的断点的元素，右键break on –> 可以 分别选择 substree modifications 、 Attribute modifications 、node remove ，当该元素被增删修改顺序、 修改属性、 移除时，断点自动设置在其对应操作的js代码中

2、js断点调试

在sources面板文件中设置断点，重新运行代码，当代码运行到该处停止，可以点击step over next function call 运行到下一行代码，进行单步调试，在sources面板和下面的console都可以查看该作用域的变量及变量值

3、XHR断点调试

在sources面板中 XHR Requestpoints中添加URL条件，当URL包含该条件时，自动在其对应xhr.send()处设置断点，但一般项目中使用的ajax都是封装好的，故而该用法使用很少。

4、Event Listener 断点调试

在sources面板中Event Listener Breakpoints 中设置断点事件，当该事件触发时，自动在该绑定该事件位置设置断点。

四、Network