source面板
在前面的博客裏講述過Element面板以及Console面板，這兩塊面板都是很重要也是經常使用到的面板，而今天所要講述的source面板的重要性和實用性不亞於它倆。
首先，打開source面板：（F12->跳轉source）
乍一看，此source面板分有三部分，接下來我們逐一進行講述。
代碼編輯器
此部分面板即爲代碼編輯器，此部分用於顯示指定文件的源代碼。
此版塊是一定會顯示，但是此板塊無法單獨執行操作，需要與其左邊的板塊或者右邊的板塊結合使用來完成自己想要實現的操作。
此板塊左上角和右上角有一對對稱的按鈕，它倆的功能分別是顯示/隱藏左/右板塊。
此面板左下方有一個{}按鈕，它的作用是讓縮小後的文件恢復其可讀性。
如下圖所示：
這樣一個源代碼文件，代碼非常密集，可讀性非常差，點擊{}按鈕。
新生成一個formatted的文件，其代碼風格的可讀性煥然一新。
編輯 CSS 和 JavaScript
代碼編輯器支持代碼的修改編輯，其中CSS 更改操作會立即生效，且不需要保存。JavaScript 更改操作不會立即生效，需要Control+S保存後修改然後根據修改的地方進行對應的重運行方可生效。
注意：此操作只能修正在瀏覽器中運行的代碼， 不能真正修正代碼此頁面的代碼，刷新頁面就會一朝回到解放前，所以得記得及時修正自己服務器上的代碼。
文件瀏覽器
最左邊的板塊即爲文件瀏覽器，此板塊列出了HTML，JavaScript，CSS和其他文件，包括附加到頁面的圖像。 Chrome擴展程序也可能會出現在這裏。
每點擊一個文件就會在其右邊的代碼編輯器上顯示其文件的源代碼。（不一定只是代碼，圖片等文件也可以顯示）
點擊此版塊的 << 符號可看到此版塊的五個重要功能區：
- Page
- Filesystem
- Snippets
- Overrides
- Content scripts
Page，顯示當前頁面的一些資源文件。
Content scripts，顯示當前瀏覽器所使用的插件的源文件。
Filesystem，此功能區我暫時還不清楚是幹啥的，有興趣的夥伴可以自己點擊其跳轉鏈接進行學習和研究。
Overrides，同上，有興趣的夥伴也可以自行研究和學習。
這兩功能區的內容待我後續學習後再補上。
最後，我們再看看更加實用和好玩的Snippets功能區。
Snippets功能區
簡單來說，這個功能區的功能是保存一份自己所編寫的js腳本代碼段。
創建Snippet : （三種方式）
1.點擊 + 號。
2.選擇此面板的空白區域，右鍵->new。
3.Control+Shift+P->Create new snippet。
注意：創建好的snippet保存在瀏覽器中而不是當前頁面裏，所以切換到一個新的頁面中，此snippet仍然存在。
運行Snippet :（四種方式）
1.選擇一條snippet->右鍵->run
2.點擊代碼編輯器板塊的右下角的三角號按鈕。
3.快捷鍵Ctrl+Enter。
4.Control+P->!+當前snippet文件名->Enter。
注意：Control+Shift+P->Back等價於Control+P
示例代碼：
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
新建一個snippet文件填入此代碼段並運行。
Snippet 的其它操作:
選擇一條snippet->右鍵，這裏面還有刪除此snippet、重命名此snippet以及保存此snippet操作。
編輯Snippet，等同於在代碼編輯器板塊編輯代碼。
JavaScript調試
終於到了最核心的部分，這個板塊，顧名思義，圍繞調試js代碼而展開。
三種調試方式：
- 控制檯console.log()。
- 代碼中添加debugger。
- devtools裏打斷點。
第一種方式在控制檯面板介紹過也比較簡單，這裏就不重複說明。第二種方式實質與第三種方式一樣，都是通過打斷點進行調試，只不過直接在devtools打斷點進行調試更爲簡便。
並且，在調試的時候更加推薦使用打斷點的方式。與 console.log() 方法相比，斷點可幫助您更快地查找和修正錯誤。
斷點類型
1.代碼行斷點
普通代碼行斷點，點擊源代碼的所在行頭即可設置此類型斷點，顯示爲藍色。
條件代碼行斷點，選擇目標行頭->右鍵->Add conditional breakpoint即可設置此類型斷點，顯示爲黃色。（條件斷點可按照設置的條件進行選擇行暫停代碼運行）
其中可在此版塊的Breakpoints中查看並管理已設置的斷點。
2.DOM斷點
在Element面板中選擇一個元素->右鍵->Break on->三種斷點類型可選，也是一個藍色的斷點。
此版塊的DOM Breakpoints可以查看所設置的DOM斷點。
這個部分屬於Element面板的補充內容，將在後續博客更新，這裏就不做細講。
3.XHR/Fetch 斷點
可在此版塊中的XHR/fetch Breakpoints中添加此類型斷點。
4.事件偵聽器斷點
可在此版塊中的Event Listener Breakpoints中添加此類型斷點。
5.異常斷點
此版塊第一行最右邊的那個按鈕設置此類型斷點。
第一行的這個按鈕可以取消/開啓全部的代碼行斷點。
調試工具
第一行左邊的這五個按鈕都是用於代碼調試的工具。
第一個按鈕：繼續執行到下一個斷點，如果沒有其他斷點，則直接執行到結束。（快捷鍵F8）
第二個按鈕：運行下一個代碼命令，但不會進入到函數裏面。（快捷鍵F10）
第三個按鈕：運行下一個代碼命令，會進入到函數裏面。（快捷鍵F11）
第四個按鈕，執行完當前函數，跳轉到調用此函數的函數。（快捷鍵Shift+F11）
第五個按鈕，功能類似於第三個按鈕，只是在異步操作時會有不同的表現。（快捷鍵F9）
接下來，我們再看看另外三個功能區Watch，Call Stack和Scope。
Watch：顯示任何表達式的當前值，可以通過+來添加並查看自己想要看到的表達式的值。
Call Stack：顯示嵌套的調用鏈，如果單擊堆棧項（例如“onClick”），調試器將跳轉到相應的代碼，並且還可以檢查其所有變量。
Scope：當前變量，查看當前的所有變量的值，包括局部變量和全局變量。
結語
js調試的基本知識大概就這些，百聞不如一練，看了這麼多東西終究不如自己親自動手操作一番效果來的更好，下期再見！