為什么要寫這個文章呢？其實發(fā)現(xiàn)很多同學對一些很簡單又有效的 debug 手段都不太了解，找 bug 的方式都不是很高效，導致最終 bug 找不到或者走了很多彎路。

Devtools

作為前端開發(fā)，chrome 的 devtools 一定不陌生，下面講一講 devtools 里面 debug 的一些思路。

breakpoint

其中斷點是最最經(jīng)常用到的，但很多同學都只用過默認的 breakpoint，其實還有其他兩種。

breakpoint

當代碼執(zhí)行到該行代碼時暫停

conditional breakpoint

條件斷點，當表達式為 true 時才會暫停，下圖是當變量a === 1時才暫停。經(jīng)典應用場景是當 bug 是偶現(xiàn)時，你需要知道入?yún)⑹裁吹恼徽?，你可以打一個你認為不正常的條件斷點，看看是誰調用的。PS：值得注意的是，如果你的表達式報錯，那這個斷點就會不生效，需要甄別到底是報錯引起的斷點沒進入還是真的沒進入。

logpoint

日志斷點，當代碼執(zhí)行到這里時，會在控制臺輸出你的表達式，不會暫停代碼執(zhí)行，下圖是將 a 輸出到控制臺的例子。值得注意的是，當你在調試帶有 sroucemap 的壓縮后的代碼，可能會產(chǎn)生你看到的變量名和實際運行時拿到的變量名不一樣，此時可以在右側 scope 找到你想要的真實變量名或者在 source 面板 disable 掉 js 的 sourcemap 后再打斷點。

Performance

當你做了一些操作，不確定到底執(zhí)行了什么代碼時，可以利用 performance 來捕獲到底什么樣的代碼被執(zhí)行了，結合你的具體情況，有時候也會找到線索，有意想不到的收獲。

是誰動了我的代碼

經(jīng)典面試題，如何找到是誰阻止了冒泡，直接在控制臺輸入下面的代碼即可。經(jīng)常用于尋找我綁定的事件為什么沒有被觸發(fā)。

var tmpStopPropagation = MouseEvent.prototype.stopPropagation;

MouseEvent.prototype.stopPropagation = function(...args) {
  console.trace('stopPropagation');
  tmpStopPropagation.call(this, ...args);
};

下面這個例子是找到到底是誰對容器進行了滾動，比如我們遇到一些頁面跳動或者抖動的場景，尋找到底是誰滾動了容器，當然滾動還有其他方法會觸發(fā)，比如scrollIntoView，但思路都是一樣的，代理這個方法即可。

var tmpScrollTop = element.scrollTop;

Object.defineProperty(element, 'scrollTop', {
  get: function() {
    return tmpScrollTop;
  },
  set: function(newVal) {
    console.trace('scrollTop');
    tmpScrollTop = newVal;
  }
})

setTimeout

如果我們在想要打斷點的時候依賴鼠標或者鍵盤操作，如果你去 source 面板去點擊暫定，那我的現(xiàn)場就沒有了，那下面的代碼會幫你解決問題。

setTimeout(() => {debugger;}, 4000);

還有這樣一種 case，比如我期望在我鼠標移動時看看某個變量值是多少，此時不要再傻傻的在代碼里面添加 console.log，直接運行下面的代碼，可以實時看到你想要的變量。這個方法比較像logpoint，不過不需要找源碼去打斷點，各有各的應用場景。

setTimeout(() => {console.log(yourInstance.getSomeValue());}, 100);

SSR

當你想要 debug 某個頁面上 SSR 渲染的樣式時，可以禁用掉 js 的執(zhí)行，具體操作是打開 devtools 的 source 面板，然后 cmd+p，輸入「>disable javascript」，按回車，然后刷新頁面，你的頁面就是純 SSR 狀態(tài)了。

二分法

這個是終極 debug 方法，很少會用到，但也很通俗易懂，有一定應用場景。當你發(fā)現(xiàn)在某個版本之后你的代碼出了問題，但又各種找不到思路，我只知道在 A 版本沒問題，B 版本就有問題了，或者代碼突然出了問題，又不知道是依賴了誰出的問題，就可以用這種方法。總的思路就是「控制變量」，你可以在代碼中批量注釋一些代碼，然后驗證問題還有沒有，如果還就的話就繼續(xù)注釋，沒有的話問題就出在被注釋的代碼里，比較像算法中的二分法。

總結

如何 debug 還有更多的技巧，我這里寫的也只是一部分，如果有其他更好的思路歡迎留言。

點個『在看』支持下