From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/tools/webide/index.html | 290 ++++++++++++++++++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 files/zh-tw/tools/webide/index.html (limited to 'files/zh-tw/tools/webide/index.html') diff --git a/files/zh-tw/tools/webide/index.html b/files/zh-tw/tools/webide/index.html new file mode 100644 index 0000000000..7a2968a1ac --- /dev/null +++ b/files/zh-tw/tools/webide/index.html @@ -0,0 +1,290 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/WebIDE +--- +
+

從 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。可參閱遠端除錯頁面，以了解應如何連上特定瀏覽器。

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

你必須先在 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 裝置之前，必須先完成下列設定：

+ + + +
+

Linux 版本：

+ + +
+ +
+

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 工具列中間的「play」按鈕這時已經可按。點下後就會執行所選的執行環境。 

+ +

執行環境的動作

+ +

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

+ + + +

+ +

+ +

建立並開啟 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 原始碼編輯器。

+ +

原始碼編輯器快捷鍵

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

程式碼補齊

+ +

當編輯 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 還需要：

+ + + +

如果要啟動 Certified App 除錯功能，就要先連接執行環境，然後在選單中找到 Runtime > Runtime Info。如果你在這裡看到「開發工具受限權限 (DevTools restricted privileges)」為「Yes」，就表示無法進行 Certified App 的除錯。根據你除錯對象的不同，後續步驟也有所差異：

+ + + +

現在 (或在重新啟動 B2G 桌機用戶端之後) 你應該可以到 WebIDE 看到裝置中的所有 Certified App 了。

+ +

監控效能

+ +

如果你想知道自己 App 的效能，也有幾種方法可於 WebIDE 的執行環境中測得：

+ + + +

疑難雜症 (Troubleshooting)

+ +

WebIDE 的其他使用問題，請參閱疑難雜症頁。

+ +

 

+ +

 

-- cgit v1.2.3-54-g00ecf