aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/tools
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/zh-tw/tools
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/zh-tw/tools')
-rw-r--r--files/zh-tw/tools/scratchpad/index.html109
-rw-r--r--files/zh-tw/tools/webide/index.html290
-rw-r--r--files/zh-tw/tools/webide/troubleshooting/index.html46
3 files changed, 0 insertions, 445 deletions
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
----
-<p>程式碼速記本(Scratchpad)提供使用 JavaScript 程式碼實驗的環境。您可以編寫,運行和檢查的程式碼與網頁互動的結果。</p>
-
-<p>不同於<a href="/zh-TW/Tools/Web_Console">網頁主控台</a>,這是專為在同一時間解釋的一行程式碼,便簽讓您編輯較大的 JavaScript 程式碼塊,然後根據您希望如何使用輸出以各種方式執行。</p>
-
-<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
-
-<h2 id="用法">用法</h2>
-
-<h3 id="打開程式碼速記本">打開程式碼速記本</h3>
-
-<p>要打開「程式碼速記本」窗口的話有很多辦法:</p>
-
-<ul>
- <li>按 <kbd>Shift</kbd> + <kbd>F4</kbd>,或到「開發者」選單(這是在 macOS 和 Linux 的工具選單的子選單),然後選擇「程式碼速記本」。</li>
- <li>click the wrench icon (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), which is in the main toolbar or under the Hamburger menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), then select "Scratchpad".</li>
-</ul>
-
-<p>這將打開一個程式碼速記本窗口。</p>
-
-<h3 id="在工具箱開啟程式碼速記本">在工具箱開啟程式碼速記本</h3>
-
-<div class="geckoVersionNote">Firefox 47 引入。</div>
-
-<p>From Firefox 47, you can open Scratchpad inside the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>. First you need to check "Scratchpad" in the "Default Firefox Developer Tools" section of the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Settings</a> page.</p>
-
-<p>Now Scratchpad will be available in the Toolbox, alongside other tools like the Page Inspector and the Web Console. This is especially useful in <a href="/en-US/docs/Tools/Web_Console/Split_console">split Console mode</a>: you can use Scratchpad for a persistent, multiline editor, and the Console to interact with the page.</p>
-
-<h3 id="編輯">編輯</h3>
-
-<p>程式碼速記本窗口看起來像這樣(在 macOS 選單列在螢幕的頂部):</p>
-
-<p><img alt="便簽本的屏幕截圖" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
-
-<p>檔案選單提供選項來儲存和載入JavaScript程式碼片段,因此,如果你喜歡,你可以在以後重用程式碼。</p>
-
-<h4 id="程式碼補全">程式碼補全</h4>
-
-<p>程式碼速記本整合了ternjs ( javascript<a href="http://ternjs.net/">程式碼分析引擎</a> ),並使用該提供自動補全提示與包含在當前的符號資訊的視窗。要列出自動補全提示,按 <kbd>Ctrl</kbd>+<kbd>Space</kbd> 。</p>
-
-<p>例如,嘗試輸入<kbd>d</kbd>,然後按 <kbd>Ctrl</kbd>+<kbd>Space</kbd> 。你會看到自動補全的視窗盒,如下圖:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">提示左邊的每個圖標為目前提示的類型,目前高亮的提示會自動彈出更多資訊。使用<kbd>↑</kbd>和<kbd>↓</kbd>來循環高亮的提示,並使用<kbd>Enter</kbd>或<kbd>Tab </kbd>來選擇目前高亮的提示。</p>
-
-<h4 id="內嵌說明">內嵌說明</h4>
-
-<p>如果想看到內嵌說明視窗,可以在將滑鼠指標(cursor)0移到標識符的位置,並按下<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>。例如:如果你先輸入<code>document</code>.<code>addEventListener,然後再按下</code><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>,你將會看到一個彈出視窗,顯示該函數的語法和使用說明。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;">在彈出視窗中的「[文件]」連結,點擊後,可直接連結到MDN對應符號的說明文件網頁。</p>
-
-<h3 id="執行">執行</h3>
-
-<p class="note">一旦你寫完你的代碼,選擇要運行的程式碼。如果不選擇任何內容,視窗中的所有程式碼將被執行。然後透過「執行」選單或右鍵選單,來選擇你想要的執行方式。程式碼在當前的分頁中執行。任何宣告在函式(function)之外的變數將被加入到當前分頁的全域物件。</p>
-
-<h4 id="選單中有四個執行選項可以選擇">選單中有四個執行選項可以選擇</h4>
-
-<h4 id="執行_2">執行</h4>
-
-<p>當你選取「執行」選項時, 被選取的程式碼將會被執行. 你會將此選項用於執行一個函式或一段操作頁面內容的程式碼,而不需要看到執行後的輸出。</p>
-
-<h4 id="檢測">檢測</h4>
-
-<p>「檢測」選項執行程式碼的方法就像執行選項; 然而,程式碼返回後,object inspector會打開讓你檢查返回值。</p>
-
-<p>例如,如果你輸入代碼:</p>
-
-<pre>window
-</pre>
-
-<p>然後選擇「檢測」,object Inspector 看起來是這樣的:</p>
-
-<p><img alt="在便簽中檢查對象" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
-
-<h4 id="顯示">顯示</h4>
-
-<p>「顯示」選項執行所選取的程式碼,然後直接將結果插入到你的程式碼速記本編輯器視窗中,作為一個註解,所以你可以使用它作為一個<a href="http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL</a>。</p>
-
-<h4 id="重新載入並執行">重新載入並執行</h4>
-
-<p>重新載入和執行選項僅在執行選單中。它首先重新載入頁面,然後執行該程式碼時,頁面上的「load」事件觸發。這適用於在剛開始的環境來執行程式碼。</p>
-
-<h2 id="在瀏覽器環境中執行程式碼速記本">在瀏覽器環境中執行程式碼速記本</h2>
-
-<p>你可以在瀏覽器環境運行程式碼速記本,而不是在特定網頁的環境中。如果您正在使用火狐本身或開發附加元件,這非常有用。要做到這一點,要勾選「啟用瀏覽器chrome與附加元件除錯工具箱」設定在<a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">開發者工具設置</a>中。完成勾選後,執行程式碼速記本中,「環境」選單會有「瀏覽器」選項; 選擇「瀏覽器」選項後,你的範圍會是整個瀏覽器,而不僅僅是網頁的內容,此時,你將可以檢測一些全域變數來看:</p>
-
-<pre class="brush: js">window
-/*
-[ChromeWindow]
-*/
-
-gBrowser
-/*
-[object XULElement]
-*/</pre>
-
-<p>當程式碼速記本含有下列程式碼在第一行時,程式碼速記本會將執行環境設為整個瀏覽器<code>:</code><br>
- <code>// -sp-context: browser</code></p>
-
-<h2 id="鍵盤快捷鍵">鍵盤快捷鍵</h2>
-
-<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
-
-<h3 id="源始碼編輯器的快捷鍵">源始碼編輯器的快捷鍵</h3>
-
-<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
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
----
-<div class="geckoVersionNote">
-<p>從 Firefox 34 開始均可使用 WebIDE。</p>
-
-<p>亦可於 Firefox 33 中變更偏好設定,以啟動 WebIDE。鍵入 <a href="http://kb.mozillazine.org/About:config">about:config</a> 並找到「<code>devtools.webide.enabled</code> 」,將之設定為「<code>true</code>」即可。</p>
-</div>
-
-<div class="summary">
-<p>WebIDE 現已取代「<a href="/en-US/Firefox_OS/Using_the_App_Manager">應用程式管理員 (App Manager)</a>」,且其功能一如應用程式管理員,並可透過 <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 模擬器 (Firefox OS Simulator)</a> 或實體 Firefox OS 裝置,進而建構、編輯、執行、除錯 Web App。</p>
-
-<p>不僅如此,WebIDE 亦可連接 <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox 開發者工具</a>與他款瀏覽器,包含 Firefox 行動版 (Firefox for Android)、Android 上的 Chrome、iOS 上的 Safari。可參閱<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">遠端除錯</a>頁面,以了解應如何連上特定瀏覽器。</p>
-</div>
-
-<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
-
-<p>你必須先在 WebIDE 中<a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">設定一個或多個執行環境 (Runtime)</a>。Runtime 即是 App 的執行與除錯環境。不論是 Firefox OS 裝置透過 USB 連上桌機 (從 <a href="https://developer.mozilla.org/en-US/Firefox/Releases/39">Firefox 39</a> 或更高版本起,可透過 WiFi 連上桌機),或是桌面版 Firefox 上安裝 Firefox OS 模擬器,都可當做執行環境。</p>
-
-<p>接著就可<a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">建立 App 或啟動現有的 App</a>。如果你要建立全新的 App,內建範本將提供你所需的資料目錄架構與最簡單的樣板;或有更完整的範本提供 Privileged App 所需要的 API。WebIDE 將以樹狀圖顯示 App 的檔案,讓你只要透過內建的編輯器即可修改並儲存檔案。當然,你也能選用自己習慣的編輯器開發 App,只用 WebIDE 除錯亦可。</p>
-
-<p>最後,你可<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">將 App 安裝於執行環境之中並執行</a>。也能透過常見的開發者工具,如<a href="/en-US/docs/Tools/Page_Inspector">檢測器 (Inspector)</a>、<a href="/en-US/docs/Tools/Web_Console">主控台 (Console)</a>、<a href="/en-US/docs/Tools/Debugger">JavaScript 除錯器 (JavaScript Debigger)</a> 等,檢查並修改 App。</p>
-
-<h2 id="系統需求">系統需求</h2>
-
-<p>若要以 WebIDE 開發 App 並除錯,必須使用 Firefox 33 或更高版本。如果要在實際 Freifox OS 裝置上測試 App,則該款裝置需搭載 Firefox OS 1.2 或更高版本,並搭配 1 組 USB 連接線。</p>
-
-<p>如果要針對 Firefox OS 1.2 或更高版本開發 App,則限用 WebIDE 進行開發。</p>
-
-<h2 id="啟動_WebIDE">啟動 WebIDE</h2>
-
-<p>進入「網頁開發者」選單,點擊「WebIDE」即可將之啟動。亦可按下鍵盤的「Shift + F8」快捷鍵:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">左邊的「開啟應用程式 (Open App)」下拉式選單中,你可啟動現有的 App 或建立新的 App。右邊的「選擇 Runtime (Select Runtime)」下拉式選單中,你可選擇執行環境或設立新的執行環境。</p>
-
-<p>在選擇了執行環境並開啟 App 之後,才可以按中間的「Run」、「Stop」、「Debug」按鈕。</p>
-
-<h2 id="設定執行環境">設定執行環境</h2>
-
-<p>「選擇 Runtime」選單內,共分為 3 種執行環境:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB 裝置 (USB Devices)</a>:透過 USB 銜接 Firefox OS 裝置</li>
- <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">模擬器 (Simulators)</a>:你已經安裝的 Firefox OS Simulator</li>
- <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">自訂 (Custom)</a>:透過自定義的名稱或埠 (port) 來連結 WebIDE。</li>
-</ul>
-
-<p>第一次點開下拉式選單,你不會看見任何的執行環境:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">接下來會帶你新增執行環境。</p>
-
-<h3 id="連結_Firefox_OS_裝置">連結 Firefox OS 裝置</h3>
-
-<p>在開始連結 Firefox OS 裝置之前,必須先完成下列設定:</p>
-
-<ul>
- <li><strong>檢查 Firefox OS 版本:</strong>確定你的裝置可以執行 Firefox OS 1.2/Boot2Gecko 1.2 或更高版本。可至「設定 (Settings)」App 中尋找「裝置資訊 (<code>Device Information)」&gt;「軟體 (Software)」確認 Firefox OS 的版本。如果版本太舊,則可到</code> <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> 頁面找到你的裝置,再完成相關更新步驟。</li>
- <li><strong>啟動「遠端除錯 (Remote debugging)」:</strong>進入裝置的「設定」App ,找到<code>「開發者</code><code> </code><code>(Developer</code><code>)」</code>:
- <ul>
- <li>Firefox OS 1.3 或之前的版本:請勾選「遠端除錯」方塊</li>
- <li>Firefox OS 1.4 或之後的版本:又分「僅 ADB」與「ADB 與開發工具 (ADB and DevTools)」共 2 個選項。請選擇「ADB 與開發工具」。</li>
- </ul>
- </li>
- <li>
- <ul>
- </ul>
- <strong>關閉裝置的螢幕鎖:</strong>在裝置的「設定」中,找到「螢幕鎖 (<code>Screen Lock)」</code>並關閉此功能。因為只要鎖住螢幕就會與裝置斷線,如此就無法除錯了。</li>
- <li><strong>如果你想要對 Certified App (包含內建的 App) 進行除錯</strong>:請參閱〈<a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps"><strong>Certified App 除錯</strong></a>〉章節。</li>
-</ul>
-
-<div class="note">
-<p><strong>Linux 版本:</strong></p>
-
-<ul>
- <li>建立 <code>udev</code> 規則檔案,如同〈<a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>〉文件裡的步驟 3。以 Geeksphone 為例,請將 <code>idVendor</code> 屬性設定為「05c6」。可至<a href="http://developer.android.com/tools/device.html#VendorIds">此網頁</a>找到更多 <code>idVendor</code> 屬性值。</li>
-</ul>
-</div>
-
-<div class="note">
-<p><strong>Windows 版本:</strong></p>
-
-<ul>
- <li>根據〈<a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>〉文件的步驟 3,你必須安裝驅動程式,。可至 <a href="http://downloads.geeksphone.com/">Geeksphone 網站</a>上找到 Geeksphone 的驅動程式。Windows 8 預設不會讓你安裝未註冊的驅動程式。請參閱《<a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">How to install an unsigned driver on Windows 8</a>》。</li>
- <li>完成應有的步驟之後,如果 WebIDE 還是抓不到你的裝置,則你可能需要編輯 <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini</a>。</li>
-</ul>
-</div>
-
-<p>如果有其他 Android 裝置已連上你的電腦,請先中斷連線。再透過 USB 銜接裝置與電腦。則你的裝置應該會出現在「USB 裝置」之下:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
-
-<p>如果還是沒看到你的裝置,請詳見〈<a href="/en-US/docs/Tools/WebIDE/Troubleshooting">疑難雜症</a>〉頁面。</p>
-
-<h3 id="新增模擬器">新增模擬器</h3>
-
-<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 模擬器</a>架構在 <span style="line-height: 1.5;">Firefox OS 之上,可在桌機上模擬</span> Firefox OS 裝置。且其</span><span style="line-height: 1.5;">執行的視窗尺寸、使用者介面、內建的 App 也都和 <span style="line-height: 1.5;">Firefox OS 裝置相同,更能模擬 <span style="line-height: 1.5;">Firefox OS 裝置的 API。</span></span></span></p>
-
-<p><span style="line-height: 1.5;">如此在許多情況下,就算你沒有實際裝置,也能測試或除錯自己的 App。 </span></p>
-
-<p>整個模擬器大到不能內建在 Firefox 之中,所以包裝成 Firefox 的<a href="/en-US/Add-ons">附加元件</a>。當你在 Runtimes 下拉式選單中點選「Install Simulator」,將會帶領你到安裝不同版本 Firefox OS 模擬器的頁面。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">你可以安裝所有需要的模擬器。因為模擬器容量頗大,所以請耐心下載。當你安裝模擬器完畢,就能關閉「Extra Components」視窗。已安裝的模擬器就會出現在「Runtimes」的下拉式選單裡面:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">若要進一步了解模擬器,詳見<a href="/en-US/docs/Tools/Firefox_OS_Simulator">該頁</a>。</p>
-
-<h3 id="自訂執行環境">自訂執行環境</h3>
-
-<p>透過可自訂的執行環境,你可用任意的 hostname 和埠 (port) 去連結遠端裝置。</p>
-
-<p>Firefox OS 裝置與 Android 裝置,均是透過「Android Debug Bridge」這個程式 (也稱為 <a href="http://developer.android.com/tools/help/adb.html">ADB</a>) 連上桌機。WebIDE 已預設使用名為「ADB Helper」的附加元件。此簡單的附加元件可幫你安裝 ADB 並設定好「埠」的轉址,進而簡化相關程序。接著 Firefox 桌面版的工具就能和裝置交換訊息了。</p>
-
-<p>上述功能在大部分情況下都很方便。但有時候你可能不想透過 WebIDE 使用 ADB (例如你想要直接用命令列來跑 ADB)。這時你可使用 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> 指令來使用特定的「主機 (Host)」與「埠」<code>。</code><br>
- <br>
- 如果你也想用 WebIDE 及命令列使用 ADB,就要<a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">停用 ADB Helper</a> 附加元件,並透過「自訂 (Custom)」選項、輸入你傳送給 <code><code>adb forward</code></code> 的「主機」與「埠」,即可連接 WebIDE。</p>
-
-<p>ADB Helper 目前還不支援連結 Firefox for Android。如果你想透過 WebIDE 連上 Firefox for Android,就必須設定自己的埠轉址 (Port forwarding) 與自訂的執行環境。可進一步參閱<a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android"> connecting to Firefox for Android using ADB</a>。</p>
-
-<h2 id="選擇執行環境">選擇執行環境</h2>
-
-<p>當你設定好執行環境之後,就能在「選擇 Runtime (Select Runtime)」中點選。</p>
-
-<ul>
- <li>如果你選擇「模擬器」,WebIDE 就會啟動模擬器。</li>
- <li>如果你選擇 WebIDE 已連結的 Firefox OS 裝置,則該裝置就會出現對話框確認是否要連結。這時請點選「OK」。</li>
-</ul>
-
-<p>WebIDE 工具列中間的「play」按鈕這時已經可按。點下後就會執行所選的執行環境。 </p>
-
-<h3 id="執行環境的動作">執行環境的動作</h3>
-
-<p>選取執行環境之後,「Runtimes」下拉式選單會多出 3 個選項:</p>
-
-<ul>
- <li><strong>Runtime 資訊 (Runtime Info)</strong>:現在執行環境的資訊</li>
- <li><strong>權限表 (Permissions Table)</strong>:顯示目前執行環境的 <a href="/en-US/Apps/Build/App_permissions">App 權限</a>,囊括各個使用中的 API 與 <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">App 型態</a>,分別是:可用的 (✓)、禁用的 (✗)、需要使用者認證的 (!)。</li>
- <li><strong>擷圖 (Screenshot</strong>):可取得目前執行環境的擷圖</li>
-</ul>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
-
-<h2 id="建立並開啟_App">建立並開啟 App</h2>
-
-<p>在「開啟應用程式 (Open App)」選單之下共有 3 個選項:<br>
- 1). 新增應用程式... (New App...)<br>
- 2). 開啟封裝的應用程式... (Open Packaged App...)<br>
- 3). 開啟架設的應用程式... (Open Hosted App...)</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
-
-<h3 id="建立新的_App">建立新的 App</h3>
-
-<p>點選「新增應用程式」即可建立新 App。你會看到對話視窗內提供「Privileged Empty App」與「Privileged App」共  2 個範本。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
-
-<p>此 2 個範本均來自於 Mozilla 的「<a href="https://github.com/mozilla/mortar">app template collection</a>」,以最基本的架構讓你輕鬆上手。「Privileged App」則會教你如何使用權限去取得跨領域 (cross-origin) 的內容。</p>
-
-<p>在選擇範本之後,必須設定該 App 的名稱及其檔案儲存目錄,接著會在<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">專案編輯器</a>中開啟新 App。</p>
-
-<h3 id="開啟封裝式_App">開啟封裝式 App</h3>
-
-<p>點選「開啟封裝的應用程式...」即可開啟<a href="/en-US/Marketplace/Options/Packaged_apps">封裝式 (Packaged) App</a>。你所選取的資料夾中必須具備 App 的 <a href="/en-US/Apps/Build/Manifest">manifest</a> 檔案,然後就會在<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">專案編輯器</a>中開啟 App。</p>
-
-<div class="note">
-<p>注意:你會在「應用程式管理員 (App Manager)」中看到「manifest」中文翻譯為「安裝資訊檔」。</p>
-</div>
-
-<h3 id="開啟托管架設式_App">開啟托管/架設式 App</h3>
-
-<p>點選「開啟架設的應用程式...」開啟<a href="/en-US/Marketplace/Options/Hosted_apps">托管/架設式 (Hosted) App</a>。你必須輸入 1 組網址指向該 App 的 <a href="/en-US/Apps/Build/Manifest">manifest</a> 檔案,然後就會在<a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">專案編輯器</a>中開啟該 App。</p>
-
-<h2 id="編輯_App">編輯 App</h2>
-
-<p>專案編輯器可供編輯 App。左側邊欄是 App 所有檔案的樹狀結構,可透過右鍵選單來新增、刪除檔案。右邊一大塊就是檔案編輯面板。</p>
-
-<h3 id="App_總覽頁面">App 總覽頁面</h3>
-
-<p>如果是第一次打開或新建 App 時,編輯面板會出現 App 總覽頁面:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
-
-<p>你可隨時透過左側的檔案樹狀圖,回到 App 總覽頁面。</p>
-
-<h3 id="Manifest_檔案檢查">Manifest 檔案檢查</h3>
-
-<p>WebIDE 會自動檢查 manifest 檔案的常見問題。只要發現問題,就會在 App 總覽頁面中顯示並說明錯誤原因:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
-
-<p>當然也可以在專案編輯器中,直接編輯 App 的 <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> 檔案。</p>
-
-<h3 id="原始碼編輯器">原始碼編輯器</h3>
-
-<p>WebIDE 是使用 <a href="http://codemirror.net/">CodeMirror</a> 原始碼編輯器。</p>
-
-<h4 id="原始碼編輯器快捷鍵">原始碼編輯器快捷鍵</h4>
-
-<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
-
-<h4 id="程式碼補齊">程式碼補齊</h4>
-
-<p>當編輯 CSS 和 JavaScript 時,編輯器會自動補齊建議字串。 CSS 自動補齊功能預設為開啟:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">按「Control + Space」就可顯示 JavaScript 的自動補齊建議:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
-
-<h4 id="行內說明文件">行內說明文件</h4>
-
-<p>編輯器也可顯示 JavaScript 的行內說明文件。只要按下「Shift + Space」,就會跳出目前滑鼠游標放置的條目之說明:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
-
-<p>在提示視窗中點選 <code>[docs]</code> 連結,就會帶你到該條目所對應的 MDN 頁面。</p>
-
-<h4 id="儲存檔案">儲存檔案</h4>
-
-<p>你必須儲存檔案之後,才能觀看檔案修改成果。如果是修改過但尚未儲存的檔案,則樹狀圖的檔名旁邊將顯示星號。你可透過選單或按下「Control+S」,即可儲存檔案 (Mac OS X 則為「Command+S」)。</p>
-
-<h3 id="移除專案">移除專案</h3>
-
-<p>要從 WebIDE 移除 App,可在 <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">App 總覽頁面</a>點選「移除專案 (Remove Project)」。</p>
-
-<h2 id="執行並除錯_App">執行並除錯 App</h2>
-
-<p>當準備好要執行 App 時,必須從<a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">「選擇 Runtime」下拉式選單中選取任一執行環境</a>。如果沒有適合的執行環境,請參考<a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">設定執行環境</a>。</p>
-
-<p>WebIDE 工具列中間的「Play」按鈕現已可點擊。點下之後就會在你所選的執行環境中安裝並執行 App:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">這時按下「Pause」就會出現開發者工具的<a href="/en-US/docs/Tools/Tools_Toolbox">工具箱</a>,以利你對已連結的 App 進行除錯:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">這裡會根據所選的執行環境而提供除錯工具,且必定會提供如<a href="/en-US/docs/Tools/Page_Inspector">檢測器 (Inspector)</a>、<a href="/en-US/docs/Tools/Web_Console">主控台 (Console)</a>、<a href="/en-US/docs/Tools/Debugger">JavaScript 除錯器</a>、<a href="/en-US/docs/Tools/Style_Editor">樣式編輯器 (Style Editor)</a>、<a href="/en-US/docs/Tools/Profiler">效能分析器 (Profiler)</a>、<a href="/en-US/docs/Tools/Scratchpad">程式碼速記本 (Scratchpad)</a> 等基本工具。就如同一般網頁,透過這些工具做出的修改,都可以即時在 App 中看到結果,但僅暫存。相反的,透過編輯面板修改的檔案,都會直接儲存到硬碟之中,但必須重新啟動 App 才能看到結果。</p>
-
-<h3 id="Certified_App_的除錯">Certified App 的除錯</h3>
-
-<p>若是搭配模擬器,則只要已選擇了執行環境,再點擊 App 的下拉選單,則不僅僅是你的 App,只要是該執行環境正執行中的所有 App 都會列在上面,包含<a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">Certified App</a>。這時即可除錯所你選擇的 App:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
-
-<p><br>
- 不過,如果要在實際裝置除錯 Certified App 還需要:</p>
-
-<ul>
- <li>裝置必須搭載 Firefox OS 1.2 或更高版本</li>
- <li>必須啟動 Certified App 除錯功能</li>
-</ul>
-
-<p>如果要啟動 Certified App 除錯功能,就要先連接執行環境,然後在選單中找到 <code>Runtime &gt; Runtime Info</code>。如果你在這裡看到「開發工具受限權限 (<code>DevTools restricted privileges)」為「Yes</code>」,就表示無法進行 Certified App 的除錯。根據你除錯對象的不同,後續步驟也有所差異:</p>
-
-<ul>
- <li>實際裝置
- <ul>
- <li>如果你的裝置可進行 rooted,則點選「需要更高權限 (<code>Request higher privileges)」,</code>就會啟動 Certified App 的除錯功能;Firefox OS 亦將重新啟動。</li>
- </ul>
- </li>
- <li>模擬器
- <ul>
- <li>模擬器已經預設開啟 Certified App 的除錯功能。</li>
- </ul>
- </li>
- <li>B2G 桌機裝置
- <ul>
- <li>在連線並啟動 Certified App 除錯功能之後,即可手動編輯 B2G 桌機用戶端的<a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">設定</a>。</li>
- </ul>
- </li>
-</ul>
-
-<p>現在 (或在重新啟動 B2G 桌機用戶端之後) 你應該可以到 WebIDE 看到裝置中的所有 Certified App 了。</p>
-
-<h2 id="監控效能">監控效能</h2>
-
-<p>如果你想知道自己 App 的效能,也有幾種方法可於 WebIDE 的執行環境中測得:</p>
-
-<ul>
- <li>「<a href="https://developer.mozilla.org/docs/Tools/WebIDE/Monitor">監控 (Monitor)</a>」面板可初步顯示裝置的效能,協助你找出問題所在。例如 App 佔用的記憶體突然暴增。</li>
- <li>「<a href="https://developer.mozilla.org/docs/Tools/Profiler">效能分析器</a>」工具可讓你細部分析 App。如果要調查已知的效能問題就特別有用。</li>
-</ul>
-
-<h3 class="r" id="疑難雜症_(Troubleshooting)">疑難雜症 (Troubleshooting)</h3>
-
-<p>WebIDE 的其他使用問題,請參閱<a href="/en-US/docs/Tools/WebIDE/Troubleshooting">疑難雜症</a>頁。</p>
-
-<p> </p>
-
-<p> </p>
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
----
-<h2 id="連接_Firefox_OS_裝置">連接 Firefox OS 裝置</h2>
-
-<p>如果您連接了 Firefox OS 裝置,但該裝置沒有出現在 WebIDE 裡,有些事情您可以先試試:</p>
-
-<ul>
- <li>檢查 Firefox OS 版本:請確定您的 Firefox OS(Boot2Gecko)版本是 1.2 以上,方能使用 WebIDE。版本號碼可至「設定 &gt; <code>裝置資訊」下的「軟體」查詢。如果您的版本太舊,可考慮依循</code> <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> 的說明升級。</li>
- <li>啟用遠端除錯工具:請至「設定」中「裝置資訊 &gt; 更多資訊 &gt; 開發者」中
- <ul>
- <li>Firefox OS 1.3 以前:勾選「Remote Debugging」</li>
- <li>Firefox OS 1.4 以後:「Remote Debugging」選單中有「僅 ADB」及「ADB 與開發工具」兩個選項,請選擇「ADB 與開發工具」。</li>
- </ul>
- </li>
- <li>停用螢幕鎖:in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
- <li>不要同時在電腦上連接 Firefox OS 手機與另一隻 Android 手機。</li>
- <li>if <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li>
- <li>if you use Linux, make sure you added add a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
- <li>if you use Windows:
- <ul>
- <li>you need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
- <li>if the WebIDE can't see your device after following all the steps, you may have to <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
- </ul>
- </li>
-</ul>
-
-<h2 id="為認證過的應用程式除錯">為認證過的應用程式除錯</h2>
-
-<p>如果您想為認證過的應用程式(包括內建的應用程式)除錯,請參考 <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</a> 中的說明。</p>
-
-<h2 id="Enable_logging">Enable logging</h2>
-
-<p>You can also enable verbose logging to gather diagnostics:</p>
-
-<ol start="1" style="list-style-type: decimal;">
- <li>visit <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, with the string value <code>all, and set </code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code> to true</code></span></span></li>
- <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li>
- <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li>
-</ol>
-
-<h2 id="尋求協助">尋求協助</h2>
-
-<p>請上 <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">IRC 的 #devtools</a> 頻道尋求協助。</p>