來試試這個真正的 JavaScript 調試器吧！

console.log

可以告訴你很多關於應用程序的信息，但它不能真正調試你的代碼。因此，你需要一個完整的 JavaScript 調試器。新的 Firefox JavaScript 調試器能夠幫你寫快速且無缺陷的代碼。下面來介紹它的用法。

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

大圖預覽

工具窗格進一步分為工具欄，監視表達式，斷點，調用堆棧和範圍。

大圖預覽

停止使用 <code>console.log/<code>

使用 <code>console.log/<code> 來調試代碼是很誘人的。你只需在代碼中添加一句 <code>console.log/<code> ，然後執行即可找到變量的值，對不對？這確實可以奏效，它可能是麻煩且費時的。在這個例子中，我們將使用 <code>debugger.html/<code> 單步執行這個待辦事項應用的代碼來查找變量的值。

我們在 <code>debugger.html/<code> 的一行代碼中添加一個斷點，來深入瞭解待辦事項應用程序。斷點告訴調試器在這一行上暫停，這樣你可以點擊代碼來看看發生了什麼。在這個例子中，我們在 app.js 文件的第 13 行添加一個斷點。

大圖預覽

現在添加一個任務到列表中。代碼將會暫停到 addTodo 函數，我們可以深入代碼來查看輸入的值等。將鼠標懸停在變量上可以看到更多信息。你可以看到錨點和子程序等各種信息：

大圖預覽

你也可以進入 Scopes 面板獲取相同的信息。

現在腳本已經暫停，我們可以使用工具欄來逐步調試。開始/暫停按鈕正如工具欄上所顯示的含義，" Step Over " 跨越當前代碼行，" Step In " 步入函數調用，" Step Out " 運行腳本，直到當前函數退出。

大圖預覽

我們也可以使用監視表達式來跟蹤變量的值。只需在監視表達式字段中輸入一個表達式，調試器將在你逐步執行代碼時進行跟蹤。在上面的例子中，你可以添加表達式 " title "和 " to-do "，當它們被調用時，調試器會顯示它們的值。以下情況特別有用：

• 你正單步執行並想看變量值的變化；

• 你正多次調試同樣的東西，並希望看到相同的變量值；

• 你想弄清楚為什麼那個該死的按鈕不起作用。

你也可以用 <code>debugger.html/<code> 去調試 React / Redux 應用程序。以下是使用步驟：

• 跳轉到你要調試的組件。

• 參閱左側的組件大綱（類中的函數）。

• 添加斷點到相關的函數中。

• 暫停並查看組件 props 和 state。

• 調用堆棧是已經被簡化的，這便於你查看應用程序代碼和框架的交集。

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

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

開源的開發工具

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

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

<code>debugger.html/<code> 是用 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 告訴我們。