• 原文地址：Debugging JavaScript With A Real Debugger You Did Not Know You Already Have
• 原文作者：Dustin Driver
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：Serendipity96
• 校對者：ZhiyuanSun，noahziheng

來試試這個真正的 JavaScript 偵錯程式吧！

console.log 可以告訴你很多關於應用程式的資訊，但它不能真正除錯你的程式碼。因此，你需要一個完整的 JavaScript 偵錯程式。新的 Firefox JavaScript 偵錯程式能夠幫你寫快速且無缺陷的程式碼。下面來介紹它的用法。

在這個例子中，我們將用 Debugger 開啟一個非常簡單的應用程式。此應用程式是基於一個基礎的 JavaScript 開源框架開發的。在最新版本的Firefox Developer Edition中開啟此程式，Mac系統按 Option + Cmd + S 或者 Windows系統按 Shift + Ctrl + S 啟動 debugger.html。偵錯程式共分為三個窗格：源列表窗格，原始碼窗格和工具窗格。

大圖預覽

工具窗格進一步分為工具欄，監視表示式，斷點，呼叫堆疊和範圍。

大圖預覽

停止使用 console.log

使用 console.log 來除錯程式碼是很誘人的。你只需在程式碼中新增一句 console.log ，然後執行即可找到變數的值，對不對？這確實可以奏效，它可能是麻煩且費時的。在這個例子中，我們將使用 debugger.html 單步執行這個待辦事項應用的程式碼來查詢變數的值。

我們在 debugger.html 的一行程式碼中新增一個斷點，來深入瞭解待辦事項應用程式。斷點告訴偵錯程式在這一行上暫停，這樣你可以點選程式碼來看看發生了什麼。在這個例子中，我們在 app.js 檔案的第 13 行新增一個斷點。

大圖預覽

現在新增一個任務到列表中。程式碼將會暫停到 addTodo 函式，我們可以深入程式碼來檢視輸入的值等。將滑鼠懸停在變數上可以看到更多資訊。你可以看到錨點和子程式等各種資訊：

大圖預覽

你也可以進入 Scopes 皮膚獲取相同的資訊。

現在指令碼已經暫停，我們可以使用工具欄來逐步除錯。開始/暫停按鈕正如工具欄上所顯示的含義，" Step Over " 跨越當前程式碼行，" Step In " 步入函式呼叫，" Step Out " 執行指令碼，直到當前函式退出。

大圖預覽

我們也可以使用監視表示式來跟蹤變數的值。只需在監視表示式欄位中輸入一個表示式，偵錯程式將在你逐步執行程式碼時進行跟蹤。在上面的例子中，你可以新增表示式 " title "和 " to-do "，當它們被呼叫時，偵錯程式會顯示它們的值。以下情況特別有用：

• 你正單步執行並想看變數值的變化；
• 你正多次除錯同樣的東西，並希望看到相同的變數值；
• 你想弄清楚為什麼那個該死的按鈕不起作用。

你也可以用 debugger.html 去除錯 React / Redux 應用程式。以下是使用步驟：

• 跳轉到你要除錯的元件。
• 參閱左側的元件大綱（類中的函式）。
• 新增斷點到相關的函式中。
• 暫停並檢視元件 props 和 state。
• 呼叫堆疊是已經被簡化的，這便於你檢視應用程式程式碼和框架的交集。

最後，debugger.html 讓你看到可能引起錯誤的混淆或壓縮的程式碼，這在處理像 React / Redux 這樣的通用框架時特別有用。偵錯程式知道你已暫停的元件，並顯示簡化的堆疊呼叫，元件大綱和屬性。以下是開發人員 Amit Zur 在 JS Kongress 上描述他是如何使用 Firefox 偵錯程式除錯程式碼的：

如果你在新的 debugger.html 中對深入程式碼走查感興趣，請轉到Mozilla Developer Playground。我們構建了一個系列教程，幫助開發人員學習如何有效地使用該工具來除錯程式碼。

開源的開發工具

debugger.html project大約於兩年前推出，同時對所有 Firefox DevTools 進行了全面改進。我們希望使用現代網路技術重建 DevTools，並對全世界的開發者開放。當一項技術開放的時候，能夠自由擴充套件到我們 Mozilla 小團隊所能想象的範圍之外的任何地方。

JavaScript對於任何高階 Web 應用程式都是必不可少的，所以強大的偵錯程式是工具集的關鍵部分。我們希望構建一些快速，易於使用且適應性強 —— 能夠除錯未來可能出現的任何新 JavaScript 框架的產品。我們決定使用流行的網路技術，因為我們想與社群緊密合作。這種方法也將改善偵錯程式本身 —— 如果我們採用了 WebPack 並開始在內部使用構建工具和 Source Map，我們希望改進 Source Map 生成和熱載入。

debugger.html 是用 React，Redux 和 Babel 構建的。React 元件輕量，可測試又易於設計。我們使用 React Storybook 進行快速的 UI 原型設計和記錄共享元件。我們的元件使用 Jest 和 Enzyme 進行測試，這使得在 UI 上迭代更容易。這讓使用各種 JavaScript 框架（如 React ）更容易。Babel 前端能讓我們做一些像顯示左側邊欄中 Component 類和它功能的事情。我們也可以做一些很酷的事情，例如把斷點固定到函式中，當你改變你的程式碼時，它們不會移動。

Redux Action 對於 UI 來說是一個簡單的 API，但它也可以很容易地構建一個獨立的 CLI JS 偵錯程式。Redux Store 有查詢當前除錯狀態的選擇器。我們的 Reduce 單元測試激發了 Redux Action 並模擬瀏覽器響應。我們的整合測試使用偵錯程式 Redux Action 來驅動瀏覽器。功能架構本身被設計為可測試的。

我們每一步都依靠 Mozilla 開發人員社群。該專案在 GitHub 上釋出，我們的團隊聯絡世界各地的開發人員向他們尋求幫助。當我們開始時，自動化測試是社群發展的重要組成部分，測試可以預防效能退化，也能很好地記錄容易遺漏的行為。這就是為什麼我們採取的第一步是為 Redux Store 新增 Redux Action 和 Flow 型別的單元測試。事實上，社群確保我們的 Flow 和 Jest 覆蓋率有助於確保每個檔案都被列印和測試。

作為開發者，我們相信工具越強，參與的人越多。我們的核心團隊一直很小（2 人），但我們平均每週有 15 個貢獻者。社群帶來了多樣的視角，幫助我們預測挑戰並創造了我們從未想到的功能。我們現在整理了 24 個不同庫的呼叫堆疊，其中有許多我們從未聽說過。我們還在原始碼樹中顯示 WebPack 和 Angular 對映。

我們計劃將所有的 Firefox DevTools 移到 GitHub 上，以便更廣泛的受眾使用和改進它們。我們很樂意為您做出貢獻。轉到 debugger.html 的 GitHub 專案頁面。我們已經建立了一個關於如何在自己的機器上執行偵錯程式的完整的指令列表，在列表裡你可以修改使它做任何你想做的事。使用它來除錯任何 JavaScript 程式碼 —— 瀏覽器，終端，伺服器，手機，機器人。如果您有改進的方法，請通過 GitHub 告訴我們。

您可以在這裡下載最新版本的 Firefox（和 DevTools）。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。