一、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 中设置断点事件,当该事件触发时,自动在该绑定该事件位置设置断点。