mozilla

Firefox OS 1.1 Simulator

本頁將說明「舊版」的 Firefox OS 模擬器 (Firefox OS Simulator)。只有在開發 Firefox 1.1 所適用的 App 時,才使用 1.1 版模擬器。且本版模擬器僅能安裝於 Firefox 24 或 Firefox 25 之上。

如果要針對 Firefox OS 1.2 或更高版本開發 App,則必須使用「應用程式管理員 (App Manager)」

若需要任何協助,請透過 dev-developer-tools 郵件群組#devtools on irc.mozilla.org 發問。

Firefox OS 模擬器 (Firefox OS Simulator) 附加元件,可讓你在桌機上測試自己的 Firefox OS App。若與實際裝置相較,模擬器可協助開發者順利完成「撰寫─測試─除錯」的程序,而且你還不用真的弄到實際設備就能夠測試 App。

此附加元件基本上包含:

  • 模擬器:其內有 Firefox OS Desktop Client,屬於 Firefox OS 較高層級的版本,可於桌機中執行。模擬器所具備的某些附加模擬功能,甚至是標準 Firefox OS 桌面版所沒有的。
  • Dashboard:此為 Firefox 瀏覽器所管理的工具,可用以啟動/停止模擬器,並可安裝、除錯、解除安裝模擬器所執行的 App。Dashboard 亦可協助將 App 送入實際裝置,針對常見問題而檢查 App 的 manifest 檔案。.

下方截圖則是以模擬器所進行的除錯作業。

「Dashboard」即於右上的 Firefox 分頁中執行。我們在這裡新增了「Where am I?」的封裝式 (Packaged) App。左上方就是模擬器正執行的 App。這裡同時也連上了除錯工具,就位在視窗底端。你也可以看到我們設定了 App 的中斷點。

本篇指南涵蓋下列主旨:

若要用模擬器對實際的 Apps 進行除錯,請參閱《Firefox OS 模擬器簡易攻略》頁面。

安裝「Firefox OS Simulator」附加元件

此模擬器軟體已封裝並發佈為 Firefox 的附加元件。安裝步驟為:

  1. 開啟 Firefox 並前往 addons.mozilla.org 上的 Simulator 頁面
  2. 點選「Add to Firefox」。
  3. 下載附加元件完畢,系統隨即提醒你安裝。點選「立刻安裝 (Install Now)」。

由於附加元件的檔案大小有所不同,Firefox 可能於安裝期間暫停數秒,並可能顯示「注意:發現容易停止回應的程式碼 (Warning: Unresponsive script)」對話框。如果出現此對話框,就點選「繼續 (Continue)」等到安裝作業結束即可。自 Firefox 27 起應該就不會再出現此問題。

一旦安裝模擬器附加元件完畢,Firefox 將定期檢查是否有更新版本,隨時保持最新版本。

模擬器安裝期間隨即自動開啟 Dashboard。另外只要點選「Firefox」選單 (若是 OS X 與 Linux,則為「工具」選單),再點選「網頁開發者 (Web Developer)」→「Firefox OS Simulator」,都可再開啟 Dashboard:


Dashboard 可讓你將 App 新增至模擬器內並執行之。看起來就像下圖:

新增、移除、重新整理 App

新增 App

如果要將封裝式 (Packaged) App 新增至模擬器中,則請開啟 Dashboard,點選「Add Directory」並找到 App 的 manifest 檔案

若要新增托管式 (Hosted) App,則於「URL for page or manifest.webapp」的文字框中輸入網址,再點選「Add URL」。如果網址指向 manifest 檔案,就會使用該 manifest 檔案;反之,則 Dashboard 將針對該網址產生 manifest 檔案。所以只要輸入網站網址,都可新增該網站作為 App。

在新增 App 時,Dashboard 將為 manifest 檔案執行一系列的測試,檢查是否有常見問題。可參閱下方 Manifest 檔案檢驗以了解測試細節。

除非 manifest 檔案檢驗程序真的發現了 App 的錯誤,否則 Dashboard 均將自動於模擬器中執行你的 App。

管理 App

一旦新增了 App,就會出現在管理程式的 App 清單中:

各個項目均提供了 App 的相關資訊:

  • App 的名稱 ─ 取自於 manifest 檔案
  • App 的類型 ─ 可能為「Packaged」、「Hosted」、「Generated」之一
  • 其 manifest 檔案的連結
  • manifest 檔案檢驗的結果

另外會提供 4 項指令:

  • 「Refresh」:在變更過 App 之後,可透過此指令更新並重新載入模擬器中的 App。此指令亦可讓 Dashboard 再次檢驗 manifest 檔案。如果變更過 App 之後卻沒有自動反應在「installed app:」中,則必須重新整理才能套用變更。
  • 「Connect」:此指令可銜接開發工具與指定的 App。如果尚未執行 App 與模擬器,則 Dashboard 將啟動之。
  • 「Remove」(也就是「X」):此指令可為 Dashboard 與模擬器移除 App。只要開啟了 Dashboard 分頁,亦可取消此動作。
  • 「Receipt」:此指令可針對付費 App 測試收據的驗證作業。在選擇了所要測試的收據類型之後,將重新安裝該 App 並包含所選類型的測試收據。

從模擬器視窗重新整理 App:在 App 執行時,只要透過選單列與相關快捷鍵,即可從模擬器視窗直接更新並重新載入 App。

檢驗 Manifest 檔案

當提供 manifest 檔案時,管理程式將執行某些檢驗測試,所回報的問題可分為 3 大類:

  • manifest 錯誤:這種問題將導致 App 無法執行。
  • manifest 警示:這種問題將導致 App 無法正確運作。
  • 模擬器特定警示:目前模擬器尚未支援此 App 所使用的功能。

管理程式將總結 App 所遇到的問題。可點選摘要以獲得更多詳情。

Manifest 檔案錯誤

下列狀態均將由 Dashboard 回報為錯誤。也就是說,你必須修復之後才能在模擬器中繼續執行 App:

  • manifest 檔案沒有必要的「name」欄位。
  • manifest 檔案為無效 JSON。
  • 此 App 屬於托管式 App,但其 manifest 檔案中的類型 (type) 欄位為「Privileged」或「Certified」;而此 2 種類型僅限用於封裝式 App。
  • 常見的 appCache 錯誤 (封裝式 App 無法使用 appCache,對 manifest 網址的請求,回傳了 HTTP 重新導向狀態或 HTTP 錯誤狀態)

如果新增的 manifest 檔案缺少了「name」欄位,就會出現如下圖的結果:

Manifest 檔案警示

下列 manifest 檔案的問題,Dashboard 均將回報為警示:

  • 缺少圖示。
  • 圖示低於 128 像素:提交至 Marketplace 的所有 App,其代表圖示均必須為至少 128 像素的方塊圖。
  • 無法辨別「type」欄位。
  • manifest 檔案所請求的「權限」無法辨別。
  • manifest 檔案所請求的「權限」遭拒。
  • manifest 檔案所請求的「權限」無法決定其存取作業。

模擬器特定警示

最後,針對 App 所要使用的 Firefox OS 功能,但模擬器卻尚未支援的情況,管理程式將送出警示:

  • type」欄位屬於「Certified」,但模擬器尚未完整支援 Certified App。
  • manifest 檔案請求「權限」以使用 API,但模擬器尚未支援此 API。

執行模擬器

有 2 種方式可啟動模擬器:

  • 如果要新增、更新、移除 App,或是按下 App 輸入項旁邊的「Run」按鈕,則 Dashboard 就會在模擬器中自動執行 App。
  • 如果按下 Dashboard 左側的「Stopped」按鈕,則模擬器將回到首頁畫面,讓你再瀏覽自己的 App。

不論哪種方法,只要模擬器處於執行狀態,則「Stopped」按鈕會轉成綠色,且按鈕文字也會轉成「Running」。如果要停下模擬器,再按下相同按鈕即可。

模擬器將以獨立視窗顯示,而該模擬畫面將為 320x480 像素,且底部工具列 (Toolbar) 將提供某些額外功能

若要模擬觸控事件,只要點擊滑鼠不放再拖曳即可。所以如果在主畫面按下滑鼠並由右至左拖曳,就可以看到內建的 App 還有你自己新增的 App:

模擬器工具列

在模擬器視窗底部的工具列,由左至右分別為主畫面 (Home)、畫面旋轉 (Screen Rotation)、地理位置定位 (Geolocation) 共 3 個按鈕:

  • 主畫面」可回到主畫面 (或長按不放則可進入工作清單)。
  • 畫面旋轉」可切換裝置的橫向、直向畫面;即產生 orientationchange 事件。
  • 地理位置定位」將觸發對話框,詢問使用者是否要分享自己的地理位置。這個功能可能會套用你目前的座標,或提供自訂座標。App 可搭配 Geolocation API 而提供此功能。

模擬器選單列 (Menubar)

在頂端的選單列上即提供多項有用的指令,讓你達到更高的開發效率:

  • File -> Quit (Ctrl/Cmd - Q):關閉模擬器
  • App -> Refresh (Ctrl/Cmd - R):重新整理執行中的 App

若於鍵盤上使用「App Refresh」 指令快捷鍵,則開發 App 就更像是撰寫網頁一樣:

  • 更改程式碼 (並依需要而重新執行自己的程式設計工具,如 volo / yeoman / grunt)
  • 按下快捷鍵,即可重新整理正於模擬器中執行的 App

「Refresh App and Clear Data」隱藏快捷鍵:針對模擬器為 Apps 所儲存的資料,有時若能清除相關資料更有利於開發作業。因此模擬器亦提供隱藏版的快捷鍵「Shift - Ctrl/Cmd - R」。在清除下列資料時,此快捷鍵亦可重新整理正執行中的 App:

  • localStorage / sessionStorage

  • cookies

  • indexedDB

  • appCache

附掛開發者工具

使用者可為模擬器附掛開發工具,讓 App 的除錯作業更順利。目前僅能附掛JavaScript 除錯器 (JavaScript Debugger)網頁主控台 (Web Console)樣式編輯器 (Style Editor)效能分析器 (Profiler)網路監測器 (Network Monitor)。當然,我們仍將持續支援更多開發工具

某些工具僅能用於 Firefox 的 Beta、Aurora,或 Nightly 版本。

若要為模擬器附掛開發工具,則可按下任一 App 的「Connect」按鈕:

Dashboard 分頁下方隨即開啟開發者工具面板,並銜接 App:

網頁主控台 (Web Console)

如果勾選了「Stopped/Running」開關下方的「Console」方塊,則執行模擬器時會開啟錯誤主控台 (Error Console)。透過這個通用的主控台物件,你的 App 均將由主控台所記錄。

除錯器 (Debugger)

透過除錯器,可針對執行中的 App 逐行檢查其 JavaScript 程式碼、管理中斷點、監看表示式,以更迅速追蹤錯誤與問題。進一步了解除錯器

樣式編輯器 (Style Editor)

可檢查並編輯 App 中設定的 CSS 檔案。你所進行的變更亦將即時套用至 App;而不需再重新整理。進一步了解樣式編輯器

效能分析器 (Profiler)

若銜接 App 與效能分析器,即可找出 JavaScript 程式碼耗時過長的部分。效能分析器將對目前 JavaScript 的 Call stack 定期取樣,並編寫樣本的統計資料。進一步了解效能分析器

網路監測器 (Network Monitor)

新的網路監測器提供友善介面,可針對 App 所啟動的網路請求,分析其狀態、標頭、內容、時間點等資訊。進一步了解網路監測器

收據 (Receipt)

若你正開發付費 App,就應該在有效 (以加密方式簽署) 收據上,測試自己的收據驗證代碼 (此代碼將驗證使用者是否已購買了 App 或收到退款,接著通知使用者並鎖定/解鎖 App 的功能)。

模擬器的 Dashboard 對各個 App 均提供了「Receipts」選單,讓你可選擇「Valid」、「Invalid」、「Refunded」測試收據而安裝 App。只要選擇你想要測試的收據類型,則 Dashboard 就會從 Marketplace 收據服務中取得該類型的測試收據,並在模擬器中安裝 App:

直接傳輸 (Push to device)

如果你手上已經有 Firefox OS 裝置並連上了模擬器,就可以從 Dashboard 直接將 App 送進裝置。

連上裝置

根據指南中的說明,就可順利將 Firefox OS 裝置連上桌機。另請注意,模擬器附加元件已經包含了 ADB,所以你不需再次安裝。

將 App 送入裝置

設定完畢之後,就可透過 USB 銜接裝置與桌上型電腦。你可以看到 Dashboard 左邊出現「Device connected」的註記,而且各個 App 項目上都會出現新的「Push」指令:

按下「Push」就會把 App 安裝進 Firefox OS 裝置中。

手動步驟:

  • 一旦將 App 送入裝置之後,就必須手動關閉並重新啟動,才能取得更新內容。

  • 如果你更新了 manifest 檔案 (如 App 的名稱、方向、類型、權限),就必須重新啟動作業系統,才能讓變更生效。

Firefox OS 裝置連線確認

每次只要重新啟動裝置,就必須確認裝置上的第一次「Push」請求:

Linux 上的疑難排除

如果建立 udev 規則之後還是無法銜接裝置,則請參閱這個問題

模擬器的限制

請注意,Firefox OS 模擬器仍無法提供完美的模擬作業。

硬體限制

模擬器除了螢幕尺寸的限制之外,也無法模擬 Firefox OS 裝置的硬體 (例如 CPU 速度或可用的記憶體容量)。

音訊/視訊編碼

下列編碼 (Codecs) 因硬體加速解碼而有所不同,因此尚未支援:

  • MP3
  • AAC
  • H.264 (MP4)
  • WebM

也就是說,若 App 或網站 (如 Youtube) 使用這些編碼,則模擬器將無法測試其中的視訊回播功能。

尚未支援的 API

一般來說,因為桌上型電腦無法使用支援硬體,所以可於裝置上運作的特定 API,可能無法用於模擬器之上。我們另外針對某些 API (例如 Geolocation 地理位置定位) 建構了模擬功能,未來版本亦將新增更多模擬 API。但目前仍尚未支援下列 API。如果使用了這些 API,也只會得到錯誤的報告或結果:

獲得協助

如果你發現了任何錯誤,請到 GitHub 提交這些錯誤。如果有任何問題,也請透過 dev-developer-tools 郵件群組或到 #devtools on irc.mozilla.org 上發問。

啟動詳細資訊 (verbose) 記錄的方法

透過 about:config 即可建立 extensions.r2d2b2g@mozilla.org.sdk.console.logLevel,接著將之設定為整數值 0,並停用/重新啟用附加元件即可。有關模擬器作業的其他訊息,均將顯示於錯誤主控台 (Error Console) 中;或是較新版本 Firefox 的瀏覽器主控台 (Browser Console)。

 

 

Document Tags and Contributors

Contributors to this page: MashKao
最近更新: MashKao,