Chrome Devtools — Sources

1、使用谷歌控制檯Sources面板能夠：

• 查看文件
• 編輯 Css 和 JavaScript。
• 建立和保存 JavaScript 的代碼段，您能夠在任何頁面上運行此代碼段。 代碼段與小書籤類似。
• 調試 JavaScript。
• 設置工做區，以將您在 DevTools 中做出的更改保存到文件系統的代碼中。

2、熟悉 Sources 面板

​

3、左側面板

【3.1】page 已加載的所有資源，以域名劃分文件夾。

【3.2】Content Scripts 瀏覽器擴展工具的腳本，好比我安裝了 Axure 原型擴展插件

​

【3.3】Snippets 代碼片斷，能夠在這裏添加一小段程序，這個一小段程序能夠訪問這個頁面中的變量和函數等。不會由於刷新丟失，使用：添加=>保存(ctrl+s)=>運行(Run)=>不用則移除(Remove)

​

【3.4】Filesystem&Overrides 能夠加載本地文件夾

4、中間面板

【4.1】添加斷點

斷點： 代碼行號所在的位置叫作行號槽，點擊行號槽，爲相應的行添加斷點，並在相應的行號上面加上一個相似肩章的五邊形圖標。特別提一下的是，這個圖標的顏色是藍色的

​

條件斷點： 右鍵一個沒有添加斷點的行號，選擇 "Add conditional breakpoint"，輸入你的條件，當條件知足時，斷點纔會生效。回車後，效果以下

​

行內斷點： 我先在15行處添加了一個斷點，當程序中斷在 15 行時，出現了下圖的例子。但與通常的例子不一樣的是，上面有 3 處標紅的位置，表示 3 處斷點。但第 1 個斷點跟後 2 個不同的是，第 1 個斷點是默認處於激活狀態，然後 2 個則不是，只有點擊激活後才能生效

​

【4.2】右鍵行號

• Add breakpoint 添加斷點
• Add conditional breakpoint 添加條件斷點
• Never pause here 永不停頓
• Blackbox script (黑盒腳本) 咱們寫項目時，不少時候是要引用第三方庫或框架的，當咱們調試時，調試的對象應該是咱們本身寫的代碼，但不少時候，咱們常常在焦灼地進行下一步下一步時，忽然代碼跳到了第三方庫或框架的源碼上去，這讓咱們焦灼的心裏更添了一把柴火。黑盒腳本就是用來解決這個問題的。它可以將一個腳本文件標記爲 "Blackbox Script"，那麼咱們就永遠不可能進入這個文件內部，這個文件對咱們來說就是一個黑盒子。爲何要強調「永遠」呢？由於不只普通的斷點不能訪問這個被標記了的腳本，其餘的，好比說 DOM 斷點、事件斷點等等都沒法訪問那個腳本文件內部。

【4.3】右鍵已斷點行號

• Remove breakpoint 刪除斷點
• Edit breakpoint 修改斷點
• Disable breakpoint 忽略斷點
• Blackbox script (黑盒腳本)

【4.4】打開文件 以用 Cmd + p / Ctrl + p 在任何一個功能面板上搜索一個文件

5、右側面板

【5.1】按鈕組介紹

​

繼續執行代碼，直到遇到另外一個斷點。

​

按正常步驟，應該會一行一行的執行相關代碼，以便深刻探索哪些代碼影響着正在更新的變量。若是你的代碼中調用了另外一個函數，點擊此按鈕將不會進入該函數，而是直接略過，將焦點留在當前函數上。

​

當中斷停留在一個函數調用處時，會進入被調用的函數而且調試器將將其執行到該函數定義中的第一行。

​

當中斷停留在函數內部時，點擊這個按鈕則會跳出函數內部，停留在函數調用的下一個語句

​

單步執行

​

在不取消斷點標記的狀況下，使得全部斷點失效

​

在異常處產生斷點

【5.2】面板介紹

• Watch (變量監聽)：對加入監聽列表的變量進行監聽,在該面板的右側有添加變量和刷新變量列表的按鈕。以下圖：

  在斷點1，2，3時所監聽到num的值分別是undefined，0，1。

​

• Call Stack (函數調用堆棧)：Call Stack 面板會顯示代碼的執行路徑。好比在 fnA() 中調用了 fnB()，fnB() 中調用了 fnC()，那麼中斷若是在 fnC() 內部的話，那麼 Call Stack 面板會依次顯示 fnC、fnB、fnA

​

• Scope (做用域): Scope 面板顯示了你當前斷點所在函數全部屬性的值。Scope 會顯示三種類型的值： Local、Closure 和 Global。以下圖，當前做用域裏的對象是本地參數Local

​

• BreakPoints (斷點列表)：展現斷點列表，將每一個斷點所在文件/行數/該行簡略內容展現

​

• XHR Breakpoints (請求斷點列表)：對達到知足過濾條件的請求進行斷點攔截，點擊該面板右側加號按鈕，會跳出"Break when URL contains"以填寫過濾條件。以下圖，咱們對請求URL包含字母a的內容進行斷點

​

• DOM Breakpoints (DOM斷點列表)：給DOM加斷點，在達到規定條件時觸發斷點，截斷javascript的執行而且定位到斷點處。例如：在 Elements 面板，右鍵 body 元素—>Break on —>attribute modifications，在DOM Breakpoints面板中會顯示DOM元素名

• Event Listener Breakpoints (可斷點的事件監聽列表)：打開這個列表，能夠在監聽事件而且在觸發該事件時進入斷點，調試器會停留在觸發事件代碼行。只須要展開事件列表，選擇要監聽的事件打上勾便可。

​

【5.3】右鍵Breakpoints裏面某個斷點

• Remove breakpoint：刪除選中的斷點
• Deactivate breakpoints：暫時忽略全部斷點 (暗淡斷點標誌和斷點列表，右鍵列表某個斷點選擇 Activate all breakpoints可恢復全部斷點)
• Disable all breakpoints： 暫時忽略全部斷點 (暗淡斷點標誌和斷點列表，右鍵列表某個斷點選擇 Enable all breakpoints可恢復全部斷點)
• Remove all breakpoints：刪除全部斷點
• Remove other breakpoints：刪除其餘斷點