From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/zh-tw/tools/scratchpad/index.html | 109 -------- files/zh-tw/tools/webide/index.html | 290 --------------------- .../zh-tw/tools/webide/troubleshooting/index.html | 46 ---- 3 files changed, 445 deletions(-) delete mode 100644 files/zh-tw/tools/scratchpad/index.html delete mode 100644 files/zh-tw/tools/webide/index.html delete mode 100644 files/zh-tw/tools/webide/troubleshooting/index.html (limited to 'files/zh-tw/tools') diff --git a/files/zh-tw/tools/scratchpad/index.html b/files/zh-tw/tools/scratchpad/index.html deleted file mode 100644 index 880b0c13ee..0000000000 --- a/files/zh-tw/tools/scratchpad/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 程式碼速記本 -slug: Tools/Scratchpad -translation_of: Archive/Tools/Scratchpad ---- -

程式碼速記本（Scratchpad）提供使用 JavaScript 程式碼實驗的環境。您可以編寫，運行和檢查的程式碼與網頁互動的結果。

- -

不同於網頁主控台，這是專為在同一時間解釋的一行程式碼，便簽讓您編輯較大的 JavaScript 程式碼塊，然後根據您希望如何使用輸出以各種方式執行。

- -

{{EmbedYouTube("Pt7DZACyClM")}}

- -

用法

- -

打開程式碼速記本

- -

要打開「程式碼速記本」窗口的話有很多辦法：

- - - -

這將打開一個程式碼速記本窗口。

- -

在工具箱開啟程式碼速記本

- -
Firefox 47 引入。
- -

From Firefox 47, you can open Scratchpad inside the Toolbox. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the Settings page.

- -

Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in split Console mode: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.

- -

編輯

- -

程式碼速記本窗口看起來像這樣（在 macOS 選單列在螢幕的頂部）：

- -

便簽本的屏幕截圖

- -

檔案選單提供選項來儲存和載入JavaScript程式碼片段，因此，如果你喜歡，你可以在以後重用程式碼。

- -

程式碼補全

- -

程式碼速記本整合了ternjs ( javascript程式碼分析引擎 )，並使用該提供自動補全提示與包含在當前的符號資訊的視窗。要列出自動補全提示，按 Ctrl+Space 。

- -

例如，嘗試輸入d，然後按 Ctrl+Space 。你會看到自動補全的視窗盒，如下圖：

- -

提示左邊的每個圖標為目前提示的類型，目前高亮的提示會自動彈出更多資訊。使用↑和↓來循環高亮的提示，並使用Enter或Tab 來選擇目前高亮的提示。

- -

內嵌說明

- -

如果想看到內嵌說明視窗，可以在將滑鼠指標(cursor)0移到標識符的位置，並按下Ctrl + Shift + Space。例如：如果你先輸入document.addEventListener，然後再按下Ctrl + Shift + Space，你將會看到一個彈出視窗，顯示該函數的語法和使用說明。

- -

在彈出視窗中的「[文件]」連結，點擊後，可直接連結到MDN對應符號的說明文件網頁。

- -

執行

- -

一旦你寫完你的代碼，選擇要運行的程式碼。如果不選擇任何內容，視窗中的所有程式碼將被執行。然後透過「執行」選單或右鍵選單，來選擇你想要的執行方式。程式碼在當前的分頁中執行。任何宣告在函式(function)之外的變數將被加入到當前分頁的全域物件。

- -

選單中有四個執行選項可以選擇

- -

執行

- -

當你選取「執行」選項時, 被選取的程式碼將會被執行. 你會將此選項用於執行一個函式或一段操作頁面內容的程式碼，而不需要看到執行後的輸出。

- -

檢測

- -

「檢測」選項執行程式碼的方法就像執行選項; 然而，程式碼返回後，object inspector會打開讓你檢查返回值。

- -

例如，如果你輸入代碼：

- -
window
-
- -

然後選擇「檢測」，object Inspector 看起來是這樣的：

- -

在便簽中檢查對象

- -

顯示

- -

「顯示」選項執行所選取的程式碼，然後直接將結果插入到你的程式碼速記本編輯器視窗中，作為一個註解，所以你可以使用它作為一個REPL。

- -

重新載入並執行

- -

重新載入和執行選項僅在執行選單中。它首先重新載入頁面，然後執行該程式碼時，頁面上的「load」事件觸發。這適用於在剛開始的環境來執行程式碼。

- -

在瀏覽器環境中執行程式碼速記本

- -

你可以在瀏覽器環境運行程式碼速記本，而不是在特定網頁的環境中。如果您正在使用火狐本身或開發附加元件，這非常有用。要做到這一點，要勾選「啟用瀏覽器chrome與附加元件除錯工具箱」設定在開發者工具設置中。完成勾選後，執行程式碼速記本中，「環境」選單會有「瀏覽器」選項； 選擇「瀏覽器」選項後，你的範圍會是整個瀏覽器，而不僅僅是網頁的內容，此時，你將可以檢測一些全域變數來看：

- -
window
-/*
-[ChromeWindow]
-*/
-
-gBrowser
-/*
-[object XULElement]
-*/
- -

當程式碼速記本含有下列程式碼在第一行時，程式碼速記本會將執行環境設為整個瀏覽器：
- // -sp-context: browser

- -

鍵盤快捷鍵

- -

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "scratchpad") }}

- -

源始碼編輯器的快捷鍵

- -

{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/zh-tw/tools/webide/index.html b/files/zh-tw/tools/webide/index.html deleted file mode 100644 index 7a2968a1ac..0000000000 --- a/files/zh-tw/tools/webide/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -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 的其他使用問題，請參閱疑難雜症頁。

- -

 

- -

 

diff --git a/files/zh-tw/tools/webide/troubleshooting/index.html b/files/zh-tw/tools/webide/troubleshooting/index.html deleted file mode 100644 index cfdadf7a1b..0000000000 --- a/files/zh-tw/tools/webide/troubleshooting/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebIDE 錯誤排除 -slug: Tools/WebIDE/Troubleshooting -translation_of: Archive/WebIDE/Troubleshooting ---- -

連接 Firefox OS 裝置

- -

如果您連接了 Firefox OS 裝置，但該裝置沒有出現在 WebIDE 裡，有些事情您可以先試試：

- - - -

為認證過的應用程式除錯

- -

如果您想為認證過的應用程式（包括內建的應用程式）除錯，請參考 debugging certified apps 中的說明。

- -

Enable logging

- -

You can also enable verbose logging to gather diagnostics:

- -
    -
  1. visit about:config, and add a new preference called .console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true
    2. -
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. -
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. -
- -

尋求協助

- -

請上 IRC 的 #devtools 頻道尋求協助。

-- cgit v1.2.3-54-g00ecf