Chrome DevTools — JS調試

1、設置斷點

斷點類型	使用場景
debugger	在js文件中，手動輸入代碼debugger;，當js文件運行時，會在此處暫停
行斷點	知道代碼執行的區域，手動在某一行代碼處設置斷點
知足條件的行斷點	知道代碼執行的區域，手動在某一行代碼處設置斷點，可是隻在知足某些條件下才會暫停
DOM斷點	改變、刪除一個DOM節點，或者刪除這個DOM節點的子元素時設置斷點
XHR斷點	當XHR URL包含某一字符串時設置斷點
事件監聽器斷點	觸發某些事件時設置斷點
拋出異常斷點	拋出異常時設置斷點

debugger

開發環境下：在js源文件中，想在某個地方設置斷點以查看後續代碼的執行狀況，手動在此處輸入代碼debugger;，js文件運行的時候會在此處暫停。

行斷點

當開發者知道要在代碼的哪一個地方打斷點時，設置行斷點調試。DevTools老是在這行代碼執行以前暫停。
行斷點設置的方法：

1. 切換到Sources面板

2. 打開想要調試的js文件

3. 找到代碼所在的行

4. 這行代碼的左側有一個數字，這個數字表明着這行代碼在js文件中所在的行數。點擊這個數字，會出現一個藍色的圖標，表示斷點已經設置好。

知足條件的行斷點

和行斷點同樣，可是隻有在某一條件爲真時，DevTools纔會在這行代碼以前暫停。
設置方法：

1. 切換到Sources面板

2. 打開想要調試的js文件

3. 找到代碼所在的行

4. 這行代碼的左側有一個數字，這個數字表明着這行代碼在js文件中所在的行數，右擊這個數字

5. 選擇 Add conditional breakpoint，出現一個輸入框

6. 在輸入框中輸入條件表達式

7. 按Enter鍵激活此斷點，當條件表達式爲真時，DevTools會在這行代碼執行以前暫停（條件性行斷點的顏色爲橙色）

管理行斷點

設置的不少行斷點能夠在Breakpoints小窗口作統一管理。

• 不勾選某一複選框，使對應斷點處於「失效」狀態，反之亦然

• 右鍵能夠刪除當前斷點、刪除全部斷點、停用斷點等，或者所有（不）勾選複選框使全部的斷點（不）「生效」

• 停用斷點（Deactivate breakpoints）的意思是：告知DevTools忽略全部的行斷點，可是同時保持那些斷點的狀態，當激活斷點（Activate breakpoints）時，這些斷點能夠繼續起做用

DOM斷點

當改變一個節點或者其子元素時，能夠設置一個DOM斷點：

1. 點擊Elements面板

2. 找到想要設置斷點的元素

3. 在此元素上右鍵

4. Break on --> Subtree modifications / Attribute modifications / Node removal

Subtree modifications（子樹修改）：當前選中的元素，刪除、增長其子代或者改變其子代的內容。修改子元素的屬性或者當前選中元素有任何改變都不會觸發此類型斷點
Attributes modifications（屬性修改）：當前選中的元素，增長、刪除其屬性，或者修改某個屬性值
Node Removal（節點移除）：移除當前選中的元素

XHR斷點

當XHR的請求URL包含某一特定的字符串時，能夠暫停調試代碼。DevTools會在XHR調用send()那行代碼的地方暫停。

1. 點擊Sources面板

2. 展開XHR Breakpoints小窗口

3. 點擊「增長斷點（Add breakpoint）」

4. 輸入一個字符串，只要在某個XHR的請求URL中包含此字符串， DevTools會暫停

5. 按Enter鍵確認

事件監聽器斷點

這個斷點類型也算是比較經常使用的一個了，特別是當咱們調試別人的代碼時，觸發某個事件，想找到對應的代碼。事件類型能夠是很具體的，好比click事件，也能夠是某一類別的事件，好比「鼠標事件」。

1. 點擊Sources面板

2. 展開Event Listener Breakpoints小窗口

3. 勾選某一類別的事件或者是某一具體的事件

拋出異常斷點

當代碼拋出一個捕獲的或者未捕獲的異常時，能夠設置此類型斷點在代碼拋出異常的地方暫停。

1. 點擊Sources面板

2. 點擊Pause on exceptions按鈕，激活時按鈕變成藍色

3. （可選）勾選Pause On Caught Exceptions表示只在捕獲的異常處暫停，未捕獲的異常不考慮

2、JS Debugging

設置斷點暫停代碼

設置一個斷點使代碼在執行的過程當中暫停，以便進一步地調試代碼。

調試代碼

跳過某個函數（Step over）

當在某行代碼暫停時，且此行代碼包含某個函數，這個函數與咱們調試的bug又沒有關係，此時能夠點擊Step over圖標直接進入下一行代碼（函數正常執行，但DevTools不會進入到函數中去逐行調試代碼）。

舉例，假設正在調試如下代碼：

function updateHeader() {  
  var day = new Date().getDay();  
  var name = getName(); // A  
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

當在A處暫停時，點擊Step over圖標，DevTools會執行getName函數裏面的全部代碼，即B和C（但不在B、C處暫停），而後會在下一行代碼D處暫停。

按照代碼實際執行的順序調試（Step into）

當在某行代碼暫停時，且此行代碼包含某個函數，這個函數與咱們調試的bug又有關係，此時能夠按Step into圖標進入到這個函數中作進一步的調試。

還如下面的代碼舉例：

function updateHeader() {  
  var day = new Date().getDay();  
  var name = getName(); // A  
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

當在A處暫停時，點擊Step into按鈕，DevTools會執行這行代碼，而後在B處暫停。

跳出某個函數（Step out）

當在某個函數內部暫停時，若是確認函數剩餘的代碼與bug無關時，能夠按Step out圖標讓DevTools執行函數剩下的代碼，而後跳出函數。

如下面的代碼舉例：

function updateHeader() {  
  var day = new Date().getDay();  
  var name = getName();  
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

當在A處暫停時，點擊Step out圖標，DevTools會執行函數getName()剩餘的代碼即B，而後在C處暫停。

繼續執行腳本

代碼暫停以後，點擊Resume Script Execution圖標可讓代碼繼續執行。DevTools會繼續執行代碼直到碰到下一個斷點處暫停，若是後面沒有斷點，腳本就一直執行到結束。

若是想忽略後面全部的斷點，強制代碼一直執行，能夠點擊Resume Script Execution圖標不鬆直到出現Force script execution圖標，而後把鼠標移動到這個圖標上便可。

從新執行調用棧的top函數

當在某行代碼暫停時，在調用棧窗口（Call Stack）的任意地方右鍵選擇Restart Frame，DevTools會在調用棧top函數的第一行代碼處暫停。top函數就是指最後一個被調用的函數，在調用棧中位於最上面，因此叫top函數。

如下面的代碼舉例：

function factorial(n) {
  var product = 0; // B
  for (var i = 1; i <= n; i++) {
    product += i;
  }
  return product; // A
}

當在A處暫停時，點擊Restart Frame以後，代碼會在B暫停，即便沒有在B處設置斷點。

查看、編輯值

當代碼暫停時，能夠在Scope窗口查看、編輯某些屬性值和變量值，這些屬性和變量按照做用域又分屬在不一樣的地方，如局部做用域內、閉包內或者全局做用域內。雙擊值便可修改。

提示: 代碼不在暫停狀態時，Scope窗口裏面是空的

查看當前的調用棧

代碼暫停時，能夠在Call Stack窗口查看當前的調用棧。若是有異步調用的代碼，勾選上Async複選框使異步調用函數也出如今調用棧中。

以上圖爲例：
onClick調用inputsAreEmpty ，inputsAreEmpty調用getNumber1,getNumber1是top函數。
DevTools當前高亮的代碼屬於藍色箭頭指向的inputsAreEmpty函數，而高亮的這一行正是getNumber1函數被調用的位置。
提示: 代碼不在暫停狀態時，Call Stack窗口裏面是空的

忽略某個腳本文件

在調試的過程當中，常常會碰到第三方的庫（如jQuery）或者框架，一般狀況下，咱們的bug不是由這些庫或者框架的代碼引發的，可是調試的過程當中又不可避免地會進入到這些代碼中，不勝其煩。這時，咱們可使用DevTools的黑盒功能，把這些三方腳本文件放到黑盒中，這樣，調試的過程當中就不會進入到這些腳本中去了，Call Stack窗口也不會顯示和這些腳本相關的調用關係。
把一個js文件放入黑盒有三種方式：

在編輯器窗口

1. 打開對應的js文件

2. 在編輯器窗口的任意地方右鍵

3. 選擇Blackbox script

在調用棧窗口

1. 在屬於這個腳本的某個函數上右鍵

2. 選擇Blackbox script
   

在DevTools設置裏面

1. 打開設置

2. 切換到Blackboxing選項

3. 點擊Add pattern

4. 輸入腳本的文件名或者是文件名的正則表達式

5. 點擊Add

提示：也能夠在這裏統一管理黑盒中的全部腳本文件

使用Watch窗口觀察表達式值的變化

1. 點擊Add Expression按鈕添加一個新的表達式去觀察

2. 點擊Refresh按鈕刷新當前全部表達式的值。調試的過程當中，這些表達式的值是自動變化的

3. 把鼠標懸浮在一個表達式上面而後點擊Delete watch expression刪除一個表達式

4. 在Watch窗口右鍵也能夠進行添加、刪除表達式操做

改變壓縮文件的可讀性

點擊Format

編輯腳本文件

修復bug的過程當中，咱們會常常改變某些代碼而後查看效果。對於一些小的改動，不必去在源文件改而後從新加載頁面查看效果，咱們能夠直接在DevTools中修改。

1. 在Sources面板打開對應的文件

2. 在編輯器窗口直接修改

3. 按Command+S(Mac)或者Ctrl+S保存修改，DevTools會從新編譯腳本。繼續在頁面上進行某些操做，好比點擊事件，就能夠看到修改代碼的效果了。