你應該知道的Debug技巧

前言

大家平時多注意喝水，多運動，一體檢完各種毛病。今日早讀文章由@池盛星翻譯分享。

正文從這開始～

敲代碼只是作為開發人員的一小部分工作而已. 為了使我們的工作變得高效, 我們還必須擅長各種姿勢的調試. 每當我花費一些時間來學習新的調試技能後, 總能發現自己效率更高, 並且能為所在的團隊帶來更多的價值. 所以, 這裡匯總了一些, 還有一些來自社區. 我們將從一些核心的原則開始, 然後深入更具體的例子 .

Main Concepts 主要概念

Isolate the Problem 隔離問題

隔離(Isolation)可能是所有調試中最強大的核心原則. 我們的代碼庫可以擴展, 具有不同的庫, 框架, 並且可以包含許多貢獻者, 其中, 可能有許多貢獻者已經不再在這個項目上工作了. 隔離問題有助於我們慢慢的消除問題的非必要部分, 以便於我們能夠專註於一個解決方案.

隔離的好處包括但不限於:

弄清楚它是否真的是我們認為的或某種衝突的根本原因

對於基於時間的任務, 了解是否存在競爭條件(race condition)

仔細看看我們的代碼是否還有優化的空間, 這可以幫我們編寫和維護代碼

解決它, 並看看是否只有這個問題還是會有其它存在的問題

問題是否可重現是非常重要的. 如果不能重現這個問題的確切的產生方式, 解決它將會變得異常困難. 這也允許您將其與類似的工作模型進行比較, 以便您可以看到兩者之間有什麼變化或不同之處.

在實踐中, 我有很多不同的隔離方法. 其中一個就是在本地實例或者私有的CodePen或JSBin上創建一個簡化的測試用例. 另一個是在代碼中創建斷點, 以便我可以看到它一步一步的執行. 以下是一些定義斷點的方法:

您可以在你的代碼中內嵌一行: debugger; 這樣您就能看到代碼運行時, 如何觸發這行代碼.

您可以在Chrome DevTools中進一步了解, 甚至可以瀏覽下一個觸發的事件或選擇特定的事件偵聽器:

好了, console.log是一種很常見的隔離方式. (PHP中的echo, python中的print等等). 您正在採取一個小小的執行(execution)並測試您的假設, 或檢查是否有些改變. 這可能是最經得起時間考驗的調試方式之一, 無論您已經變得如何高效, 它仍有它的用途. ES6中的箭頭函數也已經允許我們加強我們的控制台調試規則, 因為現在在控制台中編寫有用的one-liners(單行函數)變得簡單了許多.

console.table也是我最喜愛的工具, 尤其適合當您有大量數據要呈現, 如大數組, 大對等類似的情況. console.dir函數也是一個不錯的選擇, 它將記錄對象屬性的互動式列表 .

Be Methodical 條理清晰

當我在課堂上教授並且幫助學生們的時候, 我發現他們嘗試去調試一個問題的時候, 使他們退縮的最多的原因是條理不夠清晰. 這是一種真正的"烏龜和野兔"試的情況. 他們想要快速解決問題的心是可以理解的, 所以一次性修改了一大堆東西, 然後, 當某些東西產生了新的問題, 他們就不知道是他們改動的什麼東西產生了新的問題. 然後, 為了調試, 他們會立即改變許多事情, 試圖找出什麼是正常的, 什麼是錯誤的. 在這個過程中, 會感到很失落.

在一定程度上, 我們都是這樣的做的. 隨著我們對工具越來越精通, 我么可以一次性寫越來越多的代碼, 而無需測試一個假設. 但是, 如果你是一個新手, 對語法不是很熟練, 對技術也不是很精通的情況下, 你應該放慢速度, 並且小心謹慎. 這樣做, 您可以更好的, 更早的找出您無意中給自己挖的坑. 事實上, 一旦你發現了一個問題, 一次解決一個問題看似可能會慢一點, 但是暴露出發生了什麼變化, 以及出現錯誤的方式, 這些似乎更快的步伐是不允許的.

您還記得當您還是個孩子的時候, 您的父母對您說: "如果你迷路了, 就待在那別動?" 至少我的父母是這麼跟我說的. 這是因為, 如果他們正在四處尋找我, 而我也在四處尋找他們, 我們就會有更少的機會撞見. 調試的原理也一樣. 發現問題是, 越少改動代碼越好. 返回連貫的結果越多, 跟蹤錯誤就越容易. 所以在調試時, 盡量不要安裝任何東西, 或者引入新的依賴. 如果您發現每次應該返回一個靜態結果的時候卻返回不同的錯誤, 那是一個危險信號, 您應該馬上提高警惕, 並且全力解決它.

Choose Good Tools 選擇好的工具

有成千上萬種工具來解決各種各樣的問題. 我正嘗試其中的大部分, 發現了一些最有用的工具, 然後把它們的鏈接(資源)放出來.

Syntax Highlighting 語法高亮

當然, 為您的語法高亮主題選擇顏色和口味是十分有趣的, 但這得花費您的一些時間來把問題考慮清楚. 我通常喜歡選擇暗色調的主題, 其中一個跳過語法(skip in syntax會使我的所有代碼顏色變淺, 這樣, 很容易就能馬上找到錯誤了. 我傾向於使用Oceanic Next或者Panda, 但是, 說真的, 這完全取決於每個人的喜好. 重要的是, 不要忘了我們的初衷, 當尋找一款很好的語法高亮, 看起來很棒的主題時, 能快速發現你的錯誤才是最重要的, 並且, 這兩者完全可以兼顧.

Linting Lint檢查

Linting幫助標記可疑代碼, 並提出我們可能忽略的錯誤. Linting是非常重要的, 但選擇哪一款, 跟您正在使用的語言, 框架有很大的關係, 當然, 最重要的還是您喜歡的代碼風格.

不同的公司都有不同的代碼風格和所要遵循的規則. 就個人而言, 我喜歡AirBnB的, 但要小心, 並且不要只使用舊的linter. 您的linter會強制執行代碼檢查, 如果這不是您自己的本意, 它可能會阻礙您的構建過程. 我有一個CSS linter, 每當我寫一些瀏覽器hack的時候, 它總是會報錯, 最終不得不經常規避它, 這就不是一個有用的linter. 當然, 一個好的linter可以照亮您可能錯過的潛在的小錯誤.

這裡有一些資源:

我最近發現這個響應式圖片linter, 告訴您可能使用圖片, srcset或大小的幾率.

這是一個很好的JS linters的breakdown.

Browser Extensions 瀏覽器擴展

瀏覽器擴展真的很棒, 因為我們可以如此輕鬆自如的啟用和停用它們, 並且它們能真正的適用於非常具體的需求. 如果您正在使用特定的庫或框架, 您就有機會啟用它們為DevTools所開發的擴展, 提供更清晰詳細的信息. 如果沒有擴展, 是做不到的. 請注意, 擴展不僅僅會使瀏覽器變慢, 它們還有許可權去執行腳本, 所以在真正使用某個擴展之前, 請做些功課來了解擴展的作者, 評級以及背景. 說來這麼多, 以下是一些我最喜歡的擴展:

來自Dequeue Systems的輔助功能擴展

在我看了, React DevTools真的很重要, 如果您正在使用React, 查看它們的虛擬Dom

Vue DevTools, 如上所述.

CodePen: 將您從編輯器模式彈出到CodePen的調試窗口中.

Pageruler: 獲取像素尺寸, 並測量頁面上的任何內容. 我喜歡這個, 因為我對於我的布局來說就是超級笨蛋, 這有助於治服我心中的野獸.

DevTools

這可能是最著名的調試工具了, 並且您可以用它做很多事情. 他們擁有如此之多的封裝的功能, 以至於很容易錯過其中一些. 所以, 在接下來的具體技巧中, 我們將深入了解一些我最喜歡的功能.

Umar Hansa有很好的關於學習DevTools可以做什麼的素材. 他有一個每周通訊和GIF, 在文章的最後一節會有一個新課程的鏈接, 他在我們的網站也投過一篇文章.

我最近最喜歡的一個功能是CSS Tracker Enhancement, 如下圖所示(已得到Umar授權許可). 這裡顯示所有未使用的CSS, 以便您能了解性能和影響 .

CSS跟蹤器通過不同顏色標記來顯示使用和未使用的CSS集合.

Misc Tools 其他工具

What input是一個用於跟蹤當前輸入方法(mouse, keyboard或者touch)的全局實用功能. , 以及目前的意圖 - 這可以很好地跟蹤可訪問性泄漏(致敬Marcy Sutton, 此漏洞的無障礙專家).

如果您正在進行響應式開發或者檢查部署在大量設備上的任何東西, Ghostlabapp是一個非常棒的工具. 它提供同步的Web開發, 測試和檢查.

Eruda是一款超贊的工具, 它有助於在移動設備上進行調試. 我真的非常喜歡它, 因為它需要一個模擬器, 進一步地, 給出一個控制台和真正的devtools, 以幫助您理解 .

Specific Tips具體技巧

我總是很好奇其他人如何進行調試, 所以我通過CSS-Tricks賬號向社區提問, 並且思考他們到底喜歡什麼. 這個列表結合了我喜歡的技巧以及來自社區的一些技巧.

Accessibility 可訪問性

$( body ).on( focusin ,function(){

console.log(document.activeElement);

});

這將記錄當前關注的元素, 很有用, 因為打開DevTools會使activeElement變得模糊.

This logs the currently focused element, useful because opening the Devtools blurs the activeElement - Marcy Sutton

Debugging CSS 調試CSS

我們得到很多反饋說, 人們將元素的邊框設置為紅色, 以便觀察元素在做什麼.

@sarah_edo 對於CSS, 我通常會為那些總是惹麻煩的元素加上一個.debug的CSS類, 這個類裡面的樣式border定義為red. — Jeremy Wagner (@malchata) March 15, 2017

我也是這樣做的, 我自己甚至有一個小小的CSS文件, 丟進來一些不同的CSS類, 就可以輕易的訪問不同顏色.

Checking State in React 在React中檢查狀態

@sarah_edo

— MICHAEL JACKSON (@mjackson) March 15, 2017

贊同Michael, 這是我知道的最有用的調試工具之一. 這個代碼片段"美化列印(pretty prints)"了您正在使用的組件的狀態到組件上, 以便您知道發生了什麼. 您可以驗證狀態正在以您希望的方式運行, 並且可以幫助您追蹤在狀態和使用方式之間的任何錯誤.

Animation 動畫

我們得到很多反饋, 他們減慢動畫(延長動畫時間):

@sarah_edo @Real_CSS_Tricks * { animation-duration: 10s !important; } — Thomas Fuchs (@thomasfuchs) March 15, 2017

我曾經在我發表在CSS Tricks的貼子"調試CSS Keyframe動畫"里提到過這個方法, 在貼子里提到了更多的技巧, 例如如何硬體加速, 或者以不同百分比進行多個轉換.

我還在GreenSock中, 通過JavaScript腳本來減慢我的動畫 - 如下所示: timeline.timeScale(0.5) (您可以減慢整個時間軸, 而不是一次只能減慢一個動畫, 整個非常有用) 在mo.js中, 看起來就像這樣: .

Val Head有一個非常棒的錄屏功能, 通過Chrome和Firefox的DevTools提供動畫.

如果您想使用Chrome的DevTools的時間軸來進行性能審查, 值得一提的是, 繪畫是開銷最大的任務, 所以, 所有這些都是平等的, 更多地關注那些高百分比的綠色部分.

Checking different connection speeds and loads 檢查不同的連接速度和負載

我傾向於在高速的網路連接中工作, 所以我會調節我的連接速度, 看看在沒有連接速度的情況下表現如何 .

這同樣適用於硬性重新載入或緩存為空的情況 .

Set a Timed Debugger 設置定時調試器

這個來自Chris, 在這裡, 我們有他的完整的論述:

setTimeout(function(){

debugger;

},3000);

它非常類似於我們之前提到過的debugger;, 除了您可以將它放到setTimeout函數裡面, 並且能獲取更多的微調信息.

Simulators 模擬器

我曾經提到過Eruda的模擬器. iOS用戶也會得到一個漂亮的模擬器. 我曾經告訴您, 必須先按照XCode, 但是這個tweet給出了另外一種方法:

@chriscoyier @Real_CSS_Tricks 或者, 您可以使用這個方法, 如果您不想安裝XCode的話: https://t.co/WtAnZNo718 — Chris Harrison (@cdharrison) March 15, 2017

Chrome也有一個有用的設備切換工具.

Remote Debuggers 遠程調試器

@chriscoyier @Real_CSS_Tricks https://t.co/q3OfWKNlUo 是個非常好的工具. — Gilles (@gfra54) March 15, 2017

說實話, 在看到這個推文之前, 我都不知道有這個工具. 非常有用!

CSS Grid Debugging CSS網格調試

Rachel Andrew在Smashing上發表了演講, 並提到了可以在Firefox中點擊的小東西, 它將照亮網格間的間隔. 她的視頻解釋的非常清晰 .

Array Debugging 數組調試

Wes Bos有一個非常有用的技巧, 用於在數組中查找單個項:

如果您正在查找數組中的一個項, 那麼array.find()很 https://t.co/AuRtyFwnq7 — Wes Bos (@wesbos) March 15, 2017

Further Debugging Resources 更多調試資源

Jon Kuperman有一個前端大師課程, 可以幫助您掌握與此應用程序一起使用的DevTools.

Code School有一個小課程: Discover DevTools.

Umar Hansa有一個新的在線課程: Modern DevTools.

Julia Evans有一篇非常棒的關於調試的文章, 感謝Jamison Dance把它推薦給我.

如果您像我一樣非常好奇, 並且希望在時間軸上挖的更深, 請看Paul Irish的用DevTools進行高級性能檢查.

最後，你平時調試代碼的時候有什麼奇淫技巧嗎？或者有什麼趣事發生可以跟@早讀君分享分享。

關於本文

譯者：@池盛星

作者：@Sarah Drasner

原文：https://css-tricks.com/debugging-tips-tricks/

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！