淺談新開發工具 WebIDE (下)

你是熱血的 App 開發者,而且早已累積許多 App 準備大展身手嗎?Mozilla 繼「應用程式管理員 (App Manager)」之後,再度提供新的 App 開發工具 ─ WebIDE,如果你才剛看這篇文,當然應該要先看過《淺談新開發工具 WebIDE (上)》。

 

建立並開啟 App

在「開啟應用程式 (Open App)」選單之下共有 3 個選項:
1). 新增應用程式… (New App…)
2). 開啟封裝的應用程式… (Open Packaged App…)
3). 開啟架設的應用程式… (Open Hosted App…)

webide-open-app-empty

建立新的 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 總覽頁面:

webide-new-app-editor

你可隨時透過左側的檔案樹狀圖,回到 App 總覽頁面。

Manifest 檔案檢查

WebIDE 會自動檢查 manifest 檔案的常見問題。只要發現問題,就會在 App 總覽頁面中顯示並說明錯誤原因:

webide-invalid-manifest

原始碼編輯器快捷鍵

請至《WebIDE》查看原始碼編輯器的預設快捷鍵表格。

在開發者工具的「設定」中可找到「編輯器偏好設定 (Editor Preferences)」,可進一步選擇使用 Vim、Emacs,或 Sublime Text。

你可前往 about:config,選擇 devtools.editor.keymap 再指定「vim」或「emacs」或「sublime」。完成設定之後,只要是使用該原始碼編輯器的開發者工具,都會套用你指定的快捷鍵。但你必須重新開啟編輯器之後,變更才會生效。

從 Firefox 33 起,相關快捷鍵設定均已加入開發者工具的「編輯器偏好設定」之中。不需進入 about:config 亦可完成設定。

程式碼補齊

當編輯 CSS 和 JavaScript 時,編輯器會自動補齊建議字串。 CSS 自動補齊功能預設為開啟:

webide-css-autocomplete

按「Control + Space」就可顯示 JavaScript 的自動補齊建議:

webide-js-autocomplete

行內說明文件

編輯器也可顯示 JavaScript 的行內說明文件。只要按下「Shift + Space」,就會跳出目前滑鼠游標放置的條目之說明:

webide-js-inline-docs

在提示視窗中點選 [docs] 連結,就會帶你到該條目所對應的 MDN 頁面。

儲存檔案

你必須儲存檔案之後,才能觀看檔案修改成果。如果是修改過但尚未儲存的檔案,則樹狀圖的檔名旁邊將顯示星號。你可透過選單或按下「Control+S」,即可儲存檔案 (Mac OS X 則為「Command+S」)。

移除專案

要從 WebIDE 移除 App,可在 App 總覽頁面點選「移除專案 (Remove Project)」。

執行並除錯 App

當準備好要執行 App 時,必須從「選擇 Runtime」下拉式選單中選取任一執行環境。如果沒有適合的執行環境,請參考設定執行環境

WebIDE 工具列中間的「Play」按鈕現已可點擊。點下之後就會在你所選的執行環境中安裝並執行 App:

webide-running

這時按下「Pause」就會出現開發者工具的工具箱,以利你對已連結的 App 進行除錯:

webide-debugging

這裡會根據所選的執行環境而提供除錯工具,且必定會提供如檢測器 (Inspector)主控台 (Console)JavaScript 除錯器樣式編輯器 (Style Editor)效能分析器 (Profiler)程式碼速記本 (Scratchpad) 等基本工具。就如同一般網頁,透過這些工具做出的修改,都可以即時在 App 中看到結果,但僅暫存。相反的,透過編輯面板修改的檔案,都會直接儲存到硬碟之中,但必須重新啟動 App 才能看到結果。

Certified App 的除錯

若是搭配模擬器,則只要已選擇了執行環境,再點擊 App 的下拉選單,則不僅僅是你的 App,只要是該執行環境正執行中的所有 App 都會列在上面,包含Certified App。這時即可除錯所你選擇的 App:

webide-debugging-builtin

不過,如果要在實際裝置除錯 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 亦將重新啟動。
  • 模擬器
    • 模擬器已經預設開啟 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 相關文章。

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

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

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