淺談新開發工具 WebIDE (上)

WebIDE 將取代「應用程式管理員 (App Manager)」。其功能如同應用程式管理員，可透過 Firefox OS 模擬器 (Firefox OS Simulator) 或實體 Firefox OS 裝置，執行 Firefox OS App 並除錯。

不僅如此，WebIDE 亦具備編輯環境，可建立並開發 Firefox OS App。另可透過樹狀圖呈現 App 中的所有檔案，以利儲存與編輯作業。還有 2 組 App 範本可帶領你從頭開發 App。

你必須先在 WebIDE 中設定一個或多個執行環境 (Runtime)。Runtime 即是 App 的執行與除錯環境。不論是用 USB 連接線串接桌面版 Firefox 與 Firefox OS 裝置；或是桌面版 Firefox 上安裝 Firefox OS 模擬器，都可當做執行環境。

接著就可建立 App 或啟動現有的 App。 如果你要建立全新的 App，內建範本將提供你所需的資料目錄架構與最簡單的樣板；或有更完整的範本提供 Privileged App 所需要的 API。WebIDE 將以樹狀圖顯示 App 的檔案，讓你只要透過內建的編輯器即可修改並儲存檔案。當然，你也能選用自己習慣的編輯器開發 App，只用 WebIDE 除錯亦可。

最後，你可將 App 安裝於執行環境之中並執行。也能透過常見的開發者工具，如檢測器 (Inspector)、主控台 (Console)、JavaScript 除錯器 (JavaScript Debigger) 等，檢查並修改 App。

系統需求

若要以 WebIDE 開發 App 並除錯，必須使用 Firefox 33 或更高版本。如果要在實際 Freifox OS 裝置上測試 App，則該款裝置需搭載 Firefox OS 1.2 或更高版本，並搭配 1 組 USB 連接線。

如果要針對 Firefox OS 1.2 或更高版本開發 App，則限用 WebIDE 進行開發。

啟動 WebIDE

進入「網頁開發者」選單，點擊「WebIDE」即可將之啟動。亦可按下鍵盤的「Shift + F8」快捷鍵：

左邊的「開啟應用程式 (Open App)」下拉式選單中，你可啟動現有的 App 或建立新的 App。右邊的「選擇 Runtime (Select Runtime)」下拉式選單中，你可選擇執行環境或設立新的執行環境。

在選擇了執行環境並開啟 App 之後，才可以按中間的「Run」、「Stop」、「Debug」按鈕。

設定執行環境

「選擇 Runtime」選單內，共分為 3 種執行環境：

• USB 裝置 (USB Devices)：透過 USB 銜接 Firefox OS 裝置
• 模擬器 (Simulators)：你已經安裝的 Firefox OS Simulator
• 自訂 (Custom)：透過自定義的名稱或埠 (port) 來連結 WebIDE。

第一次點開下拉式選單，你不會看見任何的執行環境：

接下來會帶你新增執行環境。

連結 Firefox OS 裝置

在開始連結 Firefox OS 裝置之前，必須先完成下列設定：

• 檢查 Firefox OS 版本：確定你的裝置可以執行 Firefox OS 1.2/Boot2Gecko 1.2 或更高版本。可至「設定 (Settings)」App 中尋找「裝置資訊 (Device Information)」>「軟體 (Software)」確認 Firefox OS 的版本。如果版本太舊，則可到 developer phone guide 頁面找到你的裝置，再完成相關更新步驟。
• 啟動「遠端除錯 (Remote debugging)」：進入裝置的「設定」App ，找到「開發者 (Developer)」：
  • Firefox OS 1.3 或之前的版本：請勾選「遠端除錯」方塊
  • Firefox OS 1.4 或之後的版本：又分「僅 ADB」與「ADB 與開發工具 (ADB and DevTools)」共 2 個選項。請選擇「ADB 與開發工具」。
• 關閉裝置的螢幕鎖：在裝置的「設定」中，找到「螢幕鎖 (Screen Lock)」並關閉此功能。因為只要鎖住螢幕就會與裝置斷線，如此就無法除錯了。
• 如果你想要對 Certified App (包含內建的 App) 進行除錯：請參閱〈Certified App 除錯〉章節。

如果有其他 Android 裝置已連上你的電腦，請先中斷連線。再透過 USB 銜接裝置與電腦。則你的裝置應該會出現在「USB 裝置」之下：

如果還是沒看到你的裝置，請詳見〈疑難雜症〉頁面。

新增模擬器

Firefox OS 模擬器架構在 Firefox OS 之上，可在桌機上模擬 Firefox OS 裝置。且其執行的視窗尺寸、使用者介面、內建的 App 也都和 Firefox OS 裝置相同，更能模擬 Firefox OS 裝置的 API。

如此在許多情況下，就算你沒有實際裝置，也能測試或除錯自己的 App。

整個模擬器大到不能內建在 Firefox 之中，所以包裝成 Firefox 的附加元件。當你在 Runtimes 下拉式選單中點選「Install Simulator」，將會帶領你到安裝不同版本 Firefox OS 模擬器的頁面。

你可以安裝所有需要的模擬器。因為模擬器容量頗大，所以請耐心下載。當你安裝模擬器完畢，就能關閉「Extra Components」視窗。已安裝的模擬器就會出現在「Runtimes」的下拉式選單裡面：

若要進一步了解模擬器，詳見該頁。

自訂執行環境

透過可自訂的執行環境，你可用任意的 hostname 和埠 (port) 去連結遠端裝置。

Firefox OS 裝置與 Android 裝置，均是透過「Android Debug Bridge」這個程式 (也稱為 ADB) 連上桌機。WebIDE 已預設使用名為「ADB Helper」的附加元件。此簡單的附加元件可幫你安裝 ADB 並設定好「埠」的轉址，進而簡化相關程序。接著 Firefox 桌面版的工具就能和裝置交換訊息了。

上述功能在大部分情況下都很方便。但有時候你可能不想透過 WebIDE 使用 ADB (例如你想要直接用命令列來跑 ADB)。這時你可使用 adb forward 指令來使用特定的「主機 (Host)」與「埠」。

如果你也想用 WebIDE 及命令列使用 ADB，就要停用 ADB Helper 附加元件，並透過「自訂 (Custom)」選項、輸入你傳送給 adb forward 的「主機」與「埠」，即可連接 WebIDE。

ADB Helper 目前還不支援連結 Firefox for Android。如果你想透過 WebIDE 連上 Firefox for Android，就必須設定自己的埠轉址 (Port forwarding) 與自訂的執行環境。可進一步參閱 connecting to Firefox for Android using ADB。

選擇執行環境

當你設定好執行環境之後，就能在「選擇 Runtime (Select Runtime)」中點選。

• 如果你選擇「模擬器」，WebIDE 就會啟動模擬器。
• 如果你選擇 WebIDE 已連結的 Firefox OS 裝置，則該裝置就會出現對話框確認是否要連結。這時請點選「OK」。

WebIDE 工具列中間的「play」按鈕這時已經可按。點下後就會執行所選的執行環境。

執行環境的動作

選取執行環境之後，「Runtimes」下拉式選單會多出 3 個選項：

• Runtime 資訊 (Runtime Info)：現在執行環境的資訊
• 權限表 (Permissions Table)：顯示目前執行環境的 App 權限，囊括各個使用中的 API 與 App 型態，分別是：可用的 (✓)、禁用的 (✗)、需要使用者認證的 (!)。
• 擷圖 (Screenshot)：可取得目前執行環境的擷圖

在初步看過 WebIDE 的介面之後，緊接著就用這個新工具打造自己的 App 吧。請別錯過即將上刊的《淺談新開發工具 WebIDE (下)》。

Mozilla 開發者社群網站 (MDN) 原文連結：WebIDE

你也可閱讀中文版的《WebIDE》；並參閱 MDN 上的更多 Firefox OS 或 Marketplace 相關文章。

原文文章將不定期有所增刪，我們也將儘快更新中文版本，以期讓開發者能隨時看到最新的內容。