我們有時候會不知道斷點打在什么地方，比如想知道dom什么時候被修改的，網路請求在哪里 ，什么情況才斷點，類似情況有很多，需要對應使用不同的打斷點方式才可以提高效率,本文演示已VSCode Debugger為主，其實跟chrome是大同小異，不過更加直觀方便，可以參考該文章
【前端除錯】- 更好的除錯方式 VSCode Debugger
1.條件斷點
有的時候我們只想在滿足一定條件的時候才斷住，這時候就可以用條件斷點：
在代碼左邊打斷點的地方右鍵單擊，就可以選擇條件斷點：
添加運算式，比如：
當滿足該條件時 代碼會執行到這里停止，其余情況則正常運行，
2.LogPoint
我們總是習慣想看某個值的時候，用console.log.雖然這是最簡單直接的，不需要斷住代碼，但是會在代碼中留下console.log,可以采用更優雅的方式
輸入后點擊回車鍵確定
3.例外斷點
代碼拋了例外，你想知道在哪拋的，這時候就可以用例外斷點，它可以在沒有被處理的錯誤或者 Promise 的 reject 處斷住，
上面那個 Caught Exception 是在被 catch 處理的例外出斷住，
Uncaught Exceptions 更常用一些，
4.DOM 斷點
有時候我們想知道DOM是在什么時候移除或者修改的，setState以后原始碼內部做了什么操作，我們不知道代碼在什么地方，可以直接在瀏覽器控制臺，選擇對應的情況，再次重繪頁面操作后，代碼會在對應的地方斷住，我們看呼叫堆疊就可以看到相應執行程序
也可以快速找到setState的地方
5.Event Listener 斷點
之前我們想除錯事件發生之后的處理邏輯，需要找到事件監聽器，然后打個斷點，
但如果你不知道哪里處理的這個事件呢？
這時候就可以用事件斷點了：
打開 sources 面板，就可以找到事件斷點，有各種型別的事件：
比如你不知道點擊登錄對應的事件處理函式的話，點擊以后代碼就會在事件處理器斷住，因為 React 是合成事件，也就是事件系結在某個元素上自己做的分發，所以這里是在原始碼處理事件的地方斷住的，用 Vue 就可以直接在事件處理函式處斷住，
6.url 請求斷點
當你想在某個請求發送的時候斷住，但你不知道在哪里發的，這時候就可以用 url 請求斷點
比如這樣一段代碼，你想在發送 url 包含 login 的請求的時候斷住，就可以使用 url 請求斷點：
呼叫堆疊也清晰的記錄了整個發起請求的程序，對于分析網路請求是非常有用的
總結
很多時候我們想打斷點卻不知道應該打在哪里，這時候就要用其他的斷點型別了：
- 例外斷點：在拋例外處斷住
- 條件斷點：在滿足某個運算式的時候斷住
- 日志點：列印日志但不斷住，覺得斷住太多次的時候可以用這個
- DOM 斷點：在 DOM 子樹修改、屬性修改、節點洗掉的時候斷住
- Event Listenter 斷點：在某個事件發生的時候斷住
- url 請求斷點：在發送 url 包含某內容的請求時斷住
加上普通斷點，一共 7 種，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541221.html
標籤：其他
下一篇：JavaScript 自執行函式防止沖突全域作用域變數 - 在線客服原始碼實作彈窗效果JavaScript SDK