淺談新開發工具 WebIDE (下)
你是熱血的 App 開發者，而且早已累積許多 App 準備大展身手嗎？Mozilla 繼「應用程式管理員 (App Manager)」之後，再度提供新的 App 開發工具 ─ WebIDE，如果你才剛看這篇文，當然應該要先看過《淺談新開發工具 WebIDE (上)》。
建立並開啟 App
在「開啟應用程式 (Open App)」選單之下共有 3 個選項：
1). 新增應用程式… (New App…)
2). 開啟封裝的應用程式… (Open Packaged App…)
3). 開啟架設的應用程式… (Open Hosted App…)
建立新的 App
點選「新增應用程式」即可建立新 App。你會看到對話視窗內提供「Privileged Empty App」與「Privileged App」共 2 個範本。
此 2 個範本均來自於 Mozilla 的「app template collection」，以最基本的架構讓你輕鬆上手。「Privileged App」則會教你如何使用權限去取得跨領域 (cross-origin) 的內容。
在選擇範本之後，必須設定該 App 的名稱及其檔案儲存目錄，接著會在專案編輯器中開啟新 App。
開啟封裝式 App
點選「開啟封裝的應用程式…」即可開啟封裝式 (Packaged) App。你所選取的資料夾中必須具備 App 的 manifest 檔案，然後就會在專案編輯器中開啟 App。
注意：你會在「應用程式管理員 (App Manager)」中看到「manifest」中文翻譯為「安裝資訊檔」。
開啟托管/架設式 App
點選「開啟架設的應用程式…」開啟托管/架設式 (Hosted) App。你必須輸入 1 組網址指向該 App 的 manifest 檔案，然後就會在專案編輯器中開啟該 App。
編輯 App
專案編輯器可供編輯 App。左側邊欄是 App 所有檔案的樹狀結構，可透過右鍵選單來新增、刪除檔案。右邊一大塊就是檔案編輯面板。
App 總覽頁面
如果是第一次打開或新建 App 時，編輯面板會出現 App 總覽頁面：
你可隨時透過左側的檔案樹狀圖，回到 App 總覽頁面。
Manifest 檔案檢查
WebIDE 會自動檢查 manifest 檔案的常見問題。只要發現問題，就會在 App 總覽頁面中顯示並說明錯誤原因：
原始碼編輯器快捷鍵
請至《WebIDE》查看原始碼編輯器的預設快捷鍵表格。
在開發者工具的「設定」中可找到「編輯器偏好設定 (Editor Preferences)」，可進一步選擇使用 Vim、Emacs，或 Sublime Text。
你可前往 about:config，選擇 devtools.editor.keymap 再指定「vim」或「emacs」或「sublime」。完成設定之後，只要是使用該原始碼編輯器的開發者工具，都會套用你指定的快捷鍵。但你必須重新開啟編輯器之後，變更才會生效。
從 Firefox 33 起，相關快捷鍵設定均已加入開發者工具的「編輯器偏好設定」之中。不需進入 about:config 亦可完成設定。
程式碼補齊
當編輯 CSS 和 JavaScript 時，編輯器會自動補齊建議字串。 CSS 自動補齊功能預設為開啟：
按「Control + Space」就可顯示 JavaScript 的自動補齊建議：
行內說明文件
編輯器也可顯示 JavaScript 的行內說明文件。只要按下「Shift + Space」，就會跳出目前滑鼠游標放置的條目之說明：
在提示視窗中點選 [docs] 連結，就會帶你到該條目所對應的 MDN 頁面。
儲存檔案
你必須儲存檔案之後，才能觀看檔案修改成果。如果是修改過但尚未儲存的檔案，則樹狀圖的檔名旁邊將顯示星號。你可透過選單或按下「Control+S」，即可儲存檔案 (Mac OS X 則為「Command+S」)。
移除專案
要從 WebIDE 移除 App，可在 App 總覽頁面點選「移除專案 (Remove Project)」。
執行並除錯 App
當準備好要執行 App 時，必須從「選擇 Runtime」下拉式選單中選取任一執行環境。如果沒有適合的執行環境，請參考設定執行環境。
WebIDE 工具列中間的「Play」按鈕現已可點擊。點下之後就會在你所選的執行環境中安裝並執行 App：
這時按下「Pause」就會出現開發者工具的工具箱，以利你對已連結的 App 進行除錯：
這裡會根據所選的執行環境而提供除錯工具，且必定會提供如檢測器 (Inspector)、主控台 (Console)、JavaScript 除錯器、樣式編輯器 (Style Editor)、效能分析器 (Profiler)、程式碼速記本 (Scratchpad) 等基本工具。就如同一般網頁，透過這些工具做出的修改，都可以即時在 App 中看到結果，但僅暫存。相反的，透過編輯面板修改的檔案，都會直接儲存到硬碟之中，但必須重新啟動 App 才能看到結果。
Certified App 的除錯
若是搭配模擬器，則只要已選擇了執行環境，再點擊 App 的下拉選單，則不僅僅是你的 App，只要是該執行環境正執行中的所有 App 都會列在上面，包含Certified App。這時即可除錯所你選擇的 App：
不過，如果要在實際裝置除錯 Certified App 還需要：
- 裝置必須搭載 Firefox OS 1.2 或更高版本
- 必須啟動 Certified App 除錯功能
如果要啟動 Certified App 除錯功能，就要先連接執行環境，然後在選單中找到 Runtime > Runtime Info。如果你在這裡看到「開發工具受限權限 (DevTools restricted privileges)」為「Yes」，就表示無法進行 Certified App 的除錯。根據你除錯對象的不同，後續步驟也有所差異：
- 實際裝置
- 如果你的裝置可進行 rooted，則點選「需要更高權限 (
Request higher privileges)」，就會啟動 Certified App 的除錯功能；Firefox OS 亦將重新啟動。
- 如果你的裝置可進行 rooted，則點選「需要更高權限 (
- 模擬器
- 模擬器已經預設開啟 Certified App 的除錯功能。
- B2G 桌機裝置
- 在連線並啟動 Certified App 除錯功能之後，即可手動編輯 B2G 桌機用戶端的設定。
現在 (或在重新啟動 B2G 桌機用戶端之後) 你應該可以到 WebIDE 看到裝置中的所有 Certified App 了。
監控效能
如果你想知道自己 App 的效能，也有幾種方法可於 WebIDE 的執行環境中測得：
- 「監控 (Monitor)」面板可初步顯示裝置的效能，協助你找出問題所在。例如 App 佔用的記憶體突然暴增。
- 「效能分析器」工具可讓你細部分析 App。如果要調查已知的效能問題就特別有用。
疑難雜症 (Troubleshooting)
WebIDE 的其他使用問題，請參閱疑難雜症頁。
Mozilla 開發者社群網站 (MDN) 原文連結：WebIDE
你也可閱讀中文版的《WebIDE》；並參閱 MDN 上的更多 Firefox OS 或 Marketplace 相關文章。
原文文章將不定期有所增刪，我們也將儘快更新中文版本，以期讓開發者能隨時看到最新的內容。
