Firefox OS 1.1 Simulator

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 的中斷點。

本篇指南涵蓋下列主旨：

• 模擬器附加元件的安裝方式
• 新增、移除、更新 App 的方式
• 檢驗 manifest 檔案
• 模擬器執行方式
• 應如何連接開發者工具 (如 JS debugger) 與模擬器所執行的 App
• 應如何取得付費 App 的測試用收據
• 應如何將 App 送入已連線的裝置
• 與實際 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 並包含所選類型的測試收據。

檢驗 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

附掛開發者工具

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

若要為模擬器附掛開發工具，則可按下任一 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 裝置中。

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，也只會得到錯誤的報告或結果：

• Telephony
• WebSMS
• WebBluetooth
• Ambient Light
• Proximity
• Network Information
• navigator.onLine and offline events
• Vibration

獲得協助

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

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

透過 about:config 即可建立 [email protected]，接著將之設定為整數值 0，並停用/重新啟用附加元件即可。有關模擬器作業的其他訊息，均將顯示於錯誤主控台 (Error Console) 中；或是較新版本 Firefox 的瀏覽器主控台 (Browser Console)。