資訊專欄INFORMATION COLUMN
摘要：在開發中，打斷點是經常使用的調試代碼的方法，現在在這里簡略的翻譯一下官方對此功能的講解，并插入一些自己的說明。監測事件，在事件發生后暫停，斷點到事件綁定的位置。
簡單地說，斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。
在web開發中，打斷點是經常使用的調試代碼的方法，現在在這里簡略的翻譯一下官方對此功能的講解，并插入一些自己的說明。
文章翻譯自：https://developers.google.com...
何時使用何種類型的斷點：
Line-of-code： 知道在DevTools代碼里要打點的具體區域；
Conditional line-of-code： 知道在DevTools代碼里要打點的具體區域且設置條件，只有為真才執行斷點操作；
DOM： 在 body 中添加，檢測節點或其子節點的增刪和屬性變化；
XHR： 在 xhr url 包含特定內容的時候打點；
Event listener： 在觸發特定事件的時候打點；
Exception： 在拋出異常的時候打點；
Function： 在特定函數被調用的時候打點；
debugger： 在書寫的代碼里希望打點的時候手動打點；
瀏覽器會執行解析操作到打點的那行代碼之前（不包含那行代碼）。
操作： f12 -> Sources Tab -> 雙擊打開需要打點的文件 -> 找到需要打點的那行代碼 -> 在行數上單擊，出現一個藍色標記，打點完成。
在標記上再次單擊，會刪除當前斷點。
在代碼中輸入 debugger 同樣能在指定位置暫停，除了不是在 DevTools UI 里設置以外和 line-of-code breakpoints 是相等的。
console.log("a");
console.log("b");
debugger; //在此暫停
console.log("c");
在你希望有條件地打點的時候使用 conditional line-of-code 方法。
操作： f12 -> Sources Tab -> 雙擊打開需要打點的文件 -> 找到需要打點的那行代碼 -> 右鍵行數，選擇 Add conditional breakpoint -> 在出現的對話框中輸入條件 -> 點擊 enter，出現橙色標志，打點完成。
可以在 BreakPoints 面板上統一管理所有的斷點。
上面的圖片顯示頁面共有兩個斷點，一個在 get-started.js 第15行，一個在第32行。
● checkbox 選擇啟用禁用斷點
● 在條目上右鍵，可以選擇移除當前斷點、停用當前斷點、禁用所有斷點、移除所有斷點、移除其他斷點。
禁用所有斷點相當于把所有 checkbox 的勾都去掉；
停用當前斷點會讓瀏覽器忽略掉此斷點，但是斷點位置和圖標仍然保留，以便再次激活使用；
移除斷點會直接去掉此斷點；
在文檔節點發生變化的時候暫停。
操作： f12 -> Elements Tab -> 點擊希望監測的節點 -> 右擊節點 -> 在出現的菜單上選擇 Break on -> 按需要選擇 Subtree modifications,Attribute modifications, Node removal。
dom 改變斷點類型：
● subtree modifications ， 在當前節點的子節點發生增加、移除、內容改變、交換順序的情況的時候生效。其他情況例如當前節點發生了變化，或者子節點的屬性發生了變化都不會觸發。 ● attributes modifications ， 在當前節點的屬性發生變化，例如增加屬性、移除屬性、屬性值改變 的時候觸發。 ● node removal， 在當前節點被移除的時候觸發。
在你希望監聽特定的 xhr 請求的時候，使用 xhr breakpoints 。 指定特定的字符串，當有包含此字符串的 xhr url 出現時觸發，DevTools 會在 xhr.send() 方法被調用的地方暫停。
xhr breakpoints 對 fetch 請求也有效。
對于一些被封裝好了的 xhr 請求例如 JQuery 的 ajax 方法，瀏覽器無法定位到被調用的地方。
操作： f12 -> Source Tab -> XHR Breakpoints 面板 -> 點擊 + 號 -> 在出現的對話框里輸入指定的字符串，瀏覽器會在出現包含此字符串的 xhr 請求時暫停（無論字符串在 url 的哪個位置） -> enter ， 完成斷點。
監測事件，在事件發生后暫停，斷點到事件綁定的位置。支持多帶帶的事件例如 click ， 也支持一整個類別的事件，例如所有的鼠標事件。
操作： f12 -> Source Tab -> 展開 Event Listener 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 語句時就會自動中斷；而如果是僅遇到未捕獲異常才中斷，那么這里就不會中斷。一般我們會更關心遇到未捕獲異常的情況。
在你希望 debug 一個具體的函數時使用。功能與在此函數的第一行代碼出打斷點是一樣的。
操作： 在代碼里插入 debug(functionName) 或者在瀏覽器控制臺調用。
代碼里插入：
function sum(a,b){
let result = a+b; // 瀏覽器在這里暫停
return result;
};
debug (sum); // 參數是一個函數，不是字符串
sum();
控制臺調用：
控制臺輸入debug(sum)，點擊 enter，再觸發一次 sum 操作，就進入斷點頁面。
要注意確保目標函數與 debug 函數在同一個作用域里面，否則會報 ReferenceError：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54467.html
摘要：在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調試代碼是一個普遍的需求。作為前端開發工程師，以往我們開發的程序都運行在瀏覽器端，利用提供的開發者工具就可以方便的進行源碼斷點調試。這幾個都是常見的斷點調試指令。 在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調試代碼是一個普遍的需求。 作為前端開發工程師，以往我們開發的JavaScript程序都運行在瀏覽器端，...
摘要：簡單介紹自帶庫，使用調試程序還是很方便的。比如下圖就是展示斷點進入到內部之后，打印的參數，打印某個變量退出調試，直接退出調試或者使用的方式退出最后說一句上面展示的使用調試的過程其實是很簡單的，文章中主要通過截圖展示運行的效果。 簡單介紹 Python自帶 Pdb庫，使用 Pdb調試 Python程序還是很方便的。但是遠程調試、多線程，Pdb是搞不定的 本文參考的相關文章如下： 《指針...
摘要：在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。移動調試斷點斷點方法遠程映射本地調試在移動上面開發調試是很復雜的，所以就有了。 在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。 Weinre移動調試 DOM 斷點 debugger斷點 native方法hook 遠程映射本地調試 Weinre 在移動上面開...
閱讀 2092·2023-04-25 20:52
閱讀 2473·2021-09-22 15:22
閱讀 2122·2021-08-09 13:44
閱讀 1766·2019-08-30 13:55
閱讀 2804·2019-08-23 15:42
閱讀 2278·2019-08-23 14:14
閱讀 2871·2019-08-23 13:58
閱讀 3002·2019-08-23 11:49
