簡(jiǎn)單地說(shuō)，斷點(diǎn)調(diào)試是指自己在程序的某一行設(shè)置一個(gè)斷點(diǎn)，調(diào)試時(shí)，程序運(yùn)行到這一行就會(huì)停住，然后你可以一步一步往下調(diào)試，調(diào)試過(guò)程中可以看各個(gè)變量當(dāng)前的值，出錯(cuò)的話，調(diào)試到出錯(cuò)的代碼行即顯示錯(cuò)誤，停下。

在web開發(fā)中，打斷點(diǎn)是經(jīng)常使用的調(diào)試代碼的方法，現(xiàn)在在這里簡(jiǎn)略的翻譯一下官方對(duì)此功能的講解，并插入一些自己的說(shuō)明。

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

何時(shí)使用何種類型的斷點(diǎn)：

Line-of-code： 知道在DevTools代碼里要打點(diǎn)的具體區(qū)域；

Conditional line-of-code： 知道在DevTools代碼里要打點(diǎn)的具體區(qū)域且設(shè)置條件，只有為真才執(zhí)行斷點(diǎn)操作；

DOM： 在 body 中添加，檢測(cè)節(jié)點(diǎn)或其子節(jié)點(diǎn)的增刪和屬性變化；

XHR： 在 xhr url 包含特定內(nèi)容的時(shí)候打點(diǎn)；

Event listener： 在觸發(fā)特定事件的時(shí)候打點(diǎn)；

Exception： 在拋出異常的時(shí)候打點(diǎn)；

Function： 在特定函數(shù)被調(diào)用的時(shí)候打點(diǎn)；

debugger： 在書寫的代碼里希望打點(diǎn)的時(shí)候手動(dòng)打點(diǎn)；

---

斷點(diǎn)方法

Line-of-code breakpoints

瀏覽器會(huì)執(zhí)行解析操作到打點(diǎn)的那行代碼之前（不包含那行代碼）。

操作： f12 -> Sources Tab -> 雙擊打開需要打點(diǎn)的文件 -> 找到需要打點(diǎn)的那行代碼 -> 在行數(shù)上單擊，出現(xiàn)一個(gè)藍(lán)色標(biāo)記，打點(diǎn)完成。

在標(biāo)記上再次單擊，會(huì)刪除當(dāng)前斷點(diǎn)。

在代碼中輸入 debugger 同樣能在指定位置暫停，除了不是在 DevTools UI 里設(shè)置以外和 line-of-code breakpoints 是相等的。

console.log('a');console.log('b');debugger; //在此暫停console.log('c');

---

Conditional line-of-code breakpoints

在你希望有條件地打點(diǎn)的時(shí)候使用 conditional line-of-code 方法。

操作： f12 -> Sources Tab -> 雙擊打開需要打點(diǎn)的文件 -> 找到需要打點(diǎn)的那行代碼 -> 右鍵行數(shù)，選擇 Add conditional breakpoint -> 在出現(xiàn)的對(duì)話框中輸入條件 -> 點(diǎn)擊 enter，出現(xiàn)橙色標(biāo)志，打點(diǎn)完成。

---

管理斷點(diǎn)

可以在 BreakPoints 面板上統(tǒng)一管理所有的斷點(diǎn)。

上面的圖片顯示頁(yè)面共有兩個(gè)斷點(diǎn)，一個(gè)在 get-started.js 第15行，一個(gè)在第32行。

● checkbox 選擇啟用禁用斷點(diǎn)● 在條目上右鍵，可以選擇移除當(dāng)前斷點(diǎn)、停用當(dāng)前斷點(diǎn)、禁用所有斷點(diǎn)、移除所有斷點(diǎn)、移除其他斷點(diǎn)。禁用所有斷點(diǎn)相當(dāng)于把所有 checkbox 的勾都去掉；停用當(dāng)前斷點(diǎn)會(huì)讓瀏覽器忽略掉此斷點(diǎn)，但是斷點(diǎn)位置和圖標(biāo)仍然保留，以便再次激活使用；移除斷點(diǎn)會(huì)直接去掉此斷點(diǎn)；

---

DOM change breakpoints

在文檔節(jié)點(diǎn)發(fā)生變化的時(shí)候暫停。

操作： f12 -> Elements Tab -> 點(diǎn)擊希望監(jiān)測(cè)的節(jié)點(diǎn) -> 右擊節(jié)點(diǎn) -> 在出現(xiàn)的菜單上選擇 Break on -> 按需要選擇 Subtree modifications,Attribute modifications, Node removal。

dom 改變斷點(diǎn)類型：

● subtree modifications ， 在當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)發(fā)生增加、移除、內(nèi)容改變、交換順序的情況的時(shí)候生效。其他情況例如當(dāng)前節(jié)點(diǎn)發(fā)生了變化，或者子節(jié)點(diǎn)的屬性發(fā)生了變化都不會(huì)觸發(fā)。● attributes modifications ， 在當(dāng)前節(jié)點(diǎn)的屬性發(fā)生變化，例如增加屬性、移除屬性、屬性值改變 的時(shí)候觸發(fā)。● node removal， 在當(dāng)前節(jié)點(diǎn)被移除的時(shí)候觸發(fā)。

---

XHR breakpoints

在你希望監(jiān)聽特定的 xhr 請(qǐng)求的時(shí)候，使用 xhr breakpoints 。 指定特定的字符串，當(dāng)有包含此字符串的 xhr url 出現(xiàn)時(shí)觸發(fā)，DevTools 會(huì)在 xhr.send() 方法被調(diào)用的地方暫停。

xhr breakpoints 對(duì) fetch 請(qǐng)求也有效。

對(duì)于一些被封裝好了的 xhr 請(qǐng)求例如 JQuery 的 ajax 方法，瀏覽器無(wú)法定位到被調(diào)用的地方。

操作： f12 -> Source Tab -> XHR Breakpoints 面板 -> 點(diǎn)擊 + 號(hào) -> 在出現(xiàn)的對(duì)話框里輸入指定的字符串，瀏覽器會(huì)在出現(xiàn)包含此字符串的 xhr 請(qǐng)求時(shí)暫停（無(wú)論字符串在 url 的哪個(gè)位置） -> enter ， 完成斷點(diǎn)。

---

Event listener breakpoints

監(jiān)測(cè)事件，在事件發(fā)生后暫停，斷點(diǎn)到事件綁定的位置。支持單獨(dú)的事件例如 click ， 也支持一整個(gè)類別的事件，例如所有的鼠標(biāo)事件。

操作： f12 -> Source Tab -> 展開 Event Listener Breakpoints 面板，會(huì)列出所有能監(jiān)聽的事件 -> 全選或展開之后單獨(dú)選事件，完成斷點(diǎn)。

上圖是在移動(dòng)設(shè)備的手持裝置方向事件（橫豎屏轉(zhuǎn)換）上打點(diǎn)。

---

Exception breakpoints

在你希望捕捉到報(bào)異常的代碼的時(shí)候，使用 exception breakpoints。

操作： f12 -> Source Tab -> 點(diǎn)擊 Pause on exceptions 暫停圖標(biāo) -> 圖標(biāo)變成藍(lán)色，表明啟用了在未捕獲到的異常出現(xiàn)的時(shí)候斷點(diǎn)的功能。

可選操作： 勾選 Pause On Caught Exceptions ， 能夠在捕獲到異常的情況下也斷點(diǎn)。

try{throw 'a exception';}catch(e){console.log(e);}

上面 try 里面的代碼會(huì)遇到異常，但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷（勾選了 Pause On Caught Exceptions），那么代碼執(zhí)行到會(huì)產(chǎn)生異常的 throw 語(yǔ)句時(shí)就會(huì)自動(dòng)中斷；而如果是僅遇到未捕獲異常才中斷，那么這里就不會(huì)中斷。一般我們會(huì)更關(guān)心遇到未捕獲異常的情況。

---

Function breakpoints

在你希望 debug 一個(gè)具體的函數(shù)時(shí)使用。功能與在此函數(shù)的第一行代碼出打斷點(diǎn)是一樣的。

操作： 在代碼里插入 debug(functionName) 或者在瀏覽器控制臺(tái)調(diào)用。

代碼里插入：

function sum(a,b){let result = a+b; // 瀏覽器在這里暫停return result;};debug (sum); // 參數(shù)是一個(gè)函數(shù)，不是字符串sum();

控制臺(tái)調(diào)用：

控制臺(tái)輸入debug(sum)，點(diǎn)擊 enter，再觸發(fā)一次 sum 操作，就進(jìn)入斷點(diǎn)頁(yè)面。

要注意確保目標(biāo)函數(shù)與 debug 函數(shù)在同一個(gè)作用域里面，否則會(huì)報(bào) ReferenceError：

總結(jié)

以上是生活随笔為你收集整理的使用断点调试代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。