除錯器

JavaScript 除錯器 (Debugger) 可分為 2 種。其一是直接於 Firefox 中執行，針對內容除錯。另一種則是於 Firefox OS 裝置上執行，或在 Android 裝置中的 Firefox 執行，讓使用者針對程式碼除錯。此 2 種除錯器的主要差異在於：遠端除錯器 (Remote debugger) 是於本身視窗中執行；而針對使用者正在除錯的網頁內容，網頁內容除錯器 (Web content debugger) 則將位於相同分頁中。

啟動除錯器

網頁內容除錯

針對 Firefox 中直接執行的網頁內容，不論是儲存在本端電腦或伺服器上，若要進行除錯，請點選「網頁開發者 (Web Developer)」功能表中的「除錯器 (Debugger)」選項。

一旦使用者已設定了 Firefox 與 Firefox OS 的除錯支援功能，即可在 Firefox OS 裝置或 Firefox OS Simulator 上執行程式碼，透過遠端除錯器進行除錯。

若要針對 Firefox OS 或 Android 裝置所執行的 JavaScript 進行除錯，則應先確認該裝置已連至 USB 埠，且 lsusb 與 adb 均可辨認此裝置。接著應開啟終端視窗，將合適的 TCP 埠指派至裝置，再鍵入以下指令：

adb forward tcp:6000 tcp:6000

只要點選「網頁開發者」中的「遠端除錯器」選項，即可開啟遠端除錯器。系統將要求使用者指定所要連接的 IP 位址與通訊埠，以利除錯作業。除非使用者更改了裝置上的設定，否則僅需保留原始的 localhost:6000 設定即可。點選「OK」再稍等數分鐘之後，隨即將啟動並執行除錯器。

此時，由於使用者尚未設定任何中斷點 (Breakpoint) 或其他選項，因此除錯器不會進行作業。裝置將持續自行運作。接著將說明除錯器的實際使用情形。

除錯器工具列

工具列具備數個控制元：

暫停/繼續 (Pause/Resume) (F6)

可暫停或繼續目前除錯中的指令碼。

Step Over (F7)

從目前 JavaScript 程式碼的行數跳往下一行。

Step Into (F8)

進入 JavaScript 程式碼目前行數的函式呼叫。

Step Out (Shift-F8)

執行指令碼，直到退出目前的函式。

Script Chooser (Ctrl-P 或 Cmd-P)

此功能表可讓使用者選擇目前正在執行中的 scripts，以讀取其程式碼、設定中斷點等等。

指令碼篩選器 (Script Filter)

指令碼篩選器 (如同搜尋對話框) 可鍵入字串，以篩選出所需的指令碼。請參閱下方的 Using the script filter。

展開窗格 (Expand Panes)

展開或收縮視窗，可顯示/隱藏左右兩邊的窗格。

除錯器選項 (Debugger Options)

將會顯示一個可以讓使用者設定除錯器的功能表。請參閱下方的 Debugger options。

使用指令碼篩選器 (Script filter)

若點選工具列中的指令碼篩選器，即可鍵入字串，讓指令碼選擇功能表顯示吻合的指令碼。此外，只要點選此對話框，亦可看見特殊運算子，讓此對話框提供搜尋對話框與更多功能。這些特殊運算子亦具備鍵盤快捷鍵，將自動帶領使用者進入篩選對話框，並同時將運算子插入對話框中。使用者只要開始鍵入內容即可。

在所有檔案中搜尋 (Search in all files) - ! (Cmd-Opt-F)

針對使用者鍵入的文字，搜尋所有執行中的指令碼。此功能將於工具列下方再新增 1 個窗格，顯示所有吻合的檔案。各個檔案另有註記對話框，讓使用者可看到其內的吻合項目。

在此檔案中搜尋 (Find in this file) - # (Cmd-F)

針對目前觀看中的檔案，搜尋使用者鍵入的文字。

跳到某行 (Jump to line) - : (Cmd-J)

跳到使用者於對話框中所鍵入的行數。

過濾變數 (Filter variables) - * (Cmd-Opt-V)

篩選器將僅顯示吻合特定字串的變數。

除錯器選項

若按下除錯器選項圖示，將蹦現選項功能表，讓使用者可調整除錯器的動作。

發生例外時暫停 (Pause on exceptions)

若啟用此選項，則不論何時丟出 JavaScript 例外，隨即自動暫停執行指令碼。

啟動時顯示窗格 (Show panes on startup)

若啟用此選項，隨即顯示除錯器兩側的窗格。首次啟動除錯器時，依預設值將不會顯示此兩側的窗格。

顯示隱藏屬性 (Show hidden properties)

若啟用此選項，則將不會顯示隱藏的 JavaScript 屬性；亦即這些屬性本為顯示隱藏 (Non-enumerable)。

顯示變數搜尋框 (Show variables searchbox)

若啟用此選項，將為變數窗格新增「過濾變數 (Filter variables)」的搜尋對話框，讓使用者可篩選已顯示的變數清單。

使用除錯器

Javascript 除錯器有其他大多數除錯器中也有的標準功能。

中斷點 (Breakpoints)

透過指令碼選擇器的下拉式功能表，即可為所需的檔案設定中斷點 (假設使用者尚未看到中斷點)。接著針對行編號欄左側的行編號本身，點選所要設定中斷點的程式碼行。另亦可針對想要設定中斷點的該程式碼行，按下滑鼠右鍵，透過顯示的文字功能表建立中斷點 (Ctrl+B 或Cmd-B) 或條件式中斷點 (Ctrl+Shift+B or Cmd-Shift-B)。

舉例來說，我們先用遠端除錯器設定中斷點，且只要使用者下拉通知列 (Notification bar) 隨即啟動中斷點。請先點選「app://system.gaiamobile.org/js/quick_settings.js」(只要下拉通知列就會顯示此快速設定應用程式)。找到 handleEvent()方式並點選程式碼第一行的左側。接著就會在該行旁邊新增 1 個藍色的中斷點指示元，即如同：

只要再次點選中斷點指示元，即可將此中斷點關閉。而在堆疊面板底部，亦將顯示目前已設定的所有中斷點。可參閱 Managing breakpoints 進一步了解此清單。

現在，於自己的裝置中拉下通知列。下拉通知列之後，只要應用程式接收到第一個事件，隨即就會啟動中斷點。若尚未顯示這些窗格，則此時將開啟相關窗格，以顯示變數與堆疊架構等。此時除錯器看起來如下：

而裝置看起來如下：

現在可來回點選整個堆疊架構，以觀看呼叫歷史紀錄。舉例來說，只要點選堆疊架構面板中的「ut_onTouchEnd」，將隨即於「app://system.gaiamobile.org/js/utility_tray.js」中顯示程式碼。在下拉通知列之後，針對使用者將手指自螢幕上移開之後所發生的事件，均將由此程式碼進行處理。

接著可使用工具列中的繼續、跳過、進入、跳出等按鈕，逐步執行程式碼完畢。後續要執行的下一行程式碼，其左側將顯示綠色箭頭。當然，使用者同時亦可進行檢查變數、設定/移除中斷點等作業。

在設定中斷點之後，源碼的右側框內亦將顯示藍色指示元。依需要點選該指示元，即可快速捲動至對應的中斷點。

條件式中斷點 (Conditional breakpoint)

條件式中斷點屬於特殊中斷點，僅於既有的 JavaScript 表示式為 True 時，才會觸發條件式中斷點。若要設定條件式中斷點，可對程式碼行按下滑鼠右鍵，點選「新增條件式中斷點 (Add conditional breakpoint)」，或按下 Ctrl+Shift+B/Cmd-Shift-B。亦可先建立一般中斷點，再對除錯器視窗左下角的中斷點清單按下滑鼠右鍵，即可為中斷點新增條件。

接著可輸入條件。當條件為 True 才會觸發中斷點：

如此一來，當到達對應的程式碼行，只有「evt.type == 'click'」表示式為 True 才或暫停執行。

管理中斷點

透過除錯器視窗左下角的中斷點清單，即可管理自己設定的中斷點。只要勾選/取消勾選斷點的方塊，即可開啟/關閉該中斷點。若點選任何條件式中斷點，均將蹦現條件式中斷點的編輯面板，如同 Conditional breakpoints 中所示。.

若對中斷點按下滑鼠右鍵，均可開啟額外選項：

移除所有中斷點 (Remove all breakpoints)

移除目前的所有中斷點。

啟用所有中斷點 (Enable all breakpoints)

啟用目前的所有中斷點。此即勾選所有中斷點方塊的快捷功能。

停用所有中斷點 (Disable all breakpoints)

停用 (而不是移除) 所有中斷點。此即取消勾選所有中斷點方塊的快捷功能。

啟用其他 (Enable others)

除了目前按下滑鼠右鍵的中斷點之外，啟用所有中斷點。

停用其他 (Disable others)

除了目前按下滑鼠右鍵的中斷點之外，停用所有中斷點。

移除其他 (Remove others)

除了目前按下滑鼠右鍵的中斷點之外，移除所有中斷點。

設定條件式中斷點 (Configure conditional breakpoint)

設定目前按下滑鼠右鍵的條件式中斷點。若該中斷點並非條件式中斷點，則可新增條件以將之轉為條件式中斷點。

停用中斷點 (Disable breakpoint)

停用目前按下滑鼠右鍵的中斷點。

啟用中斷點 (Enable breakpoint)

啟用目前按下滑鼠右鍵的中斷點。

變數面板 (Variable panel)

除錯器的右側窗格，大部分都顯示了使用者目前區域可視範圍中的可用變數。如圖所示，內有目前執行中函式 (此為 qs_handleEvent())、呼叫函式 (此為 ut_show())、全域範圍 (此為 Window 物件)。

只要按下提示三角形，即可展開各個物件，顯示其成員與其內容。若點選變數目前的數值再輸入新數值，即可更改變數數值。舉例來說，若點選 geolocationEnabled 旁邊的「true」，即可鍵入「false」而將該值設定為 false。而編輯過的變數數值，均將以黃色呈現，如：
 

若將滑鼠游標移至變數，即會出現提示訊息，內含變數的相關資訊。舉例來說，若將滑鼠游標移至 evt 物件，就會顯示「configurable enumerable writable」；亦即此 evt 物件不可設定，但為可顯示並可撰寫。請參閱 Object.defineProperty() 以進一步了解這些屬性指示元的意義。

若啟用如截圖所示的變數篩選對話框，則可減少此清單中的叢集，讓清單僅顯示使用者想看的物件。此為循環式的搜尋功能，並將搜尋子物件。舉例來說，若鍵入「blue」，則可限制列出 qs_handleEvent()函式可視範圍中的「this.bluetooth」物件；另將限制列出全域可視範圍中的「Bluetooth」與「BluetoothTransfer」物件。

Watch expressions

Watch Expression，可估算暫停執行的表示式，讓使用者檢查這些表示式的結果。使用者可檢視程式碼中的不變數 (Invariant)，讓使用者找出程式碼中「存在但不必要」的部份，以利相關檢驗。若要新增 Watch Expression，可點選對話框中的「Add watch expression」，再輸入 JavaScript 表示式，即可在逐步執行程式碼期間，監控該 JavaScript 表示式的輸出。

接著可開始執行程式碼。在開始逐步執行程式碼之前，Watch Expression 將不會有任何動作。所以直到中斷點之前，均不會發生任何情況。一旦抵達中斷點，將有對話框顯示  Active watch expressions 及其目前的數值。

舉例來說，我們假設現在正逐句通過某個程式碼，而想要快點知道某個變數「a」乘以 2 的數值，但不想再花腦筋受到任何「思考」的干擾。此時可將「a*2」表示式鍵入至「Add a watch expression box」再輸按下 Enter、設定合適的中斷點，最後執行程式碼。

若剛剛的「a」值為 1，則一旦抵達中斷點就會顯示結果如下：

接著可逐步執行程式碼，同時觀看表示式變化時的數值。只要數值產生變化，則對話框均將快速閃動黃色 1 次。使用者只要點選 Watch expression 旁邊的「x」圖示，即可移除該表示式。當然，不限制每次僅能移除 1 組 Watch expression。

停止除錯器

完成除錯之後，可開啟 Settings app 再點選 Device Information，即可關閉裝置上的遠端除錯功能。在此頁面上可看到「More Information」按鈕。點選按鈕的後續頁面可向下捲動至「Developer」，再點選此按鈕。如此即可顯示開發者選項清單，再找到 Turn off Remote Debugging。

另請參閱

• Debugging on Firefox OS
• Remote debugging protocol
• Remote Debugging on Firefox for Android (部落格文章)