前端 debug 的奇技淫巧
爲什麼要寫這個文章呢？其實發現很多同學對一些很簡單又有效的 debug 手段都不太瞭解，找 bug 的方式都不是很高效，導致最終 bug 找不到或者走了很多彎路。
Devtools
作爲前端開發，chrome 的 devtools 一定不陌生，下面講一講 devtools 裏面 debug 的一些思路。
breakpoint
其中斷點是最最經常用到的，但很多同學都只用過默認的 breakpoint，其實還有其他兩種。
breakpoint
當代碼執行到該行代碼時暫停
conditional breakpoint
條件斷點，當表達式爲 true 時纔會暫停，下圖是當變量a === 1時才暫停。經典應用場景是當 bug 是偶現時，你需要知道入參什麼的正不正常，你可以打一個你認爲不正常的條件斷點，看看是誰調用的。PS：值得注意的是，如果你的表達式報錯，那這個斷點就會不生效，需要甄別到底是報錯引起的斷點沒進入還是真的沒進入。
logpoint
日誌斷點，當代碼執行到這裏時，會在控制檯輸出你的表達式，不會暫停代碼執行，下圖是將 a 輸出到控制檯的例子。
公衆號
Performance
當你做了一些操作，不確定到底執行了什麼代碼時，可以利用 performance 來捕獲到底什麼樣的代碼被執行了，結合你的具體情況，有時候也會找到線索，有意想不到的收穫。
是誰動了我的代碼
經典面試題，如何找到是誰阻止了冒泡，直接在控制檯輸入下面的代碼即可。經常用於尋找我綁定的事件爲什麼沒有被觸發。
var tmpStopPropagation = MouseEvent.prototype.stopPropagation;
MouseEvent.prototype.stopPropagation = function(...args) {
console.trace('stopPropagation');
tmpStopPropagation.call(this, ...args);
};下面這個例子是找到到底是誰對容器進行了滾動，比如我們遇到一些頁面跳動或者抖動的場景，尋找到底是誰滾動了容器，當然滾動還有其他方法會觸發，比如scrollIntoView，但思路都是一樣的，代理這個方法即可。
var tmpScrollTop = element.scrollTop;
Object.defineProperty(element, 'scrollTop', {
get: function() {
return tmpScrollTop;
},
set: function(newVal) {
console.trace('scrollTop');
tmpScrollTop = newVal;
}
})setTimeout
如果我們在想要打斷點的時候依賴鼠標或者鍵盤操作，如果你去 source 面板去點擊暫定，那我的現場就沒有了，那下面的代碼會幫你解決問題。
setTimeout(() => {debugger;}, 4000);還有這樣一種 case，比如我期望在我鼠標移動時看看某個變量值是多少，此時不要再傻傻的在代碼裏面添加 console.log，直接運行下面的代碼，可以實時看到你想要的變量。這個方法比較像 logpoint，不過不需要找源碼去打斷點，各有各的應用場景。
setTimeout(() => {console.log(yourInstance.getSomeValue());}, 100);SSR
當你想要 debug 某個頁面上 SSR 渲染的樣式時，可以禁用掉 js 的執行，具體操作是打開 devtools 的 source 面板，然後 cmd+p，輸入「>disable javascript」，按回車，然後刷新頁面，你的頁面就是純 SSR 狀態了。
二分法
這個是終極 debug 方法，很少會用到，但也很通俗易懂，有一定應用場景。當你發現在某個版本之後你的代碼出了問題，但又各種找不到思路，我只知道在 A 版本沒問題，B 版本就有問題了，或者代碼突然出了問題，又不知道是依賴了誰出的問題，就可以用這種方法。總的思路就是「控制變量」，你可以在代碼中批量註釋一些代碼，然後驗證問題還有沒有，如果還就的話就繼續註釋，沒有的話問題就出在被註釋的代碼裏，比較像算法中的二分法。
總結
如何 debug 還有更多的技巧，我這裏寫的也只是一部分，如果有其他更好的思路歡迎留言。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/35POxfdWUupxS9KpAOnfLQ