一、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 中設置斷點事件，當該事件觸發時，自動在該綁定該事件位置設置斷點。