JS 快速調試利器，直接在 F12 進行斷點調試。
不用再去檔案中列印。
一、Sources 面闆都有哪些神奇的内容
打開 F12 切換到 Sources 面闆，可以看到下面三個區域
- 區域①，頁面加載的檔案，這一區域又有五個 Tab。
- Page：頁面加載的資源檔案
- Filesystem：可以選擇本地任意檔案檢視
- Overrides：打開本地檔案并編輯，可以直接修改檔案内容
- Content scripts：浏覽器插件及浏覽器本身的資源檔案
- Snippets：自己編寫的測試 JS 片段。
- 會儲存在浏覽器中，重新整理頁面也不會消失。這樣不必在檔案中頻繁編寫測試腳本。
- 可以追加多個片段
- 右鍵可以儲存檔案到本地，可以執行腳本、重命名、删除
- 區域②，在區域①中選中的檔案，都在這個區域打開顯示。
- 點選 JS 檔案中的行号，可以設定斷點
- 左下角的一對花括号，點選之後可以調整代碼格式
- Ctrl + G，可以快速定位到檔案的某一行
- 調試狀态下，滑鼠劃過元素會自動顯示相關資訊。資訊非常齊全很強大
- 區域③，在區域②中設定的斷點資訊，會顯示在這個區域
- Breakpioints：顯示所有區域②中設定的斷點，輕按兩下某一個斷點，可以定位到區域②的相應位置
- Scope：調試停止在斷點處時，顯示目前斷點位置的所有變量。Local（環境變量）、Global（全局變量）、Closure（閉包變量）、Script
- Call Stack：顯示方法加載的過程（先執行什麼，後調用什麼）
- DOM Breakpoints：添加的 DOM 監控資訊
- Event Listener Breakpoints：幾乎包含了所有 JS 事件，選中某一項之後，在網頁上隻要觸發這個時間，就會執行斷點監控
- XHR/fetch Breakpoints：調試 Ajax，點選加号“+”添加 URL，調試到執行 URL 位置後會傳回資訊
- Watch：編寫監控腳本，在執行啊哦每個斷點的位置都會執行這個腳本
二、斷點調試到底是怎麼進行的呢
在區域③中最上面，有上圖中這幾個按鈕
- ①、開始或停止斷點調試（F8 或 Fn + F8，下面同理）
- ②、不進入方法内部，繼續往下執行（F10）
- ③、進入方法中（F11）
- ④、從方法中跳出（Shift + F11）
- ⑤、跳到下一步（F9）
- ⑥、禁用所有斷點
- ⑦、程式運作異常時，是否中斷
下面開始調試：
1、首先在區域②中，設定斷點
2、點選區域③中的開始調試按鈕，看到區域②中代碼進去調試狀态
3、此時，滑鼠放在代碼的任何位置，會自動顯示目前位置的所有資訊
4、在區域③的 Watch 中編寫監控腳本，在 XHR/fetch Breakpoints 中設定調試的 URL
5、然後根據情況點選上面的 7 個按鈕移動調試點，結合區域③下方的資訊檢視調試結果
6、結合 Console 控制台列印資訊，可以更好更快的完成調試
7、調試狀态下，在區域②中直接修改代碼，Ctrl + s 儲存後，檢視修改後的效果
以上基本能解決 JS 大部分的問題，調試好後，将修改代碼移到 JS 檔案中即可。
下一篇接着探索其他功能。。