介紹 debugger.html

「debugger.html」為 Mozilla 所提供的 JavaScript 新除錯器,並透過 ReactRedux 將之建構為 Web App 的形式。此一專案已從今年稍早開跑,期能取代 Firefox 開發者工具中現有的除錯器。我們更希望讓除錯器能以單一獨立的形式,對多個目標進行除錯。

colla

目前 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);而函式內的區域變數將根據選定的框架顯示可擴充的變數樹狀圖

debug

動手開始

在使用除錯器之前,請先看看 Github 上的程式碼,並閱讀入門指南。

如果你只是想嘗鮮體驗,就執行下列指令:

當你在瀏覽器的 port 8000 中開啟除錯器之後,就會顯示除錯器的主頁面,監控你所能選擇的任何可除錯的目標。為了讓除錯器能連接目標並除錯,就必須啟動遠端除錯功能。如此會需要你以不同的參數設定開始對目標進行除錯。舉例來說,你可於 MacOS 上開始 Firefox 實體 (Instance),並以下列指令啟動遠端除錯功能:

Chrome 與 Firefox 可用的其他選項列在這裡

Debugging Node 需要你安裝 version v6.3.0 或更高版本。在執行 Node 時必須加上檢視參數。再舉個例子,如果你要對 myserver.js 除錯,則需使用類似下列的指令:

請參閱〈Getting Started〉獲得進一步資訊。

Firefox 開發者工具

我們現正將此除錯器整合至 Firefox 開發者工具中,你已可透過每夜更新版 (Nightly) 搶先體驗。

jsfiddle

一同參與

如上所提到的,此一專案目前仍處於開發階段,也需要更多人協助打造出更好的除錯器。如果你想加入我們,請先參閱加入貢獻指南。

 

 

原文連結:Introducing debugger.html

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *