MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

從 Firefox 34 開始均可使用 WebIDE。

亦可於 Firefox 33 中變更偏好設定,以啟動 WebIDE。鍵入 about:config 並找到「devtools.webide.enabled 」,將之設定為「true」即可。

WebIDE 現已取代「應用程式管理員 (App Manager)」,且其功能一如應用程式管理員,並可透過 Firefox OS 模擬器 (Firefox OS Simulator) 或實體 Firefox OS 裝置,進而建構、編輯、執行、除錯 Web App。

不僅如此,WebIDE 亦可連接 Firefox 開發者工具與他款瀏覽器,包含 Firefox 行動版 (Firefox for Android)、Android 上的 Chrome、iOS 上的 Safari。可參閱遠端除錯頁面,以了解應如何連上特定瀏覽器。

你必須先在 WebIDE 中設定一個或多個執行環境 (Runtime)。Runtime 即是 App 的執行與除錯環境。不論是 Firefox OS 裝置透過 USB 連上桌機 (從 Firefox 39 或更高版本起,可透過 WiFi 連上桌機),或是桌面版 Firefox 上安裝 Firefox OS 模擬器,都可當做執行環境。

接著就可建立 App 或啟動現有的 App。如果你要建立全新的 App,內建範本將提供你所需的資料目錄架構與最簡單的樣板;或有更完整的範本提供 Privileged App 所需要的 API。WebIDE 將以樹狀圖顯示 App 的檔案,讓你只要透過內建的編輯器即可修改並儲存檔案。當然,你也能選用自己習慣的編輯器開發 App,只用 WebIDE 除錯亦可。

最後,你可將 App 安裝於執行環境之中並執行。也能透過常見的開發者工具,如檢測器 (Inspector)主控台 (Console)JavaScript 除錯器 (JavaScript Debigger) 等,檢查並修改 App。

系統需求

若要以 WebIDE 開發 App 並除錯,必須使用 Firefox 33 或更高版本。如果要在實際 Freifox OS 裝置上測試 App,則該款裝置需搭載 Firefox OS 1.2 或更高版本,並搭配 1 組 USB 連接線。

如果要針對 Firefox OS 1.2 或更高版本開發 App,則限用 WebIDE 進行開發。

啟動 WebIDE

進入「網頁開發者」選單,點擊「WebIDE」即可將之啟動。亦可按下鍵盤的「Shift + F8」快捷鍵:左邊的「開啟應用程式 (Open App)」下拉式選單中,你可啟動現有的 App 或建立新的 App。右邊的「選擇 Runtime (Select Runtime)」下拉式選單中,你可選擇執行環境或設立新的執行環境。

在選擇了執行環境並開啟 App 之後,才可以按中間的「Run」、「Stop」、「Debug」按鈕。

設定執行環境

「選擇 Runtime」選單內,共分為 3 種執行環境:

第一次點開下拉式選單,你不會看見任何的執行環境:

接下來會帶你新增執行環境。

連結 Firefox OS 裝置

在開始連結 Firefox OS 裝置之前,必須先完成下列設定:

  • 檢查 Firefox OS 版本:確定你的裝置可以執行 Firefox OS 1.2/Boot2Gecko 1.2 或更高版本。可至「設定 (Settings)」App 中尋找「裝置資訊 (Device Information)」>「軟體 (Software)」確認 Firefox OS 的版本。如果版本太舊,則可到 developer phone guide 頁面找到你的裝置,再完成相關更新步驟。
  • 啟動「遠端除錯 (Remote debugging)」:進入裝置的「設定」App ,找到「開發者 (Developer)」
    • Firefox OS 1.3 或之前的版本:請勾選「遠端除錯」方塊
    • Firefox OS 1.4 或之後的版本:又分「僅 ADB」與「ADB 與開發工具 (ADB and DevTools)」共 2 個選項。請選擇「ADB 與開發工具」。
    關閉裝置的螢幕鎖:在裝置的「設定」中,找到「螢幕鎖 (Screen Lock)」並關閉此功能。因為只要鎖住螢幕就會與裝置斷線,如此就無法除錯了。
  • 如果你想要對 Certified App (包含內建的 App) 進行除錯:請參閱〈Certified App 除錯〉章節。

Linux 版本:

  • 建立 udev 規則檔案,如同〈setting up an Android device〉文件裡的步驟 3。以 Geeksphone 為例,請將 idVendor 屬性設定為「05c6」。可至此網頁找到更多 idVendor 屬性值。

Windows 版本:

如果有其他 Android 裝置已連上你的電腦,請先中斷連線。再透過 USB 銜接裝置與電腦。則你的裝置應該會出現在「USB 裝置」之下:

如果還是沒看到你的裝置,請詳見〈疑難雜症〉頁面。

新增模擬器

Firefox OS 模擬器架構在 Firefox OS 之上,可在桌機上模擬 Firefox OS 裝置。且其執行的視窗尺寸、使用者介面、內建的 App 也都和 Firefox OS 裝置相同,更能模擬 Firefox OS 裝置的 API。

如此在許多情況下,就算你沒有實際裝置,也能測試或除錯自己的 App。

整個模擬器大到不能內建在 Firefox 之中,所以包裝成 Firefox 的附加元件。當你在 Runtimes 下拉式選單中點選「Install Simulator」,將會帶領你到安裝不同版本 Firefox OS 模擬器的頁面。

你可以安裝所有需要的模擬器。因為模擬器容量頗大,所以請耐心下載。當你安裝模擬器完畢,就能關閉「Extra Components」視窗。已安裝的模擬器就會出現在「Runtimes」的下拉式選單裡面:

若要進一步了解模擬器,詳見該頁

自訂執行環境

透過可自訂的執行環境,你可用任意的 hostname 和埠 (port) 去連結遠端裝置。

Firefox OS 裝置與 Android 裝置,均是透過「Android Debug Bridge」這個程式 (也稱為 ADB) 連上桌機。WebIDE 已預設使用名為「ADB Helper」的附加元件。此簡單的附加元件可幫你安裝 ADB 並設定好「埠」的轉址,進而簡化相關程序。接著 Firefox 桌面版的工具就能和裝置交換訊息了。

上述功能在大部分情況下都很方便。但有時候你可能不想透過 WebIDE 使用 ADB (例如你想要直接用命令列來跑 ADB)。這時你可使用 adb forward 指令來使用特定的「主機 (Host)」與「埠」

如果你也想用 WebIDE 及命令列使用 ADB,就要停用 ADB Helper 附加元件,並透過「自訂 (Custom)」選項、輸入你傳送給 adb forward 的「主機」與「埠」,即可連接 WebIDE。

ADB Helper 目前還不支援連結 Firefox for Android。如果你想透過 WebIDE 連上 Firefox for Android,就必須設定自己的埠轉址 (Port forwarding) 與自訂的執行環境。可進一步參閱 connecting to Firefox for Android using ADB

選擇執行環境

當你設定好執行環境之後,就能在「選擇 Runtime (Select Runtime)」中點選。

  • 如果你選擇「模擬器」,WebIDE 就會啟動模擬器。
  • 如果你選擇 WebIDE 已連結的 Firefox OS 裝置,則該裝置就會出現對話框確認是否要連結。這時請點選「OK」。

WebIDE 工具列中間的「play」按鈕這時已經可按。點下後就會執行所選的執行環境。 

執行環境的動作

選取執行環境之後,「Runtimes」下拉式選單會多出 3 個選項:

  • Runtime 資訊 (Runtime Info):現在執行環境的資訊
  • 權限表 (Permissions Table):顯示目前執行環境的 App 權限,囊括各個使用中的 API 與 App 型態,分別是:可用的 (✓)、禁用的 (✗)、需要使用者認證的 (!)。
  • 擷圖 (Screenshot):可取得目前執行環境的擷圖

建立並開啟 App

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

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

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

Manifest 檔案檢查

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

當然也可以在專案編輯器中,直接編輯 App 的 manifest.webapp 檔案。

原始碼編輯器

WebIDE 是使用 CodeMirror 原始碼編輯器。

原始碼編輯器快捷鍵

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

  Windows OS X Linux
Go to line Ctrl + J Cmd + J Ctrl + J
Find in file Ctrl + F Cmd + F Ctrl + F
Find again Ctrl + G Cmd + G Ctrl + G
Select all Ctrl + A Cmd + A Ctrl + A
Cut Ctrl + X Cmd + X Ctrl + X
Copy Ctrl + C Cmd + C Ctrl + C
Paste Ctrl + V Cmd + V Ctrl + V
Undo Ctrl + Z Cmd + Z Ctrl + Z
Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Indent Tab Tab Tab
Unindent Shift + Tab Shift + Tab Shift + Tab
Move line(s) up Alt + Up Alt + Up Alt + Up
Move line(s) down Alt + Down Alt + Down Alt + Down
Comment/uncomment line(s) Ctrl + / Cmd + / Ctrl + /

程式碼補齊

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

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

行內說明文件

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

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

儲存檔案

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

移除專案

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

執行並除錯 App

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

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

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

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

Certified App 的除錯

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


不過,如果要在實際裝置除錯 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 的其他使用問題,請參閱疑難雜症頁。

 

 

文件標籤與貢獻者

 此頁面的貢獻者: MashKao, maybe, mpizza, Paul
 最近更新: MashKao,