前端 debug 的奇淫技巧

爲何要寫這個文章呢？其實發現不少同窗對一些很簡單又有效的 debug 手段都不太瞭解，找 bug 的方式都不是很高效，致使最終 bug 找不到或者走了不少彎路。

Devtools

做爲前端開發，chrome 的 devtools 必定不陌生，下面講一講 devtools 裏面 debug 的一些思路。

breakpoint

其中斷點是最最常常用到的，但不少同窗都只用過默認的 breakpoint，其實還有其餘兩種。

breakpoint

當代碼執行到該行代碼時暫停

conditional breakpoint

條件斷點，當表達式爲 true 時纔會暫停，下圖是當變量a === 1時才暫停。經典應用場景是當 bug 是偶現時，你須要知道入參什麼的正不正常，你能夠打一個你認爲不正常的條件斷點，看看是誰調用的。PS：值得注意的是，若是你的表達式報錯，那這個斷點就會不生效，須要甄別究竟是報錯引發的斷點沒進入仍是真的沒進入。

logpoint

日誌斷點，當代碼執行到這裏時，會在控制檯輸出你的表達式，不會暫停代碼執行，下圖是將 a 輸出到控制檯的例子。 值得注意的是，當你在調試帶有 sroucemap 的壓縮後的代碼，可能會產生你看到的變量名和實際運行時拿到的變量名不同，此時能夠在右側 scope 找到你想要的真實變量名或者在 source 面板 disable 掉 js 的 sourcemap 後再打斷點。

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 還有更多的技巧，我這裏寫的也只是一部分，若是有其餘更好的思路歡迎留言。

歡迎關注「 字節前端 ByteFE 」

簡歷投遞聯繫郵箱「tech@bytedance.com」