Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

應用程式管理員 (App Manager)

「應用程式管理員 (App Manager)」為 Firefox 桌面版的新工具,具備多樣的有效工具,可透過開發者的瀏覽器,直接於 Firefox OS 手機與 Firefox OS 模擬器 (Firefox OS Simulator) 中進行 HTML5 Web App 的測試、佈署、除錯等作業。

應用程式管理員適用於 Firefox OS 1.2 或更高版本。如果你正為 Firefox OS 1.1 開發 App,則請參閱《Firefox OS 1.1 Simulator》一文。

應用程式管理員具備下列元件:

  • 「Apps」面板將管理本端 App (即位於你電腦上的 App 原始碼) 與托管 (Hosted) 於外部的 App,讓開發者能在自己的裝置或模擬器上進行封裝與安裝作業,並透過 Toolboxes 除錯。
  • 「Device」面板則顯示已連線裝置的相關資訊,包含 Firefox OS 的版本、所使用裝置 API 的必要權限、已安裝的 App 等。
  • Toolboxes 集合一系列的開發者工具 (網頁主控台、檢測器、除錯器等),將透過 Apps panel 而連上執行中的 App,以利執行除錯作業。

快速設定:

本段將協助開發者儘快設定並執行應用程式管理員。如果你需要進一步詳細資訊,則請略過本段文章而直接觀看下一段《裝置與系統設定》。若發生任何問題,亦可參閱本文最後一段《疑難排解》。

  1. 確認已安裝桌面版 Firefox 26 或更高版本
  2. 開啟應用程式管理員 (可於網址列中鍵入 about:app-manager)
  3. 若你手上並沒有實際的 Firefox OS 裝置:
    1. 先安裝 Firefox OS 模擬器 (Firefox OS Simulator)
    2. 在應用程式管理員底部的工具列中,點選 Start Simulator 再點選已安裝的模擬器名稱 (已安裝的模擬器均應出現)。
  4. 若你擁有 Firefox OS 實體裝置:
    1. 確認目前為 Firefox OS 1.2 或更高版本
    2. 確認已在視窗系統中安裝該款手機的驅動程式
    3. 進入裝置的「Settings」,停用「Screen Lock (Settings > Screen Lock)」並啟用「Remote Debugging (Settings > Device information > More information > Developer)」
    4. 另為 Firefox 桌面版安裝 ADB Helper 附加元件
    5. 使用 USB 纜線銜接裝置與電腦
    6. 接著應可於應用程式管理員的底部看到裝置名稱,點選該裝置
  5. 底部應顯示「Connected to: xxx」
  6. 點選 Apps panel 並新增 App;封裝式 (Packaged) 或托管式 (Hosted) App 均可
  7. Refresh 按鈕將驗證該 App 並安裝於裝置/模擬器中
  8. Debug 按鈕則銜接開發者工具與執行中的 App
  9. 若遇上任何錯誤,可參閱〈疑難排解〉章節

裝置與系統設定

使用應用程式管理員前的第一件事,就是必須正確設定現有的系統與手機。本段將逐步說明各個步驟。

需要 Firefox 1.2 或更高版本

確認裝置目前為 Firefox OS 1.2/Boot2Gecko 1.2 或更高版本。若要檢查目前 Firefox OS 版本,可點選 Settings > Device Information > Software

如果尚未安裝必要的 Firefox OS 版本,則根據手機型號的不同,你可能必須安裝 Firefox 1.2 或更高的 nightly 版本,或自行透過原始碼進行設定與建置 (Build)。

目前可用的建置:

若要建構自己的 Firefox OS 1.2 或更高版本,請參閱 Building and installing Firefox OS 說明,並從 Firefox OS build prerequisites 著手開始。

遠端除錯 (Remote debugging)

接著必須啟動 Firefox OS 中的遠端除錯 (Remote debugging) 功能。點選Settings > Device information > More information > Developer,最後勾選 Remote Debugging 方塊即可。

ADB 或 ADB helper

透過 Android Debug Bridge (ADB) 處理裝置與電腦之間的連線作業。現有 2 種 ADB 執行方式:

  • 讓 Firefox 直接處理 ADB (建議使用)。先安裝 ADB Helper 附加元件可簡化相關流程。安裝 ADB Helper 之後就不需再安裝 ADB,也不需再輸入 adb forward 指令。此附加元件將處理所有作業。

    下載 ADB Helper 附加元件
  • 手動操作 ADB。你必須自行下載並安裝 adb (可參閱 Get the Android SDK),再於終端機內鍵入下列指令,以啟動轉發通訊埠 (Port forwarding):
    adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
    另請注意,每次只要重新啟動或重新插拔手機,均必須重複上述動作 1 次。

注意:只要安裝 ADB Helper 附加元件,就不需執行此指令。

將裝置連上應用程式管理員

完成所有設定之後,就可將裝置連上電腦並啟動應用程式管理員:

  1. 以 USB 纜線銜接裝置與電腦。
  2. 進入 Settings > Screen Lock 並取消勾選 Lock Screen,以停用裝置的螢幕鎖定功能。一旦螢幕鎖定之後,手機與電腦的連線將隨之中斷,也就無法進行除錯作業。因此最好先停用此功能。
  3. 啟動應用程式管理員 — 到 Firefox 桌面版中點選「工具 (Tools)」>「網頁開發者 (Web Developer)」>「應用程式管理員 (App Manager)」選單;或於網址列中鍵入 about:app-manager
  4. 應用程式管理員分頁的底部可看到連線狀態顯示列 (如下圖所示)。只要點選「Connect to localhost:6000」按鈕即可連線裝置。
  5. 若連線成功,裝置畫面隨即出現「An incoming request to permit remote debugging connection was detected. Allow connection?」對話框。按下「OK」鈕 (你可能必須按下手機的電源鍵,才會看到該對話框)。接著應會更新連線狀態列並顯示「Connected to B2G」。此時也將出現「Disconnect」按鈕,以利隨時中斷連線。

另請注意,位於連線狀態列中的其他控制鈕,可讓你銜接模擬器與應用程式管理員 (將於下一段中說明),並更改連線所使用的通訊埠。若要更改通訊埠,則必須啟動該通訊埠的「轉發通訊埠 (Port forwarding)」功能。可參閱上述的啟動轉發通訊埠

使用 Firefox OS Simulator 附加元件

如果你手上還沒有實際的 Firefox OS 裝置可搭配 App Manager,也能透過 Firefox OS 模擬器 (Firefox OS Simulator) 附加元件體驗應用程式管理員。請先為自己的作業系統安裝合適的模擬器:

安裝 Firefox OS 模擬器

注意:目前僅有 Firefox OS 1.2 模擬器。未來將提供更多版本選擇。

安裝模擬器之後,請透過 about:app-manager 找到應用程式管理員分頁底部的連線狀態列,點選「Start simulator」按鈕。接著將出現至少 3 組按鈕:

  • 「Firefox OS 1.3」、「Firefox OS 1.2」或類似的呈現方式:左邊按鈕將顯示目前安裝的模擬器版本。點選按鈕即可連線至模擬器。
  • 「Add」:中間按鈕則提供本文所提到的模擬器安裝鏈結,讓你新增更多版本的模擬器 (Firefox OS 1.2、Firefox OS 1.3 等)。
  • 「Cancel」:右邊按鈕可取消連線。

注意:模擬器 (1.2 與 1.3 版) 目前回報 1 組錯誤的 Gecko user agent 字串:可參閱 bug 964598 進一步了解。

「Apps」面板

所有要件設定完畢之後,就從「Apps」面板開始了解應用程式管理員的功能吧。先透過 Apps 面板將現有 App 送入裝置中並進行除錯:

  • 若要安裝本端 App,則請點選「Add Packaged App」按鈕旁的「+」加號按鈕,再從檔案選擇對話框中找到放置該 App 的目錄即可。
  • 若要安裝外部的托管式 (Hosted) App,請將該 App manifest 檔案的絕對路徑輸入「Add Hosted App」對話框中,再點選「+」加號按鈕。

視窗右側隨即顯示 App 的相關資訊,如下圖所示:

Manifest 檔案編輯器 (Manifest Editor)

從 Firefox 28 開始,「Apps」面板即包含編輯器功能,可用於 App 的 manifest 檔案:

除錯

此時點選「Update」就會更新 (或安裝) 裝置上的 App。點選「Debug」則會連上工具箱,以利直接對程式碼進行除錯:

注意:你可能會玩工具箱玩到上癮 — 快試著修改 DOM、CSS 等。接著就能看到裝置即時反應出更新的效果。相關更新均將儲存於已安裝的 App 程式碼中,下次再開啟裝置中的 App 就能一目了然。

若是 Firefox 28 之前的版本,這些工具將顯示於另一個獨立視窗中。從 Firefox 28 開始,這些工具均顯示於應用程式管理員之內的獨立分頁中;就接在「Apps」與「Device」分頁之下。此分頁將顯示目前 App 的圖示,因此極容易辨識:

錯誤

如果新增 App 失敗 (可能是 URL 錯誤,或選到了封裝式 App 的資料夾),則該頁仍會顯示所新增的 App 項目,也會包含錯誤資訊。

另外只要將滑鼠游標移至視窗左邊的 App 名稱/說明之上,在「X」按鈕出現時按下,即可在此畫面中刪除該 App。請注意此動作並不會刪除裝置中的 App。必須從裝置上手動移除 App,才會真正刪除裝置中的 App。

「Device」面板

「Device」面板將顯示已連線裝置的相關資訊。另可透過「Installed Apps」視窗中開啟裝置上的 App 並進行除錯。

注意:依預設值,此處並不會顯示 Certified App。可參閱 Certified App 的除錯方式

「Permissions」視窗將針對目前裝置上的不同 Web API,顯示必要的權限。

最後可按下「Screenshot」按鈕,即可對目前裝置的顯示項目拍下截圖。此截圖將以 Firefox 的新分頁開啟,讓你決定是否要儲存該圖。

Certified App 的除錯

目前僅限搭載 Firefox OS 1.2 開發版本的裝置,才能進行 Certified Apps 的除錯。若你手上的裝置正執行開發版本,則可將設定檔中的「 devtools.debugger.forbid-certified-apps」變更為「false」,即可開始 Certified App 的除錯。可參閱下列步驟:

  1. 在電腦的終端/主控台上輸入下列指令,以進入裝置的 filesystem:

    adb shell

    接著命令列提示將轉為 root@android

  2. 接著以下列指令暫停執行 B2G:

    stop b2g
  3. 進入以下目錄:

    cd /data/b2g/mozilla/*.default/
  4. 以下列指令更改 prefs.js 檔案:

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
  5. 在完成編輯並儲存檔案之後,再以下列指令重新啟動 B2G:

    start b2g
  6. 輸入 exit 指令以退出 Android 的 filesystem 之後,就會回到正常的終端畫面。

  7. 最後再次連回應用程式管理員,就能看到 Certified App 出現,即可進行除錯。

注意:如果你想把這個偏好設定加入自己的 Gaia 版本,則可執行 DEVICE_DEBUG=1 reset-gaia

在應用程式管理員中執行自訂的版本

只要透過 Firefox OS 模擬器,即可於應用程式管理員中執行自訂的 B2G Desktop 與 Gaia 版本。可參閱《Running custom Firefox OS/Gaia builds in the App Manager》進一步了解。

疑難排解

如果系統無法辨認裝置:

還是無法讓自己的裝置連上應用程式管理員或啟動模擬器嗎?快讓我們知道到 bugzilla 回報錯誤

文件標籤與貢獻者

 此頁面的貢獻者: chrisdavidmills, trevorh, cheesepizza741, MashKao
 最近更新: chrisdavidmills,