這裡將透過 Firefox OS 模擬器 (Firefox OS Simulator) 對 Web Apps 進行很簡單的除錯 (但要找的 bug 有點多)。
整個簡易攻略分成 6 個部分，各自使用不同的診斷/除錯工具，包含 manifest 檢驗功能、網頁主控台 (Web Console)、JavaScript 除錯器 (JavaScript Debugger)、網路監測器 (Network Monitor)、樣式編輯器 (Style Editor)、收據 (Receipts) 測試。
這 6 個部分各自獨立。就算你只挑其中幾段來看，應該也能看得懂而不會有銜接上的問題。
manifest 檢驗功能
GitHub 上的 firefoxos-simulator-walkthrough 現有不同版本的 App。如果你想從第一段開始了解 App 的修正程序，可從 App 的 whereami-1 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)，並開啟了 Dashboard。
首先我們點選「Add Directory」，將 App 新增至 Dashboard 中，再選擇 manifest 檔案。畫面如下：
點選「(2 errors and 0 warnings)」就會看到：
畫面將清楚顯示錯誤訊息。此時看到「manifest.webapp」就會發現少了 1 組「name」：
{
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
我們把「name」欄位加入 manifest 檔案之後儲存，再點選 Dashboard 中的「Refresh」：
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
此時 Dashboard 應該會告知沒有錯誤，也就能執行 App：
但這時就算你按下按鈕，模擬器也不會有任何動作。我們會在下一段中使用 WebConsole 診斷此問題。
使用網頁主控台 (Web Console)
如果你要從這裡開始研讀攻略：
這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-2 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
但此版本的 App 不會執行任何作業。本段透過 WebConsole 診斷出問題。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。這裡必須按下 Dashboard 上的「Connect」按鈕：
隨即自動開啟模擬器視窗並執行 App。而 Dashboard 分頁另將出現網頁主控台 (WebConsole)。
主控台的輸出結果會提示幾項錯誤、警告、訊息。但請注意最後一項：
看來是 App 的程式碼「whereami.js」明顯出了問題。這裡列出程式碼的前幾行：
var whereami = document.getElementById('whereami');
whereami.onclick = function() {
navigator.geolocation.getCurrentPosition(getMap, error);
};
若與 App 的「index.html」相較，則問題明顯是：
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="https://open.mapquestap.com/sdk/js/v7.0.s/mqa.toolkit.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <button id ="where-am-i">Where am I?</button> <div id="map"></div> <script src="scripts/whereami.js"></script> <link media="all" href="style/style.css" type="text/css" rel="stylesheet"> </body> </html>
在 HTML 中的按鈕 ID 是「where-am-i」，而不是我們在前面 JavaScript 中所使用的「whereami」。所以我們修改為：
var whereami = document.getElementById('where-am-i');
whereami.onclick = function() {
navigator.geolocation.getCurrentPosition(getMap, error);
};
接著啟動 App 時雖然沒有問題，但仍未顯示地圖。這時主控台又出現新的訊息：
此訊息是由「whereami.js」程式碼所記錄，指出 Geolocation API 回傳了錯誤，卻沒有說明是哪種錯誤。接著我們可用 JavaScript 除錯器 (JavaScript Debugger) 找出錯誤類型。
使用 JavaScript 除錯器 (JavaScript Debugger)
如果你要從這裡開始研讀攻略：
這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-3 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
此版本 App 的 Geolocation API 將回傳錯誤。所以本段將透過 JavaScript 除錯器 (JavaScript Debugger) 找出到底是哪種問題。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。
在連上 App 的網頁主控台 (WebConsole) 中，點選 Geolocation 錯誤記錄的右側鏈結：
按下「whereami.js:8」鏈結之後，JavaScript 除錯器隨即自動載入相關檔案並跳到有問題的行數。
根據這篇 Geolocation API 參考所述，這裡將由錯誤處理器 (Error handler) 的 error() 屬性送入 code 物件，而我們再透過 error 物件的 code 屬性獲知此特定錯誤的詳細資訊。所以我們點選左側行數為 8 的那一行，即可於 error() 之內設定中斷點：
在 App 之內點選「Where am I?」之後，執行作業就會停在中斷點：
此時只要按下「Add watch expression」的地方並鍵入「error.code」，就會立刻看到其值為「1」：
同樣根據 Geolocation API 參考文件所述，「1」即代表「權限已遭否決」。如果 Web Apps 尚未請求 Geolocation 權限，或使用者尚未許可該權限，都會發生這種錯誤。
這時來看「manifest.webapp」檔案，就會看到我們尚未要求權限：
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
接著修復如下：
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
},
"permissions": {
"geolocation": {
"description": "Needed to tell the user where they are"
}
}
}
儲存「manifest.webapp」之後，再按下 Dashboard 中的「Refresh」。這裡記得要在除錯器停在中斷點時，才能繼續除錯。而當你點選「Where am I?」，App 隨即會要求你分享你的位置。而你允許分享之後仍看不到地圖，接著又在 WebConsole 中找到新的訊息：
此訊息指出 MapQuest API (在 App 中以 script 標籤所指定) 並未正確載入。接著可使用網路監測器 (Network Monitor) 找出問題。
使用網路監測器 (Network Monitor)
如果你要從這裡開始研讀攻略：
這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，對很簡單的 Web App 進行除錯。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-4 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
此版本 App 的網頁主控台 (WebConsole) 將顯示「MQA is not defined」錯誤。所以本段將透過網路監測器 (Network Monitor) 找出未載入 MapQuest API 的原因。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。
在連上 App 的開發者工具中，點選「Network」分頁就會看到下列面板。可以看到「open.mapquestap.com」網域針對「mqa.toolkit.js」資源所發出的請求，從未完全成功過：
成功的請求均標記為綠色。如果我們點選「open.mapquestap.com」網域 (深灰色) 的請求之一，點選「Timings」的細節面板，就會看到 DNS 解析 (DNS resolution) 並未成功，因此該請求從未達到「Connecting」的狀態。
再看到「index.html」檔案，會發現 script 標籤指向錯誤網域。
這裡變更 script 標籤以使用正確的網域：open.mapquestapi.com (於網域名稱內加入缺少的「i」) 之後，即可修復此錯誤。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<button id ="where-am-i">Where am I?</button>
<div id="map"></div>
<script src="scripts/whereami.js"></script>
<link media="all" href="style/style.css" type="text/css" rel="stylesheet">
</body>
</html>
儲存「index.html」並點選 Dashboard 中的「Refresh」。在 App 執行時按下「Where am I?」，系統就會要求你分享你的位置。在你允許分享之後，App 終於顯示地圖：
使用樣式編輯器 (Style Editor)
如果你要從這裡開始研讀攻略：
這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator) 客製化 App 的樣式表 (Stylesheets)。 GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-5 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要使用者點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
此版本的 App 已修復前述的所有錯誤。接著我們將透過樣式編輯器 (Style Editor)，為執行中的 App 即時變更樣式並儲存之。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。
在連上 App 的開發者工具中，點選「Style Editor」分頁就會看到下列面板：
點選左側樣式表清單中的「style/style.css」，並修改 CSS 規則。新的規則會立刻套用至已連線的 App 上：
現在點選樣式表「style/style.css」正下方的「Save」，即可將之儲存回專案中。
使用收據 (Receipts) 測試功能
如果你要從這裡開始研讀攻略：
這一段將透過 Firefox OS 模擬器 (Firefox OS Simulator)，為 Web App 新增付款收據驗證碼。GitHub 上的 firefoxos-simulator-walkthrough 已有不同版本的 App。如果你想從本段開始了解 App 的修正程序，可從 App 的 whereami-6 版本著手，逐步完成此攻略。
這個 App 只會顯示 1 個「Where am I?」按鈕。只要點擊按鈕，則 App 就會透過 Geolocation API 取得使用者目前的位置，並於地圖上顯示。
我們要把此版本 App 變更為付費 Web App。
此處假設你已經安裝了 Firefox OS 模擬器 (Firefox OS Simulator)、開啟 Dashboard、點選 Dashboard 中的「Add Directory」而新增了 App，並點選 App 的「manifest.webapp」檔案。
目前你已經將 App 修改為無錯誤的 App，並已擁有合適的樣式。現在可新增付款收據驗證 (Payment Receipt Validation) 功能，確保使用者必須購買此 App。
Mozilla 另已提供小型的 JavaScript 函式庫，可協助 Apps 檢查自己的收據：https://github.com/mozilla/receiptverifier。
為 App 新增 receiptverifier (把新的 script 標籤加入「index.html」檔案中)：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://raw.github.com/mozilla/receiptverifier/master/receiptverifier.js"></script>
<script src="https://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<button id ="where-am-i">Where am I?</button>
<div id="map"></div>
<script src="scripts/whereami.js"></script>
<link media="all" href="style/style.css" type="text/css" rel="stylesheet">
</body>
</html>
接著再以「mozmarket.receipts.Verifier」API 檢查「scripts/whereami.js」中的收據 (將於按下按鈕，或於載入 App 時檢查收據)：
...
var verifier = new mozmarket.receipts.Verifier({
installs_allowed_from: '*',
typsAllowed: 'test-receipt',
logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
onlog: mozmarket.receipts.Verifier.consoleLogger
});
verifier.clearCache();
function verifyPaymentReceipts(cb) {
verifier.verify(function (verifier) {
if (verifier.state instanceof verifier.states.OK) {
cb(null); // valid payment
} else {
cb("invalid-payment"); // invalid payment
}
});
setTimeout(function checkNoReceipts() {
if (verifier.state instanceof verifier.states.NoReceipts) {
cb("no-receipts");
}
}, 2000);
}
whereami.onclick = function() {
verifyPaymentReceipts(function (err) {
if (err) {
alert("Invalid Payment Receipt.");
} else {
navigator.geolocation.getCurrentPosition(getMap, error);
}
});
};
正常情況需透過 Marketplace 與 Payment 服務，以加密方式簽署收據。但目前可先用模擬器 App 項目中的「Receipts」選單，點選所要安裝的收據類型 (預設為「None」)，即可為 App 安裝測試收據。
現在即可測試 App 具備「Valid」、「Invalid」、「Refunded」收據，或無收據時的行為。另可於網頁主控台觀看「receiptverifier」函式庫所產生的記錄，藉以了解相關結果：
注意：whereami-7 版本即為最終完成的 App。