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

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。