使用斷點調試代碼

簡單地說，斷點調試是指本身在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，而後你能夠一步一步往下調試，調試過程當中能夠看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。

在web開發中，打斷點是常常使用的調試代碼的方法，如今在這裏簡略的翻譯一下官方對此功能的講解，並插入一些本身的說明。

文章翻譯自：https://developers.google.com...

什麼時候使用何種類型的斷點：

Line-of-code： 知道在DevTools代碼裏要打點的具體區域；

Conditional line-of-code： 知道在DevTools代碼裏要打點的具體區域且設置條件，只有爲真才執行斷點操做；

DOM： 在 body 中添加，檢測節點或其子節點的增刪和屬性變化；

XHR： 在 xhr url 包含特定內容的時候打點；

Event listener： 在觸發特定事件的時候打點；

Exception： 在拋出異常的時候打點；

Function： 在特定函數被調用的時候打點；

debugger： 在書寫的代碼裏但願打點的時候手動打點；

---

斷點方法

Line-of-code breakpoints

瀏覽器會執行解析操做到打點的那行代碼以前（不包含那行代碼）。

操做： f12 -> Sources Tab -> 雙擊打開須要打點的文件 -> 找到須要打點的那行代碼 -> 在行數上單擊，出現一個藍色標記，打點完成。

在標記上再次單擊，會刪除當前斷點。

在代碼中輸入 debugger 一樣能在指定位置暫停，除了不是在 DevTools UI 裏設置之外和 line-of-code breakpoints 是相等的。

console.log('a');

console.log('b');

debugger;  //在此暫停

console.log('c');

---

Conditional line-of-code breakpoints

在你但願有條件地打點的時候使用 conditional line-of-code 方法。

操做： f12 -> Sources Tab -> 雙擊打開須要打點的文件 -> 找到須要打點的那行代碼 -> 右鍵行數，選擇 Add conditional breakpoint -> 在出現的對話框中輸入條件 -> 點擊 enter，出現橙色標誌，打點完成。

---

管理斷點

能夠在 BreakPoints 面板上統一管理全部的斷點。

上面的圖片顯示頁面共有兩個斷點，一個在 get-started.js 第15行，一個在第32行。

●  checkbox 選擇啓用禁用斷點

●   在條目上右鍵，能夠選擇移除當前斷點、停用當前斷點、禁用全部斷點、移除全部斷點、移除其餘斷點。

      禁用全部斷點至關於把全部 checkbox 的勾都去掉；

      停用當前斷點會讓瀏覽器忽略掉此斷點，可是斷點位置和圖標仍然保留，以便再次激活使用；

      移除斷點會直接去掉此斷點；

---

DOM change breakpoints

在文檔節點發生變化的時候暫停。

操做： f12 -> Elements Tab -> 點擊但願監測的節點 -> 右擊節點 -> 在出現的菜單上選擇 Break on -> 按須要選擇 Subtree modifications,Attribute modifications, Node removal。

dom 改變斷點類型：

●    subtree modifications ， 在當前節點的子節點發生增長、移除、內容改變、交換順序的狀況的時候生效。其餘狀況例如當前節點發生了變化，或者子節點的屬性發生了變化都不會觸發。

●    attributes modifications ， 在當前節點的屬性發生變化，例如增長屬性、移除屬性、屬性值改變 的時候觸發。

●    node removal， 在當前節點被移除的時候觸發。

---

XHR breakpoints

在你但願監聽特定的 xhr 請求的時候，使用 xhr breakpoints 。 指定特定的字符串，當有包含此字符串的 xhr url 出現時觸發，DevTools 會在 xhr.send() 方法被調用的地方暫停。

xhr breakpoints 對 fetch 請求也有效。

對於一些被封裝好了的 xhr 請求例如 JQuery 的 ajax 方法，瀏覽器沒法定位到被調用的地方。

操做： f12 -> Source Tab -> XHR Breakpoints 面板 -> 點擊 + 號 -> 在出現的對話框裏輸入指定的字符串，瀏覽器會在出現包含此字符串的 xhr 請求時暫停（不管字符串在 url 的哪一個位置） -> enter ， 完成斷點。

---

Event listener breakpoints

監測事件，在事件發生後暫停，斷點到事件綁定的位置。支持單獨的事件例如 click ， 也支持一整個類別的事件，例如全部的鼠標事件。

操做： f12 -> Source Tab -> 展開 Event Listener Breakpoints 面板，會列出全部能監聽的事件 -> 全選或展開以後單獨選事件，完成斷點。

上圖是在移動設備的手持裝置方向事件（橫豎屏轉換）上打點。

---

Exception breakpoints

在你但願捕捉到報異常的代碼的時候，使用 exception breakpoints。

操做： f12 -> Source Tab -> 點擊 Pause on exceptions 暫停圖標 -> 圖標變成藍色，代表啓用了在未捕獲到的異常出現的時候斷點的功能。

可選操做： 勾選 Pause On Caught Exceptions ， 可以在捕獲到異常的狀況下也斷點。

try{

    throw 'a exception';

}catch(e){

    console.log(e);

}

上面 try 裏面的代碼會遇到異常，可是後面的 catch 代碼可以捕獲該異常。若是是全部異常都中斷（勾選了 Pause On Caught Exceptions），那麼代碼執行到會產生異常的 throw 語句時就會自動中斷；而若是是僅遇到未捕獲異常才中斷，那麼這裏就不會中斷。通常咱們會更關心遇到未捕獲異常的狀況。

---

Function breakpoints

在你但願 debug 一個具體的函數時使用。功能與在此函數的第一行代碼出打斷點是同樣的。

操做： 在代碼裏插入 debug(functionName) 或者在瀏覽器控制檯調用。

代碼裏插入：

function sum(a,b){

    let result = a+b;  // 瀏覽器在這裏暫停

    return result;

};

debug  (sum);  // 參數是一個函數，不是字符串

sum();

控制檯調用：

控制檯輸入debug(sum)，點擊 enter，再觸發一次 sum 操做，就進入斷點頁面。

要注意確保目標函數與 debug 函數在同一個做用域裏面，不然會報 ReferenceError：