「debugger.html」為 Mozilla 所提供的 JavaScript 新除錯器，並透過 React 與 Redux 將之建構為 Web App 的形式。此一專案已從今年稍早開跑，期能取代 Firefox 開發者工具中現有的除錯器。我們更希望讓除錯器能以單一獨立的形式，對多個目標進行除錯。
目前 debugger.html 已能連上 Firefox 並除錯，另可實驗性的連接 Chrome 與 Node。連接 Firefox 是透過 Mozilla 的「遠端除錯協定 (Remote Debug Protocol；RDP)；連接 Node 與 Chrome 則是利用 Chrome 的 RDP。
debugger.html 專案現已置於 GitHub 上，另使用目前主流的框架與工具鏈，希望能以穩定的品質接觸更多開發者。
debugger.html
使用者介面分成 3 個主要區塊：原始碼面板、編輯器面板、右側邊欄。
- 原始碼面板是透過樹狀檢視圖，呈現目前正除錯中的 App 程式碼。
- 編輯器面板則顯示專案的不同原始檔案，另可設定中斷點 (Breakpoint) 並修飾原始碼。
- 除錯器暫停時，右側邊欄將顯示目前的中斷點集合、現有目前的呼叫堆疊、範圍內的變數。
- 除錯器可支援暫停 (Pause)、不進入函式 (Step over)、逐步執行 (Step in)、跳離函式 (Step out)、播放 (Play) 等控制功能，以利 JavaScript 除錯。
- 呼叫堆疊面板則針對既有的暫停條件，顯示呼叫堆疊框架 (Frame)；而函式內的區域變數將根據選定的框架，顯示可擴充的變數樹狀圖。
動手開始
在使用除錯器之前，請先看看 Github 上的程式碼，並閱讀入門指南。
如果你只是想嘗鮮體驗，就執行下列指令：
|
1 2 3 |
npm install - Install dependencies npm start - Start development web server open http://localhost:8000 - Open in any modern browser |
當你在瀏覽器的 port 8000 中開啟除錯器之後，就會顯示除錯器的主頁面，監控你所能選擇的任何可除錯的目標。為了讓除錯器能連接目標並除錯，就必須啟動遠端除錯功能。如此會需要你以不同的參數設定開始對目標進行除錯。舉例來說，你可於 MacOS 上開始 Firefox 實體 (Instance)，並以下列指令啟動遠端除錯功能：
|
1 2 |
$ /Applications/Firefox.app/Contents/MacOS/firefox-bin --start-debugger-server 6080 -P development |
Chrome 與 Firefox 可用的其他選項列在這裡。
Debugging Node 需要你安裝 version v6.3.0 或更高版本。在執行 Node 時必須加上檢視參數。再舉個例子，如果你要對 myserver.js 除錯，則需使用類似下列的指令：
|
1 |
$ node --inspect myserver.js |
請參閱〈Getting Started〉獲得進一步資訊。
Firefox 開發者工具
我們現正將此除錯器整合至 Firefox 開發者工具中，你已可透過每夜更新版 (Nightly) 搶先體驗。
一同參與
如上所提到的，此一專案目前仍處於開發階段，也需要更多人協助打造出更好的除錯器。如果你想加入我們，請先參閱加入貢獻指南。
原文連結：Introducing debugger.html