[譯] 前端調試技巧與訣竅

• 原文地址：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日

更多調試相關的資源

Jon Kuperman 製做了一個 「前端能手課程」，這個課程將會經過這個 app 來幫助你掌握開發者工具的使用。

code school 的一個小課程：發現開發者工具。

Umar Hansa 的一個新的在線課程： 現代開發者工具。

Julia Evans 寫了一篇很不錯的 關於調試的文章，在此向 Jamison Dance 致謝，感謝他讓我看到這麼好的文章。

Paul Irish 總結了一些 使用開發者工具進行性能檢查的高級技巧。若是你和我同樣是個書呆子，能夠把它收藏起來深刻研究。

在文章的最後，我將放上一個讓人喜憂參半的資源。個人朋友 James Golick 是一位傑出的程序員，在多年之前作過一個關於 degub 的會議講話。雖然 James 去世了，可是咱們仍然能在這個視頻中回憶他、向他學習。點擊觀看視頻)

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。