[譯] 前端除錯技巧與訣竅

lsvih發表於2017-04-27

原文地址：Debugging Tips and Tricks

原文作者：SARAH DRASNER

譯文出自：掘金翻譯計劃

譯者：lsvih

校對者：loveky,ymz1124

前端除錯技巧與訣竅

編寫程式碼其實只是開發者的一小部分工作。為了讓工作更有效率，我們還必須精通 debug。我發現，花一些時間學習新的除錯技巧，往往能讓我能更快地完成工作，對我的團隊做出更大的貢獻。關於除錯這方面我有一些自己重度依賴的技巧與訣竅，同時我在 workshop 中經常建議大家使用這些技巧，因此我對它們進行了一個彙總（其中有一些來自於社群）。我們將從一些核心概念開始講解，然後深入探討一些具體的例子。

主要概念

隔離問題

隔離問題大概是 debug 中最重要的核心概念。我們的程式碼庫是由不同的類庫、框架組成的，它們有著許多的貢獻者，甚至還有一些不再參與專案的人，因此我們的程式碼庫是雜亂無章的。隔離問題可以幫助我們逐步剝離與問題無關的部分以便我們可以把注意力放在解決方案上。

隔離問題的好處包括但不限於以下幾條：

能夠弄清楚問題的根本原因是否是我們想的那樣，還是存在其它的衝突。
對於時序任務，能判斷是否存在時序紊亂。
嚴格審查我們的程式碼是否還能夠更加精簡，這樣既能幫助我們寫程式碼也能幫助我們維護程式碼。
解開糾纏在一起的程式碼，以觀察到底是隻有一個問題還是存在更多的問題。

讓問題能夠被重現是很重要的。如果你不能重現問題來分辨出它到底出在哪裡，你將會很難修復這個問題。或者你也可以將它和類似的正常工作的模組進行對比，這樣你就可以發現哪裡進行過改動，或者發現兩者之間有什麼不同。

在實際操作中，我有許多種方法對問題進行隔離。其中一種是在本地建立一個精簡的測試用例，當然你也可以在 CodePen 建立一個私人測試用例，或者在 JSBin 建立你的用例。另一種是在程式碼中建立斷點，這樣可以讓我詳細地觀察程式碼的執行情況。以下是幾種定義斷點的方式：

你可以在你程式碼中寫上 debugger;，這樣你可以看到當時這一小塊程式碼做了什麼。

你還可以在 Chrome 開發者工具中進一步進行除錯，單步跟蹤事件的發生。你也可以用它選擇性地觀察指定的事件監聽器。

古老，好用的 console.log 是另一種隔離的方法。（PHP 中是 echo，python 中是 print ……）。你可以一小片一小片地執行程式碼並對你的假設進行測試，或者檢檢視有什麼東西發生了變化。這可能是最耗費時間的測試方式了。但是無論你的水平如何高，你還是得乖乖用它。ES6 的箭頭函式也可以加速我們的 debug 遊戲，它讓我們可以在控制檯中更方便地寫單行程式碼。

console.table 函式也是我最喜歡的工具之一。當你有大量的資料（例如很長的陣列、巨大的物件等等）需要展示的時候，它特別有用。console.dir 函式也是個不錯的選擇。它可以把一個物件的屬性以可互動的形式展示出來。

上圖為 console.dir 輸出的可互動的列表

保持條理清晰

當我在 workshop 上做講師，幫助我的班級的學生時，我發現，思路不夠清晰是阻礙他們除錯的一大問題。這實際上是一種龜兔賽跑的情形。他們想要行動的更快，因此他們會在寫程式碼時一次就改寫很多的程式碼——然後出了某些問題，他們不知道到底是改的那部分導致了問題的出現。接著，為了 debug，他們又一次改很多程式碼，最後迷失在尋找哪裡能正常執行、哪裡不能正常執行中。

其實我們或多或少都在這麼做。當我們對一個工具越來越熟練時，我們會在沒有對設想的情況進行測試的情況下寫越來越多的程式碼。但是當你剛開始用一個語法或技術時，你需要放慢速度並且非常謹慎。你將能越來越快地處理自己無意間造成的錯誤。其實，當你弄出了一個問題的時候，一次除錯一個問題可能會看起來慢一些，但其實要找出哪裡發生了變化以及問題的所在是沒法快速解決的。我說以上這些話是想告訴你：欲速則不達。

你還記得小時候父母告訴你的話嗎？“如果你迷路了，待在原地別動。“ 至少我的父母這麼說了。這麼說的原因是如果他們在到處找我，而我也在到處跑著找他們的話，我們將更難碰到一起。程式碼也是這樣的。你每次動的程式碼越少就越好，你返回一致的結果越多，就越容易找到問題所在。所以當你在除錯時，請儘量不要安裝任何東西或者新增新的依賴。如果本應該返回一個靜態結果的地方每次都出現不同的錯誤，你就得特別注意了！

選用優秀的工具

人們開發了無數的工具用於解決各種各樣的問題。下面，我會依次介紹一些我覺得最有用的工具，並在最後貼上相關資源的連結。

程式碼高亮

當然，為你的程式碼高亮主題找一個最熱辣的配色與風格方案是很有趣的，但是請花點時間想清楚這件事。我通常使用深色主題，當有語法錯誤時，深色主題會用較亮的顏色顯示我的程式碼，使我能輕鬆快速地找到錯誤。我也嘗試過使用 Oceanic Next 配色方案與 Panda 配色方案，但是說實話我還是最喜歡自己的那種。在尋找優秀的程式碼高亮工具的時候請保持理智，帥氣的外觀當然很棒，但是為你揪出錯誤的功能性更加重要。當然，你完全有可能找到兩者都很優秀的程式碼高亮工具。

使用 Lint 工具

使用 Lint 工具能夠幫助我們標記出來一些可疑的程式碼，並且能報出我們忽視的一些錯誤。Lint 工具相當的重要，使用何種 lint 工具取決於你使用的語言與框架，以及最重要的：你認可怎樣的程式碼風格。

不同的公司有著不同的程式碼風格及規定。我個人比較喜歡 AirBnB 的 JS 程式碼規範。你的 Lint 工具將會強制你按照指定的模式進行程式設計，否則它可以終止你的構建過程。我曾經使用過一個 CSS Lint 工具，當我為瀏覽器寫 css hack 時，它一直在報錯。最後我不得不常常關閉它，它也就沒能起到應有的作用。但是一個好的 Lint 工具可以把你忽視的一些潛在的問題指出來。

下面是幾個資源：

我最近找到了一個響應式圖片 lint 工具，它可以告訴你使用 picture 元素、srcset 屬性以及 size 屬性的時機。
這兒有個很好的分類，收集與對比了一些 JS lint 工具。

瀏覽器外掛

外掛是真的超級棒，你可以輕鬆地啟用或禁用它們。並且它們能在特定需求中發揮重要的作用。如果你使用一些特定的框架或類庫工作，使用它們的開發者工具外掛將會帶給你無與倫比的便利。不過請注意，外掛不僅會降低瀏覽器的速度，它們也有許可權執行指令碼。因此在你使用之前，請先了解一下外掛的作者、評價及背景。總之，下面是一些我最喜歡的外掛：

Deque Systems 提供的 aXe，是一款優秀的可行性分析外掛。
如果你工作中使用 React，React DevTools 是你必不可少的工具，你可以通過它觀察虛擬 DOM。
Vue DevTools，當你使用 Vue 時，同上。
Codopen：它會會從編輯器模式彈出 CodePen 的除錯視窗。八卦：我老公因為不喜歡看到我一直手動開啟除錯視窗，所以特意開發了這個工具。（真是個好禮物）
Pageruler：它能得到頁面中的畫素尺寸以及任何需要測量的值。我喜歡這個工具，因為我對於我的佈局變態般挑剔。它能幫助我解決這些問題。

開發者工具

這可能是最直觀的除錯工具了，你可以用它們辦到許多事情。它們有著許多內建的特性容易被人所忽視，因此在這個章節中，我們會深入探討一些我喜歡的特性。

關於學習開發者工具的功能，Umar Hansa 有一套特別好的資料。他製作了一個每週週報與 GIF 動圖網站、製作了我們最後一節提到的一個新課程，並在我們網站發表了這篇文章。

我最近特別喜歡的一個工具是CSS Tracker 增強外掛，收到 Umar 的許可之後我將這個工具在這兒展示給大家看。它會顯示出所有沒有使用過的 CSS，你可以由此來理解 CSS 對於效能的影響。

上圖展示了 CSS tracker 為程式碼被使用的部分和未被使用的部分按照規則表上不同的顏色。

各色各樣的工具

What input 是一個能跟蹤當前輸入（滑鼠、鍵盤、觸控）與當前資訊的實用工具。（感謝 Marcy Sutton 提供了這個便捷的工具）
如果你做的是響應式開發，或者你得在無數種裝置上進行檢查，那麼 Ghostlabapp 是個挺適合你的時髦工具。它為你提供了同步移動 web 開發、測試與檢查。
Eruda 是個很棒的工具，它可以幫助我們在移動裝置上進行除錯。我很喜歡它，因為它不僅是一個模擬器，還為你準備了控制檯和真實的開發者工具，讓你更容易理解。

特別提示

我一直對其他人是怎麼 debug 的很感興趣，所以我通過 CSS-Tricks 與我的個人賬號在社群徵集大家最喜歡的除錯方式。以下是社群中大家給出的技巧的合集。

譯註：以下如“@xxx -2017年3月15日”格式的文字均為使用者在推特上的發言，點選日期可以看到原推特。

輔助方法

$('body').on('focusin',function(){
  console.log(document.activeElement);});複製程式碼

這段程式碼會記錄當前焦點所在的元素。它用起來很方便，因為當你開啟開發者工具的時候會將 activeElement 的焦點移除。

-Marcy Sutton

除錯 CSS

我們收到很多回復說一些人喜歡在元素外面加上紅色的邊框（border），以此來觀察元素的行為。

@sarah_edo：對於 CSS，我通常會給有問題的元素加上一個 .debug 的 class，這個 class 定義了紅色的 border。

— Jeremy Wagner (@malchata) 2017年3月15日

我也會這麼做。而且我還做了一個簡單的 CSS 檔案，可以讓我方便地用一些 class 來加上不同的顏色。

檢測 React 的 State

@sarah_edo：
{JSON.stringify(this.state, null, 2)}
— MICHAEL JACKSON (@mjackson) 2017年3月15日

Michael 提到的這個辦法，是我認為最有用的 debug 工具之一。這點程式碼可以“美觀地輸出”你當前正在使用的元件的 state，因此你可以瞭解此時此刻這個元件將會如何變化。你可以確認這個 state 是否和你設想的一樣正常工作，它可以幫助你跟蹤任何 state 中的錯誤，以及你使用 state 出現的錯誤。

動畫

我們收到了許多的回覆，說他們會在除錯時減慢動畫速度：

@sarah_edo @Real_CSS_Tricks： * { animation-duration: 10s !important; }

— Thomas Fuchs (@thomasfuchs) 2017年3月15日

我在之前的文章《除錯 CSS 關鍵幀動畫》中提到過這個問題，那篇文章裡還有更多的技巧，例如如何使用硬體加速、如何在不同時刻進行多種變換等。

我也會使用 JavaScript 將我的動畫減速。在 GreenSock 中，以這種形式實現：timeline.timeScale(0.5)，它將會將整個時間軸都減速，而不是僅僅將一個動畫減速，這個功能超級有用。在 mo.js 中，這個功能是這麼寫的：{speed: 0.5}。

譯註：GreenSock 與 mo.js 都是功能強大的js動畫庫

Val Head 通過螢幕錄影做了一個很好的視訊，這個視訊展示了 Chrome 與 Firefox 開發者工具中提供的動畫除錯功能。

如果你打算用 Chrome 開發者工具的時間軸來進行效能評估，那麼請注意繪製（paint）是最耗效能的步驟，因此當時間軸中綠色佔比很高的時候請當心。

檢查不同連線狀態下的載入情況

我往往在網速很快的條件中工作，所以我會限制我的網速來觀察那些網速較慢的人們所體驗到的效能。

這是個很有用的功能。它可以與強制重新整理、清除快取結合起來使用。

@sarah_edo：這兒有個不是祕密的小技巧，但是很多人還不知道：開啟開發者工具，然後在重新整理按鈕上右擊。pic.twitter.com/FdAfF9Xtxm

— David Corbacho (@dcorbacho) 2017年3月15日

設定定時 Debugger

這一條是 Chris 提供的。對於這點我們寫了一篇詳細的文章。

setTimeout(function() {
  debugger;
}, 3000);複製程式碼

它與我之前提到的 debugger; 工具很類似，不過你可以把它放在 setTimeout 函式中，得到更多詳細的資訊。

模擬器

@Real_CSS_Tricks 有的 Mac 使用者可能還不知道，用 iOS 模擬器加上 Safari 簡直不要太方便！ pic.twitter.com/Uz4XO3e6uD

— Chris Coyier (@chriscoyier) 2017年3月15日

我前面提到了使用 Eruda 模擬器。iOS 使用者還有一種很好的模擬器可以使用。在過去，我會告訴你你得先安裝 XCode，但是這條推特提供了一種不同的方法：

@chriscoyier @Real_CSS_Tricks 如果你不想裝 XCode，你也可以通過這種方式來使用模擬器：t.co/WtAnZNo718

— Chris Harrison (@cdharrison) 2017年3月15日

Chrome 也有切換裝置型號功能，很實用。

遠端除錯

@chriscoyier @Real_CSS_Tricks：jsconsole 是個很棒的工具。

— Gilles ?⚽ (@gfra54) 2017年3月15日

在看到他發的這條推特前，我還真不知道有這麼一個好用的工具！

譯註，jsconsole 官網現在因為未知原因打不開了，也可以用 Weinre 和 Ghostlab 等工具進行移動遠端除錯。

除錯 CSS 網格佈局

Rachel Andrew 也送給我們一個很好的方法。當你使用 Firefox 時，點選一個圖示，網格的間隔將會被高亮。她的視訊詳細地解釋了這個技巧。

上圖為 Rachel Andrew 展示瞭如何在 Firefox 開發者工具中將網格的間距高亮。

陣列除錯

Wes Bos 提供了一個在資料中搜尋元素的一個很有用的技巧：

你可以用 array.find 來查詢元素? t.co/AuRtyFwnq7

— Wes Bos (@wesbos) 2017年3月15日