Chrome 開發工具之Sources

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介紹裏也只是略過，沒找到案例，因而暫未下定論。但願有會的朋友給出補充~ 固然，本獸也在尋找答案中...