Sources面板主要用於查看web站點的資源列表及javascript代碼的debug
熟悉面板
了解完面板之后，下面來試試這些功能都是如何使用的。
文件列表
展示當前頁面內所引用資源的列表，和平常的文件tree一樣。
內容區域
可在該區域查看打開的文件的腳本，也可以在區域內下斷點，打斷指定執行代碼行。
斷點方式：
1.在腳本中寫入debugger
2.在Sources面板文件內標注斷點。
debugger：
var num = 1; console.log(num); debugger;
效果圖：
標注斷點：
在下斷點的代碼行前點擊左鍵/或者點擊右鍵選擇"Add breakpoint"。
效果圖：
在下斷點的代碼行前右擊可操作斷點狀態，也可使用"Edit breakpoint"控制斷點條件。
如上圖，僅當滿足 num = 5 時觸發斷點。
在執行到斷點的時候，腳本不會繼續向下執行，而這時，將鼠標放到想查看的變量名上，即可顯示該變量信息。
按鈕組介紹
continue：繼續執行代碼，直到遇到另一個斷點。
step_over：按正常步驟，應該會一行一行的執行相關代碼，以便深入探索哪些代碼影響着正在更新的變量。如果你的代碼中調用了另一個函數，點擊此按鈕將不會進入該函數，而是直接略過，將焦點留在當前函數上。
step_into：進入被調用的函數並且調試器將將其執行到該函數定義中的第一行。
step_out：在已進入一個函數后，單擊此按鈕將導致函數定義的其余部分的運行，調試器將將其執行到父函數。
disable-breakpoints：控制斷點開/關的按鈕。
pause-gray：在異常處產生斷點。
此處elem是錯誤的，應該為ele，所以觸發了異常斷點。
變量監聽
對加入監聽列表的變量進行監聽,在該面板的右側有添加變量和刷新變量列表的按鈕。
在斷點1，2，3時所監聽到的值分別是undefined，0，1。
函數調用堆棧
函數調用堆棧顯示了一條完整的導致代碼被暫停的執行路徑，讓我們深入了解導致錯誤的原因。
上圖在fnC下斷點，該面板顯示fnC函數的執行路徑，分別是從fnA調用fnB，fnB再調用fnA，並且函數調用堆棧列表中還有每一步調用分別在哪個文件和在文件的第幾行。
作用域
當前斷點所在函數執行的作用域內容。
當前作用域里的對象是本地參數_obj和Global，this指向window，之后我們執行下一步，去下一個斷點看看。
現在作用域對象是本地對象和Global，this指向obj。
斷點列表
展示斷點列表，將每個斷點所在文件/行數/改行簡略內容展示。
DOM斷點列表
給DOM加斷點，在達到規定條件時觸發斷點，截斷javascript的執行並且定位到斷點處。詳情可參考"Chrome 開發工具之Elements"中的介紹。
請求斷點列表
對達到滿足過濾條件的請求進行斷點攔截，點擊該面板右側加號按鈕，會跳出"Break when URL contains"以填寫過濾條件。
當滿足url攔截條件時，便會在該請求執行發送處進入斷點。下面換個不滿足條件的url測試。
和預料中的一樣，並沒進入斷點。
可斷點的事件監聽列表
打開這個列表，可以在監聽事件並且在觸發該事件時進入斷點，調試器會停留在觸發事件代碼行。只需要展開事件列表，選擇要監聽的事件打上勾即可。
代碼格式
當文件是壓縮文件的時候，代碼往往是一行的，點擊該按鈕即可顯示規范的代碼格式。
代碼位置
顯示當前焦點在幾行幾列。
Async 獲取異步函數的函數調用堆棧
該按鈕處於未選中狀態時，當異步函數執行的時候debugger，函數調用堆棧中顯示的是"anonymous function"及信息，處於選中狀態時，異步函數中的debugger將會在函數調用堆棧中顯示當前異步函數是在哪個函數中被調用的。
未勾選Async
勾選Async
細心的朋友看到這應該發現，Event Listeners(測了下這塊內容，好像跟Elements面板的Event Listeners對應不上)的介紹是沒寫的。這部分google了好多資料，感覺都不是想要的答案，包括在chrome官網的dev tools介紹里也只是略過，沒找到案例，於是暫未下定論。希望有會的朋友給出補充~ 當然，本獸也在尋找答案中...