initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
commit: 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree: a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/tools
parent: 074785cea106179cb3305637055ab0a009ca74f2 (diff)
download: translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
31 files changed, 3315 insertions, 0 deletions
diff --git a/files/zh-tw/tools/3d_view/index.html b/files/zh-tw/tools/3d_view/index.html
new file mode 100644
index 0000000000..463946c4c7
--- /dev/null
+++ b/files/zh-tw/tools/3d_view/index.html
@@ -0,0 +1,102 @@
+---
+title: 3D view
+slug: Tools/3D_View
+translation_of: Tools/3D_View
+---
+<div class="warning">
+<p>自 Firefox 47 開始，3D View 不再可用</p>
+
+<p>有個 <a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D </a>套件提供相同功能。但是，請記得這和內建版本一樣，無法在 <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> 使用。</p>
+</div>
+
+<p>當您點擊 3D View 按鈕，頁面將進入 3D 檢視模式，在這模式之下，您將看到頁面以 HTML 標籤層次，形成從底部向外突起的 3D 模型。這功能讓您可用更簡單的方式檢視頁面結構。</p>
+
+<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
+
+<p>經由點擊及拖曳，您可以旋轉、重新定位 3D 圖像，以看到不同角度來確定結構。原先於屏幕外的元素將變為可見，如此一來您將可看見他們和可見元素的關係。您可以點擊元素經由 <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML panel</a> 或是 <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel </a>查看 HTML。相反地，您也能點擊導航列去選擇選取 3D View 中的特定元素。</p>
+
+<p>如果您在頁面檢測器沒看到 3D 按鈕，可能是您的顯示卡驅動需要更新。查看<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">無法使用的清單</a>以取得更多資訊</p>
+
+<h2 id="操作_3D_View">操作 3D View</h2>
+
+<p>該怎麼使用鍵盤快速鍵及滑鼠控制 3D View？</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">功能</td>
+   <td class="header">鍵盤按鍵</td>
+   <td class="header">滑鼠</td>
+  </tr>
+  <tr>
+   <td>縮放</td>
+   <td>+ / -</td>
+   <td>滾輪上下</td>
+  </tr>
+  <tr>
+   <td>左右旋轉</td>
+   <td>a / d</td>
+   <td>滑鼠左右</td>
+  </tr>
+  <tr>
+   <td>上下翻轉</td>
+   <td>w / s</td>
+   <td>滑鼠上下</td>
+  </tr>
+  <tr>
+   <td>左右平移</td>
+   <td>← / →</td>
+   <td>滑鼠左右</td>
+  </tr>
+  <tr>
+   <td>上下平移</td>
+   <td>↑ / ↓</td>
+   <td>滑鼠上下</td>
+  </tr>
+  <tr>
+   <td>重設縮放大小</td>
+   <td>0</td>
+   <td>重設縮放大小為預設值</td>
+  </tr>
+  <tr>
+   <td>聚焦於選擇的節點</td>
+   <td>f</td>
+   <td>請確定該節點可見 {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td>重設 3D View</td>
+   <td>r</td>
+   <td>將縮放、旋轉、位置重設為預設值 {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td>隱藏節點</td>
+   <td>x</td>
+   <td>
+    <p>隱藏選擇的節點，這在您需要找到被遮蓋的節點時很實用 {{ fx_minversion_inline("12.0") }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="3D_view_的使用時機">3D view 的使用時機</h2>
+
+<p>下列時機中，3D View 很實用：</p>
+
+<ul>
+ <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li>
+ <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li>
+ <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li>
+ <li>另外，這看起來<strong>超棒der</strong></li>
+</ul>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li><a href="/zh-TW/Tools/Page_Inspector" title="頁面檢測器">頁面檢測器</a></li>
+ <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
+ <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li>
+ <li><a href="/zh-TW/Tools" title="Tools">工具</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/zh-tw/tools/browser_toolbox/index.html b/files/zh-tw/tools/browser_toolbox/index.html
new file mode 100644
index 0000000000..686a7ed06d
--- /dev/null
+++ b/files/zh-tw/tools/browser_toolbox/index.html
@@ -0,0 +1,41 @@
+---
+title: Browser Toolbox
+slug: Tools/Browser_Toolbox
+translation_of: Tools/Browser_Toolbox
+---
+<p>瀏覽器工具箱有別於一般的<a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox">工具箱</a>，它可以讓您對附加元件以及瀏覽器本身的 JavaScript 程式碼除錯。瀏覽器工具箱所顯示的內容為整個瀏覽器而非僅有單一頁面的內容。h</p>
+
+<div class="note">
+<p>註: 如果您要為無需新啟動或是基於 SDK 的附加元件除錯，請使用 <a href="https://developer.mozilla.org/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>。</p>
+</div>
+
+<h2 id="啟用瀏覽器工具箱">啟用瀏覽器工具箱</h2>
+
+<p>瀏覽器工具箱預設為關閉。要啟用瀏覽器工具箱，您必須要勾選「Enable chrome and addon debugging」與「Enable remote debugging」兩個選項。</p>
+
+<ul>
+ <li>open the <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a></li>
+ <li>check <em>Enable chrome debugging</em> and <em>Enable remote debugging</em></li>
+</ul>
+
+<p>Now you should see a new item in the Web Developer menu in Firefox labeled "Browser Toolbox".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">Click the menu item and you'll be presented with a dialog like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">Click OK, and the Browser Toolbox will open in its own window:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">You'll see, and be able to debug, all the JavaScript files loaded by the browser itself and by any add-ons that are running. Altogether you will have access to the following developer tools:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/zh-tw/tools/debugger/how_to/index.html b/files/zh-tw/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/zh-tw/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html b/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..d630094589
--- /dev/null
+++ b/files/zh-tw/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,24 @@
+---
+title: Open the debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>有三種方式可以打開除錯器:</p>
+
+<ul>
+ <li>select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li>
+ <li>
+  <p>press the <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> on Windows and Linux or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd> on macOS</p>
+
+  <div class="blockIndicator note"><strong>Note:</strong> This shortcut will not work with Firefox 66 or later. However, you can press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> on Windows and Linux, <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd>, or <kbd>F12</kbd> to open the toolbox and then select the Debugger tool.</div>
+ </li>
+ <li>press the menu button ( <img alt="new fx menu" class="frameless wiki-image" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;" title=""> ), select "Developer", then "Debugger".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<div id="gtx-trans" style="position: absolute; left: 9px; top: 21px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html b/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..04044571e5
--- /dev/null
+++ b/files/zh-tw/tools/debugger/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,25 @@
+---
+title: Set a breakpoint
+slug: Tools/Debugger/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>你可以使用以下任一種方法來設置中斷點；</p>
+
+<ul>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗中</a>，點選你想要設置中斷的行號來設置中斷點。</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗</a>，當你位於你想要中斷的那一行上時，啟動 context menu，然後選擇 "新增中斷點"</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane"> 原始碼視窗</a>，標記出你想要中斷的那一行，然後按下 Ctrl+B (Windows/Linux) 或是 Command+B (Mac OS X)</li>
+</ul>
+
+<p>以下影片使用 context menu 來設置一個中斷點:</p>
+
+<p>{{EmbedYouTube("P7b98lEijF0")}}</p>
+
+<p>每個中斷點會在除錯器中的兩個地方顯示；</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">中斷清單</a>中會顯示檔名以及中斷點所在的行號。</li>
+ <li>在<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">原始碼視窗</a> 中，如果中斷點是<a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">有條件的</a>，那麼那一行將會以藍色或橘色的箭頭標記。</li>
+</ul>
diff --git a/files/zh-tw/tools/debugger/index.html b/files/zh-tw/tools/debugger/index.html
new file mode 100644
index 0000000000..ca245fc16a
--- /dev/null
+++ b/files/zh-tw/tools/debugger/index.html
@@ -0,0 +1,58 @@
+---
+title: 除錯器
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<div class="note">
+<p>本頁在描述 Firefox Nightly 與 Firefox Developer Edition 第 52 版以後的 JavaScript 除錯器（Debugger）。</p>
+
+<p>要找在此版本之前、或是位於 Beta 與 Release 通道的 Firefox，請參閱<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger_%28before_Firefox_52%29">Firefox 52 之前的除錯器</a>。</p>
+
+<p>如果你是這個版本的除錯器，但需要用舊版本的除錯器，你可以去 about:config 那裡，把「devtools.debugger.new-debugger-frontend」選為 <code>false</code></p>
+</div>
+
+<p>{{EmbedYouTube("QK4hKWmJVLo")}}</p>
+
+<p>JavaScript 除錯器可以讓 JavaScript 單步執行，並檢查或修改其狀態，以便查找錯誤。</p>
+
+<p>你可以在本地或是在遠端除錯用 Firefox 除錯。一個遠端除錯的例子，就是在 Android 設備上執行 Firefox for Android。請參閱<a href="/zh-TW/docs/Tools/Remote_Debugging">遠端除錯</a>以理解如何把欲除錯的目標，連接到除錯器上。</p>
+
+<p>The debugger ships inside Firefox, and these pages describe how to use the version that's embedded in Firefox. However, you can also run it as a standalone web application, and can then use it to debug code running in other browsers and in Node. For more details on that, see the <a href="https://github.com/devtools-html/debugger.html">project's GitHub repository</a>.</p>
+
+<p>新版除錯器尚未支援所有舊版除錯器的功能。請參閱<a href="/zh-TW/docs/Tools/Debugger/Limitations_of_the_new_debugger">新版除錯器的侷限</a>。</p>
+
+<hr>
+<h2 id="用戶介面導覽">用戶介面導覽</h2>
+
+<p>如果要自己摸索除錯器，我們有<a href="/zh-TW/docs/Tools/Debugger/UI_Tour">UI 的快速導覽</a>。</p>
+
+<hr>
+<h2 id="如何">如何</h2>
+
+<p>如果要知道除錯器可以做什麼，請看看以下的教學：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Open_the_debugger">打開除錯器</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Set_a_breakpoint">設定中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">設定有條件的中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Disable_breakpoints">解除中斷點</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Step_through_code">單步執行程式碼</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Breaking_on_exceptions">在例外中斷</a></li>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger/How_to/Set_Watch_Expressions">設定觀察表達式</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">美化壓縮檔案</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Search">搜尋</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Debug_eval_sources">eval 來源除錯</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="參閱">參閱</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Debugger/Keyboard_shortcuts">快捷鍵</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger/Source_map_errors">Source map errors</a></li>
+</ul>
+</div>
diff --git a/files/zh-tw/tools/firefox_os_1.1_simulator/index.html b/files/zh-tw/tools/firefox_os_1.1_simulator/index.html
new file mode 100644
index 0000000000..08483cbb3f
--- /dev/null
+++ b/files/zh-tw/tools/firefox_os_1.1_simulator/index.html
@@ -0,0 +1,240 @@
+---
+title: Firefox OS 1.1 Simulator
+slug: Tools/Firefox_OS_1.1_Simulator
+translation_of: Tools/Firefox_OS_1.1_Simulator
+---
+<div id="doc-content">
+ <div class="page-content boxed">
+  <div class="note">
+   <p>本頁將說明「舊版」的 Firefox OS 模擬器 (Firefox OS Simulator)。只有在開發 Firefox 1.1 所適用的 App 時，才使用 1.1 版模擬器。且本版模擬器僅能安裝於 Firefox 24 或 Firefox 25 之上。</p>
+   <p>如果要針對 Firefox OS 1.2 或更高版本開發 App，則必須<a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS/Using_the_App_Manager">使用「應用程式管理員 (App Manager)」</a>。</p>
+   <p>若需要任何協助，請透過 <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools 郵件群組</a>或 <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a> 發問。</p>
+  </div>
+  <p>Firefox OS 模擬器 (Firefox OS Simulator) 附加元件，可讓你在桌機上測試自己的 <a href="https://developer.mozilla.org/en-US/docs/Apps" title="/en-US/docs/Apps">Firefox OS App</a>。若與實際裝置相較，模擬器可協助開發者順利完成「撰寫─測試─除錯」的程序，而且你還不用真的弄到實際設備就能夠測試 App。</p>
+  <p>此附加元件基本上包含：</p>
+  <ul>
+   <li><strong>模擬器：</strong>其內有 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS Desktop Client</a>，屬於 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> 較高層級的版本，可於桌機中執行。模擬器所具備的某些<a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Simulator-toolbar" title="#Simulator-toolbar">附加模擬功能</a>，甚至是標準 Firefox OS 桌面版所沒有的。</li>
+   <li><strong>Dashboard：</strong>此為 Firefox 瀏覽器所管理的工具，可用以啟動/停止模擬器，並可安裝、除錯、解除安裝模擬器所執行的 App。Dashboard 亦可協助將 App 送入實際裝置，針對常見問題而檢查 App 的 manifest 檔案。.</li>
+  </ul>
+  <p>下方截圖則是以模擬器所進行的除錯作業。</p>
+  <p>「Dashboard」即於右上的 Firefox 分頁中執行。我們在這裡新增了「Where am I?」的封裝式 (Packaged) App。左上方就是模擬器正執行的 App。這裡同時也連上了除錯工具，就位在視窗底端。你也可以看到我們設定了 App 的中斷點。</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+  <p>本篇指南涵蓋下列主旨：</p>
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Installing" title="#Installing">模擬器附加元件的安裝方式</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Adding-updating-removing" title="#Adding-updating-removing">新增、移除、更新 App 的方式</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Manifest-validation" title="#Manifest-validation">檢驗 manifest 檔案</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Running-the-Simulator" title="#Running-the-Simulator">模擬器執行方式</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Attaching-developer-tools" title="#Attaching-developer-tools">應如何連接開發者工具 (如 JS debugger) 與模擬器所執行的 App</a></li>
+   <li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Firefox_OS_Simulator$edit#Simulator-receipts" title="#Simulator-receipts">應如何取得付費 App 的測試用收據</a></li>
+   <li><a href="https://developer.mozilla.org/zh-TW/docs/Tools/Firefox_OS_Simulator$edit#Push-to-device" title="#Push-to-device">應如何將 App 送入已連線的裝置</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Limitations" title="#Limitations">與實際 Firefox OS 裝置相較，模擬器的限制為何</a></li>
+  </ul>
+  <div class="note">
+   若要用模擬器對實際的 Apps 進行除錯，請參閱《<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Firefox OS 模擬器簡易攻略</a>》頁面。</div>
+  <h2 id="安裝「Firefox_OS_Simulator」附加元件"><a name="Installing">安裝「Firefox OS Simulator」附加元件</a></h2>
+  <p>此模擬器軟體已封裝並發佈為 Firefox 的附加元件。安裝步驟為：</p>
+  <ol>
+   <li>開啟 Firefox 並前往 <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">addons.mozilla.org 上的 Simulator 頁面</a>。</li>
+   <li>點選「Add to Firefox」。</li>
+   <li>下載附加元件完畢，系統隨即提醒你安裝。點選「立刻安裝 (Install Now)」。</li>
+  </ol>
+  <p>由於附加元件的檔案大小有所不同，Firefox 可能於安裝期間暫停數秒，並可能顯示「注意：發現容易停止回應的程式碼 (Warning: Unresponsive script)」對話框。如果出現此對話框，就點選「繼續 (Continue)」等到安裝作業結束即可。自 Firefox 27 起應該就不會再出現此問題。<br>
+   <br>
+   一旦安裝模擬器附加元件完畢，Firefox 將定期檢查是否有更新版本，隨時保持最新版本。</p>
+  <p>模擬器安裝期間隨即自動開啟 Dashboard。另外只要點選「Firefox」選單 (若是 OS X 與 Linux，則為「工具」選單)，再點選「網頁開發者 (Web Developer)」→「Firefox OS Simulator」，都可再開啟 Dashboard：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br>
+   Dashboard 可讓你將 App 新增至模擬器內並執行之。看起來就像下圖：<img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p>
+  <h2 id="新增、移除、重新整理_App"><a name="Adding-updating-removing">新增、移除、重新整理 App</a></h2>
+  <h3 id="新增_App">新增 App</h3>
+  <p>如果要將<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-840092-dup/Packaged_apps?redirectlocale=en-US&amp;redirectslug=Apps%2FPackaged_apps" title="/en-US/docs/Apps/Packaged_apps">封裝式 (Packaged) App</a> 新增至模擬器中，則請開啟 Dashboard，點選「Add Directory」並找到 App 的 <a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest">manifest 檔案</a>。<br>
+   <br>
+   若要新增托管式 (Hosted) App，則於「URL for page or manifest.webapp」的文字框中輸入網址，再點選「Add URL」。如果網址指向 manifest 檔案，就會使用該 manifest 檔案；反之，則 Dashboard 將針對該網址產生 manifest 檔案。所以只要輸入網站網址，都可新增該網站作為 App。<br>
+   <br>
+   在新增 App 時，Dashboard 將為 manifest 檔案執行一系列的測試，檢查是否有常見問題。可參閱下方 <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Manifest-validation" title="#Manifest-validation">Manifest 檔案檢驗</a>以了解測試細節。</p>
+  <p>除非 manifest 檔案檢驗程序真的發現了 App 的錯誤，否則 Dashboard 均將自動於模擬器中執行你的 App。</p>
+  <h3 id="管理_App">管理 App</h3>
+  <p>一旦新增了 App，就會出現在管理程式的 App 清單中：<br>
+   <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+   各個項目均提供了 App 的相關資訊：</p>
+  <ul>
+   <li>App 的名稱 ─ 取自於 manifest 檔案</li>
+   <li>App 的類型 ─ 可能為「Packaged」、「Hosted」、「Generated」之一</li>
+   <li>其 manifest 檔案的連結</li>
+   <li>manifest 檔案檢驗的結果</li>
+  </ul>
+  <p>另外會提供 4 項指令：</p>
+  <ul>
+   <li><strong>「Refresh<strong>」：</strong></strong>在變更過 App 之後，可透過此指令更新並重新載入模擬器中的 App。此指令亦可讓 Dashboard 再次檢驗 manifest 檔案。如果變更過 App 之後卻沒有自動反應在「installed app:」中，則必須重新整理才能套用變更。</li>
+   <li><strong>「Connect<strong>」：</strong></strong>此指令可銜接開發工具與指定的 App。如果尚未執行 App 與模擬器，則 Dashboard 將啟動之。</li>
+   <li><strong>「Remove<strong>」(也就是「X」)：</strong></strong>此指令可為 Dashboard 與模擬器移除 App。只要開啟了 Dashboard 分頁，亦可取消此動作。</li>
+   <li><strong>「Receipt<strong>」：</strong></strong>此指令可針對付費 App 測試收據的驗證作業。在選擇了所要測試的收據類型之後，將重新安裝該 App 並包含所選類型的測試收據。</li>
+  </ul>
+  <div class="note">
+   <p><strong>從模擬器視窗重新整理 App：</strong>在 App 執行時，只要透過<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Firefox_OS_Simulator$edit#Simulator-menubar" title="#Simulator-menubar">選單列與相關快捷鍵</a>，即可從模擬器視窗直接更新並重新載入 App。</p>
+  </div>
+  <h3 id="檢驗_Manifest_檔案"><a name="Manifest-validation">檢驗 Manifest 檔案</a></h3>
+  <p>當提供 manifest 檔案時，管理程式將執行某些檢驗測試，所回報的問題可分為 3 大類：</p>
+  <ul>
+   <li>manifest 錯誤：這種問題將導致 App 無法執行。</li>
+   <li>manifest 警示：這種問題將導致 App 無法正確運作。</li>
+   <li>模擬器特定警示：目前模擬器尚未支援此 App 所使用的功能。</li>
+  </ul>
+  <p>管理程式將總結 App 所遇到的問題。可點選摘要以獲得更多詳情。</p>
+  <h4 id="Manifest_檔案錯誤">Manifest 檔案錯誤</h4>
+  <p>下列狀態均將由 Dashboard 回報為錯誤。也就是說，你必須修復之後才能在模擬器中繼續執行 App：</p>
+  <ul>
+   <li>manifest 檔案沒有必要的「name」欄位。</li>
+   <li>manifest 檔案為無效 JSON。</li>
+   <li>此 App 屬於托管式 App，但其 manifest 檔案中的<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest#type">類型 (type)</a> 欄位為<a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">「Privileged」或「Certified」</a>；而此 2 種類型僅限用於封裝式 App。</li>
+   <li>常見的 appCache 錯誤 (封裝式 App 無法使用 appCache，對 manifest 網址的請求，回傳了 HTTP 重新導向狀態或 HTTP 錯誤狀態)</li>
+  </ul>
+  <p>如果新增的 manifest 檔案缺少了「name」欄位，就會出現如下圖的結果：<br>
+   <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+  <h4 id="Manifest_檔案警示">Manifest <strong>檔案警示</strong></h4>
+  <p>下列 manifest 檔案的問題，Dashboard 均將回報為警示：</p>
+  <ul>
+   <li>缺少圖示。</li>
+   <li>圖示低於 128 像素：提交至 Marketplace 的所有 App，其代表圖示均必須為至少 128 像素的方塊圖。</li>
+   <li>無法辨別「<a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a>」欄位。</li>
+   <li>manifest 檔案所請求的「<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest#permissions">權限</a>」無法辨別。</li>
+   <li>manifest 檔案所請求的「<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest#permissions">權限</a>」遭拒。</li>
+   <li>manifest 檔案所請求的「<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest#permissions">權限</a>」無法決定其存取作業。</li>
+  </ul>
+  <h4 id="模擬器特定警示"><strong>模擬器特定警示</strong></h4>
+  <p>最後，針對 App 所要使用的 Firefox OS 功能，但模擬器卻尚未支援的情況，管理程式將送出警示：</p>
+  <ul>
+   <li>「<a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a>」欄位屬於「Certified」，但模擬器尚未完整支援 Certified App。</li>
+   <li>manifest 檔案請求「<a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Apps/Manifest#permissions">權限</a>」以使用 API，但模擬器<a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Unsupported-APIs" title="#Unsupported-APIs">尚未支援</a>此 API。</li>
+  </ul>
+  <h2 id="執行模擬器"><a name="Running-the-Simulator">執行模擬器</a></h2>
+  <p>有 2 種方式可啟動模擬器：</p>
+  <ul>
+   <li>如果要新增、更新、移除 App，或是按下 App 輸入項旁邊的「Run」按鈕，則 Dashboard 就會在模擬器中自動執行 App。</li>
+   <li>如果按下 Dashboard 左側的「Stopped」按鈕，則模擬器將回到首頁畫面，讓你再瀏覽自己的 App。</li>
+  </ul>
+  <p>不論哪種方法，只要模擬器處於執行狀態，則「Stopped」按鈕會轉成綠色，且按鈕文字也會轉成「Running」。如果要停下模擬器，再按下相同按鈕即可。<br>
+   <br>
+   模擬器將以獨立視窗顯示，而該模擬畫面將為 320x480 像素，且<a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator#Simulator-toolbar" title="#Simulator-toolbar">底部工具列 (Toolbar) 將提供某些額外功能</a>。</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+  <p>若要模擬觸控事件，只要點擊滑鼠不放再拖曳即可。所以如果在主畫面按下滑鼠並由右至左拖曳，就可以看到內建的 App 還有你自己新增的 App：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+  <h3 id="模擬器工具列"><a name="Simulator-toolbar">模擬器工具列</a></h3>
+  <p>在模擬器視窗底部的工具列，由左至右分別為<strong>主畫面 (Home)、畫面旋轉 (Screen Rotation)、地理位置定位 (Geolocation)</strong> 共 3 個按鈕：</p>
+  <ul>
+   <li>「<strong>主畫面</strong>」可回到主畫面 (或長按不放則可進入工作清單)。</li>
+   <li>「<strong>畫面旋轉</strong>」可切換裝置的橫向、直向畫面；即產生 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> 事件。</li>
+   <li>「<strong>地理位置定位</strong>」將觸發對話框，詢問使用者是否要分享自己的地理位置。這個功能可能會套用你目前的座標，或提供自訂座標。App 可搭配 <a href="https://developer.mozilla.org/zh-TW/docs/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a> 而提供此功能。</li>
+  </ul>
+  <p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p>
+  <h3 id="模擬器選單列_(Menubar)"><a name="Simulator-menubar"></a>模擬器選單列 (Menubar)</h3>
+  <p>在頂端的選單列上即提供多項有用的指令，讓你達到更高的開發效率：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+  <ul>
+   <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>)：關閉模擬器</li>
+   <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>)：重新整理執行中的 App</li>
+  </ul>
+  <p>若於鍵盤上使用<strong>「App Refresh」</strong> 指令快捷鍵，則開發 App 就更像是撰寫網頁一樣：</p>
+  <ul>
+   <li>更改程式碼 (並依需要而重新執行自己的程式設計工具，如 volo / yeoman / grunt)</li>
+   <li>按下快捷鍵，即可重新整理正於模擬器中執行的 App</li>
+  </ul>
+  <div class="note">
+   <p><strong>「Refresh App and Clear Data」隱藏快捷鍵：</strong>針對模擬器為 Apps 所儲存的資料，有時若能清除相關資料更有利於開發作業。因此模擬器亦提供隱藏版的快捷鍵「Shift - Ctrl/Cmd - R」。在清除下列資料時，此快捷鍵亦可重新整理正執行中的 App：</p>
+   <ul>
+    <li>
+     <p>localStorage / sessionStorage</p>
+    </li>
+    <li>
+     <p>cookies</p>
+    </li>
+    <li>
+     <p>indexedDB</p>
+    </li>
+    <li>
+     <p>appCache</p>
+    </li>
+   </ul>
+  </div>
+  <h2 id="附掛開發者工具"><a name="Attaching-developer-tools">附掛開發者工具</a></h2>
+  <p>使用者可為模擬器附掛開發工具，讓 App 的除錯作業更順利。目前僅能附掛<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript 除錯器 (JavaScript Debugger)</a>、<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">網頁主控台 (Web Console)</a>、<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">樣式編輯器 (Style Editor)</a>、<a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">效能分析器 (Profiler)</a>、<a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">網路監測器 (Network Monitor)</a>。當然，我們仍將持續支援更多<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">開發工具</a>。</p>
+  <div class="geckoVersionNote">
+   <p>某些工具僅能用於 Firefox 的 Beta、Aurora，或 Nightly 版本。</p>
+  </div>
+  <p>若要為模擬器附掛開發工具，則可按下任一 App 的「<strong>Connect</strong>」按鈕：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+  <p>Dashboard 分頁下方隨即開啟開發者工具面板，並銜接 App：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+  <h3 id="網頁主控台_(Web_Console)">網頁主控台 (Web Console)</h3>
+  <p>如果勾選了「Stopped/Running」開關下方的「Console」方塊，則執行模擬器時會開啟<a href="https://developer.mozilla.org/en-US/docs/Error_Console" title="/en-US/docs/Error_Console">錯誤主控台 (Error Console)</a>。透過這個通用的<a href="https://developer.mozilla.org/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">主控台</a>物件，你的 App 均將由主控台所記錄。</p>
+  <h3 id="除錯器_(Debugger)">除錯器 (Debugger)</h3>
+  <p>透過除錯器，可針對執行中的 App 逐行檢查其 JavaScript 程式碼、管理中斷點、監看表示式，以更迅速追蹤錯誤與問題。<a href="https://developer.mozilla.org/zh-TW/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">進一步了解除錯器</a>。</p>
+  <h3 id="樣式編輯器_(Style_Editor)">樣式編輯器 (Style Editor)</h3>
+  <p>可檢查並編輯 App 中設定的 CSS 檔案。你所進行的變更亦將即時套用至 App；而不需再重新整理。<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">進一步了解樣式編輯器</a>。</p>
+  <h3 id="效能分析器_(Profiler)"><strong>效能分析器 (</strong>Profiler)</h3>
+  <p>若銜接 App 與效能分析器，即可找出 JavaScript 程式碼耗時過長的部分。效能分析器將對目前 JavaScript 的 Call stack 定期取樣，並編寫樣本的統計資料。<a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">進一步了解效能分析器</a>。</p>
+  <h3 id="網路監測器_(Network_Monitor)"><strong>網路監測器 (</strong>Network Monitor)</h3>
+  <p>新的網路監測器提供友善介面，可針對 App 所啟動的網路請求，分析其狀態、標頭、內容、時間點等資訊。<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">進一步了解網路監測器</a>。</p>
+  <h2 id="收據_(Receipt)"><a name="Simulator-receipts"></a>收據 (Receipt)</h2>
+  <p>若你正開發付費 App，就應該在有效 (以加密方式簽署) 收據上，測試自己的收據驗證代碼 (此代碼將驗證使用者是否已購買了 App 或收到退款，接著通知使用者並鎖定/解鎖 App 的功能)。</p>
+  <p>模擬器的 Dashboard 對各個 App 均提供了「<strong>Receipts</strong>」選單，讓你可選擇「<strong>Valid</strong>」、「<strong>Invalid</strong>」、「<strong>Refunded</strong>」測試收據而安裝 App。只要選擇你想要測試的收據類型，則 Dashboard 就會從 Marketplace 收據服務中取得該類型的測試收據，並在模擬器中安裝 App：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+  <h2 id="直接傳輸_(Push_to_device)"><a name="Push-to-device">直接傳輸 (Push to device</a>)</h2>
+  <p>如果你手上已經有 Firefox OS 裝置並連上了模擬器，就可以從 Dashboard 直接將 App 送進裝置。</p>
+  <h3 id="連上裝置">連上裝置</h3>
+  <p>根據指南中的說明，就可順利將 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">Firefox OS 裝置連上桌機</a>。另請注意，模擬器附加元件已經包含了 ADB，所以你不需再次安裝。</p>
+  <h3 id="將_App_送入裝置">將 App 送入裝置</h3>
+  <p>設定完畢之後，就可透過 USB 銜接裝置與桌上型電腦。你可以看到 Dashboard 左邊出現「<strong>Device connected</strong>」的註記，而且各個 App 項目上都會出現新的「<strong>Push</strong>」指令：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+  <p>按下「<strong>Push</strong>」就會把 App 安裝進 Firefox OS 裝置中。</p>
+  <div class="note">
+   <p><strong>手動步驟：</strong></p>
+   <ul>
+    <li>
+     <p>一旦將 App 送入裝置之後，就必須手動關閉並重新啟動，才能取得更新內容。</p>
+    </li>
+    <li>
+     <p>如果你更新了 manifest 檔案 (如 App 的名稱、方向、類型、權限)，就必須重新啟動作業系統，才能讓變更生效。</p>
+    </li>
+   </ul>
+  </div>
+  <h3 id="Firefox_OS_裝置連線確認">Firefox OS <strong>裝置連線確認</strong></h3>
+  <p>每次只要重新啟動裝置，就必須確認裝置上的第一次「<strong>Push</strong>」請求：</p>
+  <p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p>
+  <h3 id="Linux_上的疑難排除">Linux 上的疑難排除</h3>
+  <p>如果建立 udev 規則之後還是無法銜接裝置，則請參閱這個<a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">問題</a>。</p>
+  <h2 id="模擬器的限制"><a name="Limitations">模擬器的限制</a></h2>
+  <p>請注意，Firefox OS 模擬器仍無法提供完美的模擬作業。</p>
+  <h3 id="硬體限制">硬體限制</h3>
+  <p>模擬器除了螢幕尺寸的限制之外，也無法模擬 Firefox OS 裝置的硬體 (例如 CPU 速度或可用的記憶體容量)。</p>
+  <h3 id="音訊視訊編碼">音訊/視訊編碼</h3>
+  <p>下列編碼 (Codecs) 因硬體加速解碼而有所不同，因此尚未支援：</p>
+  <ul>
+   <li>MP3</li>
+   <li>AAC</li>
+   <li>H.264 (MP4)</li>
+   <li>WebM</li>
+  </ul>
+  <p>也就是說，若 App 或網站 (如 Youtube) 使用這些編碼，則模擬器將無法測試其中的視訊回播功能。</p>
+  <h3 id="尚未支援的_API"><a name="Unsupported-APIs">尚未支援的 API</a></h3>
+  <p>一般來說，因為桌上型電腦無法使用支援硬體，所以可於裝置上運作的特定 API，可能無法用於模擬器之上。我們另外針對某些 API (例如 Geolocation 地理位置定位) 建構了模擬功能，未來版本亦將新增更多模擬 API。但目前仍尚未支援下列 API。如果使用了這些 API，也只會得到錯誤的報告或結果：</p>
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+  </ul>
+  <h2 id="獲得協助"><a name="Simulator-help"></a>獲得協助</h2>
+  <p>如果你發現了任何錯誤，請<a href="https://github.com/mozilla/r2d2b2g/issues?state=open">到 GitHub 提交這些錯誤</a>。如果有任何問題，也請透過 <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools 郵件群組</a>或到 <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a> 上發問。</p>
+  <h3 id="啟動詳細資訊_(verbose)_記錄的方法"><a name="Simulator-verbose-logging"></a>啟動詳細資訊 (verbose) 記錄的方法</h3>
+  <p>透過 about:config 即可建立 <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>，接著將之設定為整數值 0，並停用/重新啟用附加元件即可。有關模擬器作業的其他訊息，均將顯示於錯誤主控台 (Error Console) 中；或是較新版本 Firefox 的瀏覽器主控台 (Browser Console)。</p>
+ </div>
+</div>
+<div class="note">
+ <p> </p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/tools/index.html b/files/zh-tw/tools/index.html
new file mode 100644
index 0000000000..f61960184d
--- /dev/null
+++ b/files/zh-tw/tools/index.html
@@ -0,0 +1,192 @@
+---
+title: Firefox 開發者工具
+slug: Tools
+tags:
+  - Developing Mozilla
+  - NeedsMarkupWork
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - Tools
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div><p class="summary">在桌機與手機上檢查、編輯、並處理 HTML、CSS 與 JavaScript 的錯誤。</p>
+
+<hr>
+<div class="column-container">
+<div class="column-third"></div>
+
+<div class="column-third">
+<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
+
+<p style="text-align: center;">要尋找最新的開發工具與功能，請試試 Firefox Developer Edition。</p>
+
+<p><a href="https://www.mozilla.org/zh-TW/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p>
+</div>
+
+<div class="column-third"></div>
+</div>
+
+<hr>
+<h2 id="核心工具">核心工具</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="頁面檢測器">頁面檢測器</h3>
+
+<p><a href="/zh-TW/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15481/57-inspector.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>檢視並編輯網頁的內容與版面。視覺化各種東西，包括盒子模型、動畫、格線版面。</p>
+</div>
+
+<div class="column-half">
+<h3 id="網路主控台">網路主控台</h3>
+
+<p><a href="/zh-TW/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/15483/57-console.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>檢查網頁紀錄的訊息、並透過 JavaScript 與網頁互動。</p>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="JavaScript_除錯器">JavaScript 除錯器</h3>
+
+<p><a href="/zh-TW/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/15485/57-debugger.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>停步、逐步、試驗、修改網頁的 JavaScript。</p>
+</div>
+
+<div class="column-half">
+<h3 id="網路監控">網路監控</h3>
+
+<p><a href="/zh-TW/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15487/57-network.png" style="display: block; height: 239px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>看看網頁載入時發了什麼請求。</p>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="效能工具">效能工具</h3>
+
+<p><a href="/zh-TW/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>分析網站的通常反應、JavaScript、還有布局效能。</p>
+</div>
+
+<div class="column-half">
+<h3 id="適應性設計模式">適應性設計模式</h3>
+
+<p><a href="/zh-TW/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/15491/57-rdm.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
+
+<p>看看網站或 app 在不同的設備與網路狀況下表現如何。</p>
+</div>
+</div>
+
+<hr>
+<h2 id="更多工具">更多工具</h2>
+
+<p>Firefox 也內建了這些開發者工具，但通常不會像「核心工具」那麼常用。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/Memory">記憶體</a></dt>
+ <dd>找出哪個物件是用了記憶體哪個地方。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Storage_Inspector">儲存空間</a></dt>
+ <dd>檢查頁面存了什麼 cookie、本機的東西、indexedDB、session。</dd>
+ <dt><a href="/zh-TW/docs/Tools/DOM_Property_Viewer">DOM 屬性檢查器</a></dt>
+ <dd>檢查頁面的 DOM 屬性、函式之類的。</dd>
+ <dt><a href="/zh-TW/docs/Tools/GCLI">開發者工具列</a></dt>
+ <dd>開發者工具的命令行介面。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>選取網頁的顏色。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Scratchpad">速記本</a></dt>
+ <dd>Firefox 裡面文字編輯器，讓你能撰寫並執行 JavaScript。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Style_Editor">樣式編輯器</a></dt>
+ <dd>針對目前的頁面觀察與編輯 CSS 樣式。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Shader_Editor">Shader Editor</a></dt>
+ <dd>查看與編輯 <a href="/zh-TW/docs/Web/WebGL">WebGL</a> 使用的 vertex 與 fragment shader。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
+ <dd>檢查音頻的節點圖形，並修改其參數。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Screenshot_tool">擷取畫面</a></dt>
+ <dd>擷取整個網頁或是某個元素。</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="連接開發者工具">連接開發者工具</h2>
+
+<p>如果你透過<a href="/zh-TW/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">鍵盤快捷鍵</a>或等同的選單選項啟動了開發者工具，它的目標會針對目前頁籤的文件。不過，你也可以把工具連接到其他目標，不論是不是相同的瀏覽器、甚至是不是相同的設備。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/about:debugging">about:debugging</a></dt>
+ <dd>針對附加元件、內容頁籤、還有瀏覽器運行的 worker。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">連接到 Firefox for Android</a></dt>
+ <dd>連接開發者工具到在 Android 運行的 Firefox 實例。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Working_with_iframes">連接到 iframes</a></dt>
+ <dd>把開發者工具連接到頁面內指定的 iframe。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Valence">連接到其他瀏覽器</a></dt>
+ <dd>把開發者工具連接到 Android 的 Chrome 與 iOS 的 Safari。</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="給瀏覽器除錯">給瀏覽器除錯</h2>
+
+<p>開發者工具預設上是附加在網頁或網路 app 的。不過，你可以把它與瀏覽器作為一個整體連結起來。這在瀏覽器與附加元件開發方面會很有用。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/Browser_Console">瀏覽器控制台</a></dt>
+ <dd>看看瀏覽器附加元件紀錄的訊息，然後運行 JavaScript 程式碼。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Browser_Toolbox">瀏覽器工具箱</a></dt>
+ <dd>將開發者工具附加到瀏覽器本身。</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="擴展開發者工具">擴展開發者工具</h2>
+
+<p>開發者工具都設計為易於擴展的。Firefox 附加元件可以取用開發者工具與其元件，擴展現有工具或加入新工具。使用遠端除錯協定，可以建立自己的除錯用戶端與伺服器，讓你可以使用自己的工具為網站除錯，或針對不同的目標平台應用 Firefox 工具。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/Example_add-ons">開發用附加元件示例</a></dt>
+ <dd>透過實例理解如何作出一個開發用的附加元件。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Adding_a_panel_to_the_toolbox">給開發者工具加一個面板</a></dt>
+ <dd>給開發者工具寫一個添加新面板的附加元件。</dd>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">遠端除錯協定</a></dt>
+ <dd>協定用於連接 Firefox 開發者工具到如 Firefox 或 Firefox OS 設備之類的除錯目標。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Editor">原始碼編輯器</a></dt>
+ <dd>Firefox 內建，能嵌入到附加元件的原始碼編輯器。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Debugger-API"><code>Debugger</code> 介面</a></dt>
+ <dd>可以讓 JavaScript 程式碼觀察其他 JavaScript 程式碼的 API。Firefox 開發者工具利用該 API 實做了 JavaScript 程式碼除錯器。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Custom_output">自訂網頁主控台輸出</a></dt>
+ <dd>如何擴展與自訂 <a href="/zh-TW/docs/Tools/Web_Console">Web Console</a> 和 <a href="/zh-TW/docs/Tools/Browser_Console">Browser Console</a> 的輸出。</dd>
+</dl>
+</div>
+
+<hr>
+<h2 id="從_Firebug_遷移">從 Firebug 遷移</h2>
+
+<p>Firebug 已經走到產品生命的盡頭（理由請參閱 <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a>），我們明白有些人要遷移到不太熟悉的 DevTools 產品線會有點困難。針對從 Firebug 遷移到 Firefox 開發者工具壓力的緩解，我們寫了個方便的指南：<a href="/zh-TW/docs/Tools/Migrating_from_Firebug">從 Firebug 遷移</a>。</p>
+
+<hr>
+<h2 id="貢獻">貢獻</h2>
+
+<p>如果你想幫忙改進開發者工具，這些資源能幫助你。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt>
+ <dd>告訴你如何參與其中的 Mozilla wiki 頁面。</dd>
+ <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
+ <dd>能幫你找到目前在處理的錯誤。</dd>
+</dl>
+</div>
diff --git a/files/zh-tw/tools/network_monitor/index.html b/files/zh-tw/tools/network_monitor/index.html
new file mode 100644
index 0000000000..ee1a1d0624
--- /dev/null
+++ b/files/zh-tw/tools/network_monitor/index.html
@@ -0,0 +1,584 @@
+---
+title: Network Monitor
+slug: Tools/Network_Monitor
+translation_of: Tools/Network_Monitor
+---
+<p>網路監視器提供檢視所有從 Firefox 送出的網路需求 (像是從瀏覽器開啟一個頁面，或是一個 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests </a>)，例如需求所花費的時間，以及其他更詳細的資訊。</p>
+
+<h2 id="Opening_the_Network_Monitor">Opening the Network Monitor</h2>
+
+<p>There are a few different ways to open the Network Monitor:</p>
+
+<div class="geckoVersionNote">
+<p>Please note the keyboard shortcut was changed in Firefox 55</p>
+</div>
+
+<ul>
+ <li>Press  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> on a Mac).</li>
+ <li>Select "Network" from the Web Developer menu, (which is a submenu in the Tools menu on OS X and 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 "Network".</li>
+</ul>
+
+<p>The Network Monitor will appear at the bottom of the browser window. Reload the page to see the requests:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;"></p>
+
+<p>The Network Monitor records network requests any time the Toolbox is open, even if the Network Monitor itself is not selected. This means you can start debugging a page in, for example, the Web Console, then switch to the Network Monitor to see network activity without having to reload the page.</p>
+
+<h2 id="UI_overview">UI overview</h2>
+
+<p>The UI is divided into four main pieces:</p>
+
+<ul>
+ <li>The main screen contains the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>, the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list</a>, and the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;"></p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis</a> view is a separate screen:</li>
+</ul>
+
+<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/14673/Performance%20analysis.png" style="display: block; height: 541px; margin-left: auto; margin-right: auto; width: 665px;"></p>
+
+<h2 id="Toolbar">Toolbar</h2>
+
+<p>From Firefox 47 onwards, the toolbar is at the top of the main window. In earlier versions of Firefox, it's at the bottom.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;">It provides:</p>
+
+<ul>
+ <li>An icon to clear the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_list">network request list.</a></li>
+ <li>An array of icons to filter the network request list by type:
+  <ul>
+   <li>by the content type of the response</li>
+   <li>XHR requests</li>
+   <li>(new in Firefox 48) WebSocket upgrades (labeled WS)</li>
+  </ul>
+ </li>
+ <li>An icon to launch <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">performance analysis.</a></li>
+ <li>A summary of this page, including the number of requests, total size, and total time.</li>
+ <li>A box enabling you to <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">filter requests by URL</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Filtering_by_properties">by properties.</a></li>
+ <li>An icon to show/hide the <a href="/en-US/docs/Tools/Network_Monitor#Network_request_details">network request details pane</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: From Firefox 58 onwards, the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter ({{bug(1413540)}}).</p>
+</div>
+
+<h2 id="Network_request_list">Network request list</h2>
+
+<p>By default, the Network Monitor shows a list of all the network requests made in the course of loading the page. Each request is displayed in its own row:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;">By default, the Network Monitor is cleared each time you navigate to a new page or reload the current page. You can override this behavior by checking "Enable persistent logs" in the <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p>
+
+<h3 id="Network_request_columns">Network request columns</h3>
+
+<p>From Firefox 55 onwards, you can toggle different columns by right-clicking on the table header and choosing the specific column from the context menu. A "Reset Columns" option is also available to reset the columns to their initial configuration. Here is a list of all available columns:</p>
+
+<ul>
+ <li><strong>Status</strong>: The HTTP status code returned. This is displayed as a color-coded icon:
+
+  <ul>
+   <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">blue circle for informational (1XX codes). Notably, this includes 101 (switching protocols) for <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> upgrades.</li>
+   <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> green circle for success (2XX codes)</li>
+   <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> orange triangle for redirection (3XX)</li>
+   <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> red square for errors (4XX and 5XX)</li>
+   <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> hollow grey circle for responses that were fetched from the browser cache.</li>
+  </ul>
+  The exact code is displayed immediately after the icon.</li>
+ <li><strong>Method</strong>: The HTTP request method used.</li>
+ <li><strong>File</strong>: The basename of the file requested.</li>
+ <li><strong>Protocol:</strong> The network protocol used to transfer the data, this column is hidden by default. This is new in Firefox 55.</li>
+ <li><strong>Scheme:</strong> The scheme (https/http/ftp/...) of the path requested. This column is hidden by default. This is new in Firefox 55.</li>
+ <li><strong>Domain</strong>: Domain of the path requested.
+  <ul>
+   <li>If the request used SSL/TLS and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. You will be able to see more details about the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</li>
+   <li>Hover over the domain to see the IP address.</li>
+   <li>There's an icon next to the domain that gives you extra information about the security status of that request. See <a href="/en-US/docs/Tools/Network_Monitor#Security_icons">Security icons</a>.</li>
+  </ul>
+ </li>
+ <li><strong>Remote IP</strong>: The IP address of the server answering the request. This column is hidden by default. This is new in Firefox 55.</li>
+ <li><strong>Cause</strong>: The reason that the network request occurred, for example XHR request, {{htmlelement("img")}}, script, script requesting an image, etc. This is new in Firefox 49.</li>
+ <li><strong>Type</strong>: <code>Content-type</code> of the response.</li>
+ <li><strong>Cookies:</strong> The number of request cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li>
+ <li><strong>Set-Cookies:</strong> The number of response cookies associated to the request. This column is hidden by default. This is new in Firefox 55.</li>
+ <li><strong>Transferred</strong>: The number of bytes that were actually transferred to load the resource. This will be less than <strong>Size</strong> if the resource was compressed. From Firefox 47, if the resource was fetched from a <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> cache, then this cell displays "service worker".</li>
+ <li><strong>Size</strong>: The size of the transferred resource.</li>
+</ul>
+
+<p>The toolbar at the top labels these columns, and clicking the label sorts all the requests by that column.</p>
+
+<h4 id="Image_thumbnails">Image thumbnails</h4>
+
+<p>If the file is an image, the row includes a thumbnail of the image, and hovering over the filename shows a preview in a tooltip:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p>
+
+<h4 id="Security_icons">Security icons</h4>
+
+<p>The Network Monitor displays an icon in the Domain column:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;"></p>
+
+<p>This gives you extra information about the security status of the request:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Icon</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td>
+   <td>HTTPS</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td>
+   <td>Weak HTTPS (for example, a weak cipher was used)</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td>
+   <td>Failed HTTPS (for example, a certificate was invalid)</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td>
+   <td>HTTP</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td>
+   <td>Localhost</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For weak and failed HTTPS requests, you'll see more details of the problem in the <a href="/en-US/docs/Tools/Network_Monitor#Security">Security tab</a>.</p>
+
+<h4 id="Cause_column">Cause column</h4>
+
+<p>The Cause column indicates what the cause of the request was. This is usually fairly obvious, and you can generally see the correlation between this and the Type column entry. The most common values are:</p>
+
+<ul>
+ <li>document: The source HTML document.</li>
+ <li>img: {{htmlelement("img")}} element.</li>
+ <li>imageset: {{htmlelement("img")}} element.</li>
+ <li>script: A JavaScript file.</li>
+ <li>stylesheet: A CSS file.</li>
+</ul>
+
+<div>
+<p>When a request was triggered by JavaScript, a small JS icon is shown to the left of the entry in the Cause column. Hovering over this displays a popup containing the stack trace for the request, to provide more clues as to why a request happened. Note that since Firefox 55, stack traces can be found in the <em>Stack Trace</em> tab of the {{anch("Network request details")}} panel instead.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p>
+
+<p>You can then click on any of the entries in the popup to open up the relevant script in the <a href="/en-US/docs/Tools/Debugger">Debugger</a> pane.</p>
+</div>
+
+<h3 id="Timeline">Timeline</h3>
+
+<p>The request list also displays a timeline for the different parts of each request.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p>
+
+<p>Each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. For more details on the color-coding used here, see the section on the <a href="/en-US/docs/Tools/Network_Monitor#Timings">Timings</a> page.</p>
+
+<p>Starting in Firefox 45, the timeline also contains two vertical lines:</p>
+
+<ul>
+ <li>The <span style="color: blue;">blue</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> event is triggered.</li>
+ <li>The <span style="color: red;">red</span> line marks the point at which the page's <code><a href="/en-US/docs/Web/Events/load">load</a></code> event is triggered.</li>
+</ul>
+
+<h3 id="Filtering_requests">Filtering requests</h3>
+
+<p>You can filter requests by content type, by whether they are XMLHttpRequests or WebSocket requests, by URL, or by request properties.</p>
+
+<h4 id="Filtering_by_content_type">Filtering by content type</h4>
+
+<p>To filter by content type, use the buttons in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p>
+
+<h4 id="Filtering_XHR">Filtering XHR</h4>
+
+<p>To see only {{Glossary("XHR (XMLHttpRequest)", "XHR")}} requests, use the "XHR" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p>
+
+<h4 id="Filtering_WebSockets">Filtering WebSockets</h4>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 48</p>
+</div>
+
+<p>To see only WebSocket connections, use the "WS" button in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p>
+
+<p>To monitor the data exchanged in WebSocket connections, try the <a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor add-on</a>.</p>
+
+<h4 id="Filtering_by_URL">Filtering by URL</h4>
+
+<p>To filter by URL, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. Click in the search box, or press <kbd>Ctrl</kbd> + <kbd>F</kbd> (or <kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac), and start typing. The list of network requests will be filtered to include only requests that contain your filter string, in either the Domain or the File portions.</p>
+
+<p>From Firefox 45,  you can filter requests that <em>don't</em> contain your filter string by prefixing your query with the "-" operator. For example, the query "-google.com" will show all requests that don't have "google.com" in their URL.</p>
+
+<h4 id="Filtering_by_properties">Filtering by properties</h4>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 55</p>
+</div>
+
+<p>To filter by specific request properties, use the search box in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>. The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (<code>-</code>) negates the filter. You can combine different filters together by seperating them with a space.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Meaning</th>
+   <th scope="col">Examples</th>
+  </tr>
+  <tr>
+   <td><code>status-code</code></td>
+   <td>Shows resources that have the specific HTTP status code.</td>
+   <td><code>status-code:304</code></td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>Shows resources that have were requested via the specific HTTP request method.</td>
+   <td><code>method:post</code></td>
+  </tr>
+  <tr>
+   <td><code>domain</code></td>
+   <td>Shows resources coming from a specifc domain.</td>
+   <td><code>domain:mozilla.org</code></td>
+  </tr>
+  <tr>
+   <td><code>remote-ip</code></td>
+   <td>Shows resources coming from a server with the specified IP.</td>
+   <td><code>remote-ip:63.245.215.53</code><br>
+    <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td>
+  </tr>
+  <tr>
+   <td><code>cause</code></td>
+   <td>Shows resources matching a specific cause type. The types can be found in the description of the <a href="#Cause_column">cause column</a>.</td>
+   <td><code>cause:js</code><br>
+    <code>cause:stylesheet<br>
+    cause:img</code></td>
+  </tr>
+  <tr>
+   <td><code>transferred</code></td>
+   <td>Shows resources having a specific transferred size or a transferred size close to the one specified.  <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td>
+   <td><code>transferred:1k</code></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>Shows resources having a specific size (after decompression) or a size close to the one specified. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td>
+   <td><code>size:2m</code></td>
+  </tr>
+  <tr>
+   <td><code>larger-than</code></td>
+   <td>Shows resources that are larger than the specified size in bytes. <code>k</code> can be used as suffix for kilobytes and <code>m</code> for megabytes, e.g. the value <code>1k</code> is equivalent to <code>1024</code>.</td>
+   <td><code>larger-than:2000</code><br>
+    <code>-larger-than:4k</code></td>
+  </tr>
+  <tr>
+   <td><code>mime-type</code></td>
+   <td>Shows resources that match the specified MIME type.</td>
+   <td><code>mime-type:text/html</code><br>
+    <code>mime-type:image/png</code><br>
+    <code>mime-type:application/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>is</code></td>
+   <td><code>is:cached</code> and <code>is:from-cache</code> shows only resources coming from cache.<br>
+    <code>is:running</code> shows only resources, which are currently being transferred.</td>
+   <td><code>is:cached</code><br>
+    <code>-is:running</code></td>
+  </tr>
+  <tr>
+   <td><code>scheme</code></td>
+   <td>Shows resources transferred via the given scheme.</td>
+   <td><code>scheme:http</code></td>
+  </tr>
+  <tr>
+   <td><code>has-response-header</code></td>
+   <td>Shows resources that contain the specified HTTP response header.</td>
+   <td><code>has-response-header:cache-control</code><br>
+    <code>has-response-header:X-Firefox-Spdy</code></td>
+  </tr>
+  <tr>
+   <td><code>set-cookie-domain</code></td>
+   <td>Shows the resources that have a <code>Set-Cookie</code> header with a <code>Domain</code> attribute that matches the specified value.</td>
+   <td><code>set-cookie-domain:.mozilla.org</code></td>
+  </tr>
+  <tr>
+   <td><code>set-cookie-name</code></td>
+   <td>Shows the resources that have a <code>Set-Cookie</code> header with a name that matches the specified value.</td>
+   <td><code>set-cookie-name:_ga</code></td>
+  </tr>
+  <tr>
+   <td><code>set-cookie-value</code></td>
+   <td>Shows the resources that have a <code>Set-Cookie</code> header with a value that matches the specified value.</td>
+   <td><code>set-cookie-value:true</code></td>
+  </tr>
+  <tr>
+   <td><code>regexp</code></td>
+   <td>Shows the resources having a URL that matches the given {{Glossary("regular expression")}}.</td>
+   <td><code>regexp:\d{5}<br>
+    regexp:mdn|mozilla</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Context_menu">Context menu</h3>
+
+<p>Context-clicking on a row in the list displays a context menu with the following options:</p>
+
+<ul>
+ <li>Copy URL</li>
+ <li>Copy URL Parameters (new in Firefox 40)</li>
+ <li>Copy POST Data (new in Firefox 40, only for POST requests)</li>
+ <li>Copy as cURL</li>
+ <li>Copy Request Headers (new in Firefox 40)</li>
+ <li>Copy Response Headers (new in Firefox 40)</li>
+ <li>Copy Response (new in Firefox 40)</li>
+ <li>Copy Image as Data URI (only for images)</li>
+ <li>Copy All As HAR (new in Firefox 41)</li>
+ <li>Save All As HAR (new in Firefox 41)</li>
+ <li>Save Image As (new in Firefox 55, only for images)</li>
+ <li>Edit and Resend</li>
+ <li>Open in New Tab</li>
+ <li>Start <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page</li>
+</ul>
+
+<h4 id="Edit_and_Resend">Edit and Resend</h4>
+
+<p>This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.</p>
+
+<h4 id="Open_in_New_Tab">Open in New Tab</h4>
+
+<p>Resends the request in a new tab — very useful for debugging asynchronous requests.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Since Firefox 59, POST requests are correctly resent as POST requests ({{bug(1220758)}}).</p>
+</div>
+
+<h4 id="Copy_as_cURL">Copy as cURL</h4>
+
+<p>This option copies the network request to the clipboard as a <a href="http://curl.haxx.se/">cURL</a> command, so you can execute it from a command line. The command may include the following options:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>-X [METHOD]</code></td>
+   <td>If the method is not GET or POST</td>
+  </tr>
+  <tr>
+   <td><code>--data</code></td>
+   <td>For URL encoded request parameters</td>
+  </tr>
+  <tr>
+   <td><code>--data-binary</code></td>
+   <td>For multipart request parameters</td>
+  </tr>
+  <tr>
+   <td><code>--http/VERSION</code></td>
+   <td>If the HTTP version is not 1.1</td>
+  </tr>
+  <tr>
+   <td><code>-I</code></td>
+   <td>If the method is HEAD</td>
+  </tr>
+  <tr>
+   <td><code>-H</code></td>
+   <td>
+    <p>One for each request header.</p>
+
+    <p>From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include <code>--compressed</code> instead of <code>-H "Accept-Encoding: gzip, deflate"</code>. This means that the response will be automatically decompressed.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="CopySave_All_As_HAR">Copy/Save All As HAR</h4>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 41.</p>
+</div>
+
+<p>These options create an <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> (HAR) for all requests listed. The HAR format enables you to export detailed information about network requests. 'Copy All As HAR' copies the data to the clipboard, 'Save All As HAR' opens a dialog allowing you to save the archive to disk.</p>
+
+<h2 id="Network_request_details">Network request details</h2>
+
+<p>Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p>
+
+<p>The tabs at the top of this pane enable you to switch between the following pages:</p>
+
+<ul>
+ <li><strong>Headers</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Params</strong></li>
+ <li><strong>Response</strong></li>
+ <li><strong>Timings</strong></li>
+ <li><strong>Security </strong>(only for secure pages)</li>
+ <li><strong>Stack trace</strong> (only when the request has a stack trace, e.g. a script called by another script). This has been available since Firefox 55.</li>
+</ul>
+
+<p>Clicking the icon at the right-hand end of the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a> closes the details pane and returns you to the list view.</p>
+
+<h3 id="Headers">Headers</h3>
+
+<p>This tab lists basic information about the request:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<p>This includes:</p>
+
+<ul>
+ <li>Request URL</li>
+ <li>Request method</li>
+ <li>Remote IP address and port <em>(new in Firefox 39)</em></li>
+ <li>Status code with question mark icon linking to MDN doc for more details (if available)</li>
+ <li>The HTTP request and response headers that were sent</li>
+ <li>An <em>Edit and Resend</em> button to <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">edit and resend</a> the request</li>
+ <li>A <em>Raw headers</em> button to display the raw request and response headers</li>
+</ul>
+
+<p>You can filter the headers that are displayed:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 54</p>
+</div>
+
+<p>From Firefox 54 onwards, you will see a question mark icon next to each header in the <em>Status code</em> row — this is a link to more information about that particular status code, in the MDN <a href="/en-US/docs/Web/HTTP/Headers">documentation of the HTTP headers</a>.</p>
+
+<h3 id="Cookies">Cookies</h3>
+
+<p>This tab lists full details of any cookies sent with the request or response:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<p>As with headers, you can filter the list of cookies displayed.</p>
+
+<h3 id="Params">Params</h3>
+
+<p>This tab displays the GET parameters and POST data of a request:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<h3 id="Response">Response</h3>
+
+<p>The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<p>If the response is JSON, it will be shown as an inspectable object.</p>
+
+<p>If the response is an image, the tab displays a preview:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<h4 id="HTML_preview">HTML preview</h4>
+
+<p>From Firefox 59 onwards, if the response is HTML, a preview of the rendered HTML appears inside the Response tab, above the response payload.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15781/response-html-preview.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Timings">Timings</h3>
+
+<p>The Timings tab breaks a network request down into the following subset of the stages defined in the <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP Archive</a> specification:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Blocked</td>
+   <td>
+    <p>Time spent in a queue waiting for a network connection.</p>
+
+    <p>The browser imposes a limit on the number of simultaneous connections that can be made to a single server. In Firefox this defaults to 6, but can be changed using the <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> preference. If all connections are in use, the browser can't download more resources until a connection is released.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>DNS resolution</td>
+   <td>Time taken to resolve a host name.</td>
+  </tr>
+  <tr>
+   <td>Connecting</td>
+   <td>Time taken to create a TCP connection.</td>
+  </tr>
+  <tr>
+   <td>Sending</td>
+   <td>Time taken to send the HTTP request to the server.</td>
+  </tr>
+  <tr>
+   <td>Waiting</td>
+   <td>Waiting for a response from the server.</td>
+  </tr>
+  <tr>
+   <td>Receiving</td>
+   <td>Time taken to read the entire response from the server (or cache).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>It presents a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<h3 id="Security">Security</h3>
+
+<p>If the site is being served over HTTPS, you get an extra tab labeled "Security". This contains details about the secure connection used including the protocol, the cipher suite, and certificate details:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p>
+
+<p>The Security tab shows a warning for security weaknesses. Currently it warns you about two weaknesses:</p>
+
+<ol>
+ <li>Using SSLv3 instead of TLS</li>
+ <li>Using the RC4 cipher</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p>
+
+<h3 id="Stack_trace">Stack trace</h3>
+
+<p>Since Firefox 55, stack traces are shown in the <em>Stack Trace</em> tab, for responses that have a stack trace of course.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15782/stack-trace.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Pausing_and_resume_network_traffic_recording">Pausing and resume network traffic recording</h2>
+
+<p>In Firefox 58 and above, the Network Monitor has a button that pauses and resumes recording of the current page's network traffic. This is useful in situations where, for example, you are trying to get a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. The pause button allows you to look at a certain snapshot.</p>
+
+<p>The button can be found at the far left of the main Network Monitor toolbar, and looks like a typical pause button — <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p>
+
+<p>You can see it here in context:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p>
+
+<p>Once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again.</p>
+
+<h2 id="Performance_analysis">Performance analysis</h2>
+
+<p>The Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.<br>
+ <br>
+ To run the performance analysis tool click the stopwatch icon in the <a href="/en-US/docs/Tools/Network_Monitor#Toolbar">toolbar</a>.</p>
+
+<p>(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)</p>
+
+<p>The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p>
+
+<p>The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.</p>
+
+<p>To get back to the Network Monitor's list of network requests click the "Back" button on the left.</p>
+
+<p>Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">only that resource type</a>.</p>
diff --git a/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html
new file mode 100644
index 0000000000..af308f0b0b
--- /dev/null
+++ b/files/zh-tw/tools/page_inspector/how_to/examine_grid_layouts/index.html
@@ -0,0 +1,30 @@
+---
+title: CSS 格線檢測器：檢查格線布局
+slug: Tools/Page_Inspector/How_to/Examine_grid_layouts
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<h2 id="在規則畫面的格線圖標">在規則畫面的格線圖標</h2>
+
+<div class="geckoVersionNote">Firefox 52 新功能</div>
+
+<p>自 Firefox 52 以後的開發者工具，可以針對格線布局，要求檢測器覆蓋上格線指示。</p>
+
+<p>在擁有 <code><a href="/zh-TW/docs/Web/CSS/display">display: grid</a></code> 的元素內，規則畫面會出現格線圖標：<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">。點選圖標以覆蓋顯示的格線，包括了線與軌道：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">就算選擇其他元素，覆蓋還是會出現，因此你可以編輯 CSS 的格線單元、並檢查格線如何做動。</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<h2 id="格線布局面板">格線布局面板</h2>
+
+<div class="geckoVersionNote">Firefox 56 新功能</div>
+
+<p>Firefox 56 基於前述的格線功能，提供了嶄新的面板。充分的選項及資訊，有利於格線偵錯。你可以在 <a href="https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/">Powerful New Additions to the CSS Grid Inspector in Firefox Nightly</a> 查看所有需要的資訊。</p>
+
+<p>{{EmbedYouTube("dU7xtnzfqxQ")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>想看看各種有趣的格線示例，請參考 <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a>。</li>
+</ul>
diff --git a/files/zh-tw/tools/page_inspector/how_to/index.html b/files/zh-tw/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..69184c59cc
--- /dev/null
+++ b/files/zh-tw/tools/page_inspector/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: 如何……
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<p><span class="seoSummary">這裡蒐集了針對各種「如何……」的文章連結。這些文章連結會連到詳述有關「如何……」所需的技術。</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/zh-tw/tools/page_inspector/index.html b/files/zh-tw/tools/page_inspector/index.html
new file mode 100644
index 0000000000..dea2fd5139
--- /dev/null
+++ b/files/zh-tw/tools/page_inspector/index.html
@@ -0,0 +1,50 @@
+---
+title: 頁面檢測器
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<p>使用頁面檢測器檢測並修改網頁的 HTML 與 CSS。</p>
+
+<p>You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the developer tools to a remote target.</p>
+
+<hr>
+<h2 id="用戶介面導覽">用戶介面導覽</h2>
+
+<p>To find your way around the Inspector, here's a <a href="/zh-TW/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="如何">如何</h2>
+
+<p>想知道頁面檢測器可意做什麼，請參考以下教學：</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="參考">參考</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/Keyboard_shortcuts">鍵盤快捷鍵</a></li>
+ <li><a href="/zh-TW/docs/Tools/Tools_Toolbox#Inspector">設定</a></li>
+</ul>
+</div>
diff --git a/files/zh-tw/tools/performance/allocations/index.html b/files/zh-tw/tools/performance/allocations/index.html
new file mode 100644
index 0000000000..e124139c49
--- /dev/null
+++ b/files/zh-tw/tools/performance/allocations/index.html
@@ -0,0 +1,86 @@
+---
+title: Allocations
+slug: Tools/Performance/Allocations
+translation_of: Tools/Performance/Allocations
+---
+<div class="summary">
+<p>The Allocations view in the Performance tool shows you which functions in your page are allocating the most memory over the course of the profile.</p>
+
+<p>For performance this is important mostly because allocating a lot of memory, or making a lot of allocations, can trigger <a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">garbage collection</a>. This in turn can hurt the responsiveness of a page.</p>
+</div>
+
+<div class="geckoVersionNote">
+<p>The Allocations view is new in Firefox 46.</p>
+</div>
+
+<p>To enable the Allocations view, you must check "Record Allocations" in the Performance tool settings, <em>before</em> recording a profile. Then <a href="/en-US/docs/Tools/Performance/How_to#Record_a_profile">record a profile</a> as usual, and you will see a new tab labeled "Allocations" in the toolbar:</p>
+
+<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
+
+<h2 id="Anatomy_of_the_allocations_view">Anatomy of the allocations view</h2>
+
+<p>The allocations view looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12393/allocations-view-1.png" style="display: block; height: 156px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>The allocations view periodically samples allocations that are made over the recording. Each row represents a function in which at least one allocation-sample was taken during the recording.</p>
+
+<p>It includes the following columns:</p>
+
+<ul>
+ <li>Self Count: the number of allocation-samples that were taken in this function (also shown as a percentage of the total)</li>
+ <li>Self Bytes: the total number of bytes allocated in the allocation-samples in this function (also shown as a percentage of the total)</li>
+</ul>
+
+<p>Rows are sorted by the "Self Bytes" column.</p>
+
+<p>So in the example above:</p>
+
+<ul>
+ <li>8904 samples were taken in <code>signalLater()</code>, which is 28.57% of the total number of samples taken</li>
+ <li>those samples allocated 1102888 bytes, which is 30.01% of the total memory allocated in all samples</li>
+</ul>
+
+<p>Next to each function name is a disclosure arrow. Click this to see the places this function was called from:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Here you can see that <code>signalLater()</code> was called from two places: <code>removeInner()</code> and <code>setSelectionInner()</code>. In this way you can walk back up the call stack, and understand better the context for these allocations.</p>
+
+<h3 id="Self_Cost_and_Total_Cost">Self Cost and Total Cost</h3>
+
+<ul>
+</ul>
+
+<p>You'll see that there are separate sets of columns for "Self" and for "Total". "Self" records samples taken only in this function. "Total" records samples taken in this function or in functions called by this function. At the top level, these are always the same, since the view presents "leaf" functions at the top level (that is, it presents an inverted view of the call stack). But if you start walking back up the call stack, you'll see the difference:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12397/allocations-view-2.png" style="display: block; height: 155px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Here, 8904 samples were taken in <code>signalLater()</code>. But <code>signalLater()</code> was called from two places: <code>removeInner()</code> and <code>setSelectionInner()</code>. Both these functions have 0 in Self Count, meaning that no allocations were seen directly in these functions. However, <code>removeInner()</code> has 8901 in Total Count, while <code>setSelectionInner()</code> has just 3 in Total Count. This is telling us that, of the 8904 allocations seen in <code>signalLater()</code>, all but three came through the <code>removeInner()</code> branch.</p>
+
+<h2 id="Allocations_and_garbage_collection">Allocations and garbage collection</h2>
+
+<p>Of course, the memory allocated by a site is in itself useful information to know. But the main connection between the allocation profile of a site and its responsiveness is the cost of garbage collection (GC).</p>
+
+<p>With a garbage-collected language, like JavaScript, the runtime periodically needs to walk the heap looking for objects that are no longer <a href="/en-US/docs/Tools/Memory/Dominators#Reachability">reachable</a>, and then freeing the memory they occupy. While GC events like this are executing, the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.</p>
+
+<p>To reduce the impact on responsiveness, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (the JavaScript engine in Firefox) can perform GC in small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.</p>
+
+<p>GC events are shown as red markers in the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> view, and are a big red flag for responsiveness,  sometimes running for hundreds of milliseconds:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12399/allocations-view-long-gc.png" style="display: block; height: 160px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>If you're seeing GC events in your site's performance profile, what can you do? SpiderMonkey uses a <a href="https://dxr.mozilla.org/mozilla-central/rev/584870f1cbc5d060a57e147ce249f736956e2b62/js/src/gc/GCRuntime.h#192">complex set of heuristics</a> to decide when to do what sort of garbage collection.</p>
+
+<p>In general, though:<em> allocation pressure - allocating a lot of memory, or allocating memory at a high rate - makes SpiderMonkey more likely to run garbage collection, and more likely to run full, non-incremental garbage collection.</em></p>
+
+<p>If a GC event was caused by allocation pressure, then the sidebar on the right of the marker in the Waterfall view contains a link labeled "Show allocation triggers". If you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last GC cycle to the start of the one you clicked on. This shows you all the allocations that collectively triggered this GC event:</p>
+
+<p>{{EmbedYouTube("tO5ovD9Jw4k")}}</p>
+
+<p>If you're seeing these problems, consider whether you can reduce the number or size of the allocations you're making here. For example:</p>
+
+<ul>
+ <li>can you allocate memory lazily, when it is actually needed, instead of up front?</li>
+ <li>if allocating memory in a loop, can you reuse a single allocation in every loop iteration?</li>
+</ul>
diff --git a/files/zh-tw/tools/performance/frame_rate/index.html b/files/zh-tw/tools/performance/frame_rate/index.html
new file mode 100644
index 0000000000..3c2c61467a
--- /dev/null
+++ b/files/zh-tw/tools/performance/frame_rate/index.html
@@ -0,0 +1,58 @@
+---
+title: Frame rate
+slug: Tools/Performance/Frame_rate
+translation_of: Tools/Performance/Frame_rate
+---
+<div class="summary">
+<p><font><font>幀速率是一個網站的響應的量度。</font><font>低或不一致的幀速率可以使一個網站出現反應遲鈍或janky，鬧了不好的用戶體驗。</font></font></p>
+
+<p><strong><font><font>60fps的幀頻是平穩的性能目標，給你所有需要響應某些事件更新的16.7毫秒時間預算。</font></font></strong></p>
+
+<p><font><font>在性能工具的幀速率圖表顯示你的幀速率在錄音的過程中。</font><font>它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。</font></font></p>
+</div>
+
+<h2 id="幀速率和響應"><font><font>幀速率和響應</font></font></h2>
+
+<p><font><font>幀速率是指視頻設備可產生圖像（或幀）的速率。</font><font>這是從電影和遊戲最熟悉的，但現在被廣泛用作網站和Web應用程序性能的措施。</font></font></p>
+
+<p><font><font>在Web性能，幀封裝瀏覽器需要做的，以更新和重繪屏幕的工作。</font><font>幀速率是最明顯適用於動畫：如果幀速率太低，動畫將具有生澀外觀，而更快的幀速率會更順暢。</font><font>但幀速率也可用作站點的響應作為用戶的一般衡量與其交互。</font></font></p>
+
+<p><font><font>例如，如果移動鼠標在某個頁面元素觸發一些JavaScript改變元素的外觀，並觸發回流和重繪，那麼所有這些工作需要在該框架完成。</font><font>如果時間過長的瀏覽器來處理框架，那麼瀏覽器就會瞬間出現反應遲鈍（janky）。</font></font></p>
+
+<p><font><font>同樣，如果通過網頁滾動涉及到很多複雜的頁面更新和瀏覽器無法跟上一個可接受的幀速率，滾動頁面會出現遲緩或偶爾會凍結。</font></font></p>
+
+<p><font><font>在一般情況下，高和一致的幀速率將使用戶與網站的互動更愉快和吸引力。</font></font></p>
+
+<div class="note">
+<p><font><font>60fps的幀頻被算為是平穩的性能目標，給你所有的需要在應對某些事件做出同步更新16.7毫秒的時間預算。</font></font></p>
+
+<p><font><font>然而，一致性就顯得尤為重要：如果你不能提供60fps的，它是更好地實現較低的幀速率更穩定，並避免幀速率造成該網站凍結突然驟降。</font></font></p>
+</div>
+
+<h2 id="幀速率圖"><font><font>幀速率圖</font></font></h2>
+
+<p><font><font>幀速率曲線圖中找到</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview"><font><font>記錄概述</font></font></a><font><font>性能工具的一部分。</font><font>這需要當瀏覽器完成一幀的時間戳，並使用該跟踪幀速率的在記錄的過程中。</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;"><font><font>x軸是時間上的信息期間，和有三個註釋：最大幀速率，平均幀速率和最低幀速率。</font></font></p>
+
+<h2 id="使用幀速率圖"><font><font>使用幀速率圖</font></font></h2>
+
+<p><font><font>幀速率曲線的巨大價值在於，像</font></font><a href="/en-US/docs/Tools/Web_Console"><font><font>Web控制台</font></font></a><font><font>，它給你，你的網站可能是有問題，使您能夠使用其他工具進行更深入的分析的快速指示。</font><font>例如，這裡有一個性能配置截圖：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><font><font>你可以看到，平均幀速率是相當健康的，但有三個點，其中幀頻為倒塌數十毫秒。</font><font>這肯定會導致明顯的口吃的，在網頁中播放任何動畫。</font></font></p>
+
+<p><font><font>幀速率圖表相關聯的</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Timeline_summary"><font><font>瀑布摘要</font></font></a><font><font>直接上面，並且有我們可以看到，在第一兩滴在幀速率是相關的橙色酒吧，其中表示時間花費在執行的JavaScript。</font></font></p>
+
+<p><font><font>如果我們選擇了記錄這些片段之一，主</font></font><a href="/en-US/docs/Tools/Performance/Waterfall"><font><font>瀑布視圖</font></font></a><font><font>下它被放大到它，我們可以看到這是造成問題的功能：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><font><font>我們從一個點擊事件的阻止主線程170毫秒的JavaScript函數。</font></font></p>
+
+<p><font><font>它的功能有關係嗎？</font><font>切換到</font></font><a href="/en-US/docs/Tools/Performance/Flame_Chart"><font><font>火焰圖表</font></font></a><font><font>看到在那個點調用堆棧：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p><font><font>有問題的函數被調用</font></font><code><font><font>doPointlessComputationsInMainThread（） </font></font></code><font><font>，</font><font>並且它在“main.js”定義。</font><font>為了解決這個問題，我們可能會考慮將其分割成塊，並運行裡面件</font></font><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame"><font><font>requestAnimationFrame</font></font></a></code><font><font>，甚至運行在一個全功能</font></font><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"><font><font>的工人</font></font></a><font><font>。</font><font>在</font></font><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript"><font><font>密集的JavaScript</font></font></a><font><font>本文介紹如何使用這樣的策略，以修復因長期運行的JavaScript同步響應的問題。</font></font></p>
diff --git a/files/zh-tw/tools/performance/index.html b/files/zh-tw/tools/performance/index.html
new file mode 100644
index 0000000000..23ee0e1b61
--- /dev/null
+++ b/files/zh-tw/tools/performance/index.html
@@ -0,0 +1,82 @@
+---
+title: 效能
+slug: Tools/Performance
+tags:
+  - 效能
+translation_of: Tools/Performance
+---
+<p>效能工具給你網站整體反應度、JavaScript 與版面效能的洞察資訊。你可以使用效能工具在一段時間中錄製、測試你的網站的效能。這個工具會顯示瀏覽器在繪製你的網站時的所作之事，其總覽以及對應之<a href="/en-US/docs/Tools/Performance/Frame_rate">畫框率</a>的圖表。</p>
+
+<p>你可以在這三個子工具中，了解效能數據多方面的深入資訊：</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> 顯示瀏覽器的各種行為，諸如組版、JavaScript、重繪、回收資源等</li>
+ <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> 顯示瀏覽器花費在 JavaScript 函式上的時間</li>
+ <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> 顯示錄製全程中的 JavaScript 呼叫堆疊</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="由此開始">由此開始</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>從這裡開始探索效能工具，對介面的快速導覽。</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>最基本的任務：開啟工具、建立、儲存、載入與設定錄製。</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="效能工具的元件">效能工具的元件</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>了解你網站的整體回應速度。</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>尋找你網站中的 JavaScript 瓶頸。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>了解當用戶與你的網站互動時，瀏覽器在做些什麼。</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>看看錄製過程中某個 JavaScript 函式在那時執行。</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="應用場景">應用場景</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
+ <dd>使用 Waterfall 了解瀏覽器如何更新頁面，各種不同的 CSS 屬性動畫如何影響效能。</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
+ <dd>使用格率與 Waterfall 工具，以調查長時間執行的 JavaScript 帶來的效能問題，並了解如何使用 worker 來幫助解決問題。</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html b/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html
new file mode 100644
index 0000000000..c2cd1e5e72
--- /dev/null
+++ b/files/zh-tw/tools/remote_debugging/firefox_for_android/index.html
@@ -0,0 +1,77 @@
+---
+title: Remotely debugging Firefox for Android
+slug: Tools/Remote_Debugging/Firefox_for_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<p>This guide explains how to use <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">remote debugging </a>to inspect or debug code running in <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android </a>over USB.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p>
+<h2 id="Prerequisites">Prerequisites</h2>
+<p>First, you'll need:</p>
+<ul>
+ <li>a desktop or laptop computer with Firefox 15 or higher running on it</li>
+ <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android 15 or higher running on it</li>
+ <li>a USB cable to connect the two devices</li>
+</ul>
+<h3 id="ADB_setup">ADB setup</h3>
+<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p>
+<h4 class="note" id="On_the_Android_device">On the Android device</h4>
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging (step 2 of this link only)</a>.</li>
+ <li>Attach the device to the desktop via USB.</li>
+</ul>
+<h4 class="note" id="On_the_desktop">On the desktop</h4>
+<ul>
+ <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li>
+ <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li>
+ <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li>
+</ul>
+<p>To check it worked, open up a command shell on the desktop and type:</p>
+<pre>adb devices</pre>
+<p>You should see some output like:</p>
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+<p>(The long hex string will be different.)</p>
+<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p>
+<h3 id="Enable_remote_debugging">Enable remote debugging</h3>
+<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p>
+<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4>
+<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p>
+<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4>
+<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p>
+<h4 id="On_the_desktop_2">On the desktop</h4>
+<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<div class="Note">
+ If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.</div>
+<p>You'll then see a new option in the Web Developer menu labeled "Connect...":</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="Connecting">Connecting</h2>
+<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p>
+<h4 class="note" id="On_the_desktop_3">On the desktop</h4>
+<p>Go to a command prompt, and type:</p>
+<pre>adb forward tcp:6000 tcp:6000</pre>
+<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p>
+<p>For Firefox OS, type:</p>
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p>
+<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p>
+<h4 class="note" id="On_the_Android_device_2">On the Android device</h4>
+<p>Next you'll see a dialog on the Android device asking you to confirm the connection:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p>
+<h4 class="note" id="On_the_desktop_4">On the desktop</h4>
+<p>Next, the desktop shows you a dialog that looks something like this:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p>
+<ul>
+ <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li>
+ <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li>
+</ul>
+<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/zh-tw/tools/remote_debugging/index.html b/files/zh-tw/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..c7cad963ed
--- /dev/null
+++ b/files/zh-tw/tools/remote_debugging/index.html
@@ -0,0 +1,22 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+translation_of: Tools/Remote_Debugging
+---
+<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p>
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+<h2 id="Firefox_for_Android">Firefox for Android</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p>
+<h2 id="Firefox_for_Metro">Firefox for Metro</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p>
+<h2 id="Firefox_OS">Firefox OS</h2>
+<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p>
+<h2 id="Thunderbird">Thunderbird</h2>
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p>
diff --git a/files/zh-tw/tools/responsive_design_mode/index.html b/files/zh-tw/tools/responsive_design_mode/index.html
new file mode 100644
index 0000000000..fb931bd52f
--- /dev/null
+++ b/files/zh-tw/tools/responsive_design_mode/index.html
@@ -0,0 +1,184 @@
+---
+title: 適應性設計模式
+slug: Tools/Responsive_Design_Mode
+translation_of: Tools/Responsive_Design_Mode
+---
+<div class="note">
+<p>本頁在講述 Firefox 52 及其後的適應性設計模式。要找之前的版本，請參閱<a href="/zh-TW/docs/Tools/Responsive_Design_Mode_(before_Firefox_52)">適應性設計模式（Firefox 52 之前）</a>。這個版本的適應性設計模式還要啟動 Firefox <a href="https://support.mozilla.org/t5/Manage-preferences-and-add-ons/Enable-multiprocess-support/ta-p/1371917">multi-process support (e10s)</a>。如果沒有啟動的話，你還是會看到舊版的適應性設計模式。</p>
+</div>
+
+<p><a href="/zh-TW/Apps/Progressive/Responsive">適應性設計</a>（響應式設計）是指能令大多數不同設備，能有著相似效果的網站設計實做。特別是指手機平板，也能有如同桌機筆電般的效果。</p>
+
+<p>在此，最重要的影響因素是螢幕寬度。但也有其他諸如像素的密度、有沒有支援觸控之類的因素。適應性設計模式提供了這些因素的簡單模擬法、以觀察網站在不同的設備下，會是什麼樣子。</p>
+
+<h2 id="切換適應性設計模式">切換適應性設計模式</h2>
+
+<p>有三種方法能切換到適應性設計模式：</p>
+
+<ul>
+ <li>透過 Firefox 選單：從網頁開發者工具的選單選取「適應性設計模式」（如果是 OS X 則是 Tools menu）。</li>
+ <li>透過網頁開發者工具：在<a href="/zh-TW/docs/Tools_Toolbox#Toolbar" title="/zh-TW/docs/Tools_Toolbox#Toolbar">開發者工具的工具欄</a>點選「適應性設計模式」的按鈕： <img alt="" src="https://mdn.mozillademos.org/files/14339/rdm-button.png" style="display: block; height: 746px; margin-left: auto; margin-right: auto; width: 948px;"></li>
+ <li>透過鍵盤：按下 Ctrl + Shift + M（在 OS X 是 Cmd + Opt + M）。</li>
+</ul>
+
+<h2 id="使用適應性設計模式">使用適應性設計模式</h2>
+
+<p>啟動適應性設計模式後，網頁的內容會縮成特定設備的尺寸。初始是 320 x 480 像素：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14365/rdm-open.png" style="display: block; height: 1928px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<p>你可以獨立切換顯示開發者工具的位置：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14367/rdm-toolbox.png" style="display: block; height: 1928px; margin-left: auto; margin-right: auto; width: 948px;"> 當適應性設計模式啟動時，你可以在大小調整後的區域內，如同平常一般地瀏覽。</p>
+
+<h2 id="設備選擇">設備選擇</h2>
+
+<p>在視區上方你會看到「尚未選擇裝置」：點選此欄就能看到裝置清單。選一個裝置，適應性設計模式就會設定以模擬該裝置的這些屬性：</p>
+
+<ul>
+ <li>螢幕大小</li>
+ <li>設備像素比例（設備物理的像素對上獨立於設備的像素之比例）</li>
+ <li>觸控事件</li>
+</ul>
+
+<p>另外，Firefox 還會設定<a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent">用戶代理</a>的 HTTP 請求標頭，以標定自己為該裝置的預設瀏覽器。例如說，當你選了 iPhone，Firefox 就會把自己標為 Safari。<code><a href="/zh-TW/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> 屬性也會成為該值。</p>
+
+<p>{{EmbedYouTube("JNAyKemudv0")}}</p>
+
+<p>選單所列出的裝置，只是選定裝置的子集。在該選單的底下有個「編輯清單…」的選項。選定以後就會看到所有選項，還能點選想要在選單出現的設備選項。設置的相關聯裝備與數值，是取自於 <a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a>。</p>
+
+<h3 id="儲存自訂設備">儲存自訂設備</h3>
+
+<p>54 版以後的 Firefox 允許你自訂設備。各設備都會有：</p>
+
+<ul>
+ <li>大小</li>
+ <li>設備像素比例</li>
+ <li>用戶代理</li>
+ <li>是否支援觸碰</li>
+</ul>
+
+<p>另外，你還能透過把滑鼠停在設備名，以瀏覽該設備的屬性資訊。他們會<span class="sentence" id="mt1">以快顯視窗</span>的形式出現。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="裝置控制">裝置控制</h2>
+
+<p>你也能給多數設備支援自訂屬性。</p>
+
+<h3 id="設定螢幕大小">設定螢幕大小</h3>
+
+<p>要設定螢幕大小，請點擊視窗下面的數值並修改之：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14355/rdm-set-size.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<p>你也可以點右下角的三角形後不放，以自行調整你需要的大小。</p>
+
+<h3 id="設定設備像素比例">設定設備像素比例</h3>
+
+<p>要自訂備像素比例，請點擊「DPR」標籤並選定想要的值。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14353/rdm-set-dpr.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<h3 id="模擬觸控事件切換">模擬觸控事件切換</h3>
+
+<p>要啟動或關閉觸控事件，請點選手指圖示的圖標：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14359/rdm-toggle-touch.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;">在觸控事件啟動時，滑鼠事件會被轉為<a href="/zh-TW/docs/Web/Guide/API/DOM/Events/Touch_events">觸控事件</a>。</p>
+
+<p>開啟觸控事件會強制頁面重啟，因為許多頁面會在載入的時候檢查觸控，若支持觸控事件的話，也將增加 event handler。</p>
+
+<h3 id="切換方向">切換方向</h3>
+
+<p>要讓螢幕在直放與橫放間切換，請點選設備選擇器旁邊的圖標：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14357/rdm-toggle-orientation.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<h2 id="網路限速">網路限速</h2>
+
+<p>若你只在網速很快的環境下測試，你網站可能會在網速慢的環境下碰上問題。在適應性設計模式裡面，你可以叫瀏覽器用大略的速度，模擬不同的上網方案。</p>
+
+<p>這些方案會模擬：</p>
+
+<ul>
+ <li>下載速度</li>
+ <li>上載速度</li>
+ <li>最小延遲</li>
+</ul>
+
+<p>下方表格列出了各網路方案的大略數值，但請不要用這個功能做精確的性能測量：此功能目的，是給出不同條件下的用戶體驗。</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">選取</th>
+   <th scope="col">下載速度</th>
+   <th scope="col">上載速度</th>
+   <th scope="col">最小延遲（毫秒）</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>GPRS</td>
+   <td>50 KB/s</td>
+   <td>20 KB/s</td>
+   <td>500</td>
+  </tr>
+  <tr>
+   <td>Regular 2G</td>
+   <td>250 KB/s</td>
+   <td>50 KB/s</td>
+   <td>300</td>
+  </tr>
+  <tr>
+   <td>Good 2G</td>
+   <td>450 KB/s</td>
+   <td>150 KB/s</td>
+   <td>150</td>
+  </tr>
+  <tr>
+   <td>Regular 3G</td>
+   <td>750 KB/s</td>
+   <td>250 KB/s</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <td>Good 3G</td>
+   <td>1.5 MB/s</td>
+   <td>750 KB/s</td>
+   <td>40</td>
+  </tr>
+  <tr>
+   <td>Regular 4G/LTE</td>
+   <td>4 MB/s</td>
+   <td>3 MB/s</td>
+   <td>20</td>
+  </tr>
+  <tr>
+   <td>DSL</td>
+   <td>2 MB/s</td>
+   <td>1 MB/s</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Wi-Fi</td>
+   <td>30 MB/s</td>
+   <td>15 MB/s</td>
+   <td>2</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>要選擇網路的話，請點選標示著「不限速」的標籤：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14361/rdm-network.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<h2 id="擷圖">擷圖</h2>
+
+<p>要擷取視口的螢幕畫面，請點擊相機圖示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14363/rdm-screenshot.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+
+<p>畫面會放在 Firefox 預設的下載目錄。</p>
+
+<p>Firefox 53 以後，若你在<a href="/zh-TW/docs/Tools/Settings">設定頁面</a>點選「將畫面擷圖拍到剪貼簿」，螢幕擷圖就會複製到作業系統的剪貼簿。</p>
diff --git a/files/zh-tw/tools/scratchpad/index.html b/files/zh-tw/tools/scratchpad/index.html
new file mode 100644
index 0000000000..880b0c13ee
--- /dev/null
+++ b/files/zh-tw/tools/scratchpad/index.html
@@ -0,0 +1,109 @@
+---
+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/settings/index.html b/files/zh-tw/tools/settings/index.html
new file mode 100644
index 0000000000..efcc04ce25
--- /dev/null
+++ b/files/zh-tw/tools/settings/index.html
@@ -0,0 +1,185 @@
+---
+title: Settings
+slug: Tools/Settings
+translation_of: Tools/Settings
+---
+<p>{{ToolsSidebar}}</p>
+
+<ul>
+ <li>
+  <div class="threecolumns">
+  <h5 id="Opening_Settings">Opening Settings</h5>
+  </div>
+ </li>
+</ul>
+
+<p>Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16085/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
+
+<p>The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.</p>
+
+<p><strong>Show split console</strong> adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16086/split_console.png" style="height: 352px; width: 902px;"></p>
+
+<p>The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:</p>
+
+<ul>
+ <li>click the "Settings" command in the menu:<img alt="" src="https://mdn.mozillademos.org/files/16082/DevTools_Menu.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></li>
+ <li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li>
+</ul>
+
+<p>The Settings pane looks something like this:</p>
+
+<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/16081/dev_tools_settings.png"></p>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
+
+<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
+
+<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
+
+<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p>
+
+<p>As of Firefox 62, if the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.</p>
+
+<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p>
+
+<h3 id="Themes">Themes</h3>
+
+<p>This enables you to choose one of two themes.</p>
+
+<ul>
+ <li>
+  <p>There's a light theme, which is the default:</p>
+
+  <p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/16083/theme-light.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p>
+ </li>
+ <li>
+  <p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+  <p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/16084/theme-dark.png" style="border: 1px solid #cccccc; display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1920px;"></p>
+ </li>
+</ul>
+
+<h3 id="Common_preferences">Common preferences</h3>
+
+<p>Settings that apply to more than one tool. There's just one of these:</p>
+
+<dl>
+ <dt><em>Enable persistent logs</em></dt>
+ <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd>
+</dl>
+
+<div class="note">
+<p>If Common Preferences is not included in the Settings,  Web Console logs can be persisted  by using the 'about:config'  url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true</p>
+</div>
+
+<h3 id="Inspector">Inspector</h3>
+
+<dl>
+ <dt><em>Show browser styles</em></dt>
+ <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd>
+ <dt><em>Truncate DOM attributes</em></dt>
+ <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd>
+ <dt><em>Default color unit</em></dt>
+ <dd>A setting to control how colors are represented in the inspector:
+ <ul>
+  <li>Hex</li>
+  <li>HSL(A)</li>
+  <li>RGB(A)</li>
+  <li>color name</li>
+  <li>As authored.</li>
+ </ul>
+ </dd>
+ <dt><em>Enable layout panel</em></dt>
+ <dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<dl>
+ <dt><em>Enable timestamps</em></dt>
+ <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd>
+ <dt><em>Enable new console frontend</em></dt>
+ <dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Debugger">Debugger</h3>
+
+<dl>
+ <dt><em>Enable Source Maps</em></dt>
+ <dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd>
+ <dt><em>Enable new debugger frontend</em></dt>
+ <dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd>
+</dl>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<dl>
+ <dt><em>Show original sources</em></dt>
+ <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd>
+ <dt><em>Autocomplete CSS</em></dt>
+ <dd>Enable the Style Editor to offer autocomplete suggestions.</dd>
+</dl>
+
+<h3 id="Screenshot_Behavior">Screenshot Behavior</h3>
+
+<dl>
+ <dt><em>Screenshot to clipboard</em></dt>
+ <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd>
+ <dt><em>Play camera shutter sound</em></dt>
+ <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd>
+</dl>
+
+<h3 id="Editor_Preferences">Editor Preferences</h3>
+
+<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<dl>
+ <dt><em>Detect indentation</em></dt>
+ <dd>Auto-indent new lines based on the current indentation.</dd>
+ <dt><em>Autoclose brackets</em></dt>
+ <dd>Determines whether typing an opening character like <code>[</code> or <code>{</code> will cause the editor to insert the matching closing character <code>]</code> or <code>}</code> for you.</dd>
+ <dt><em>Indent using spaces</em></dt>
+ <dd>When checked, indentation will be performed using spaces, when off, the editor will use tabs instead.</dd>
+ <dt><em>Tab size</em></dt>
+ <dd>The frequency of tab stops in the editor. Select 2, 4, or 8.</dd>
+ <dt><em>Keybindings</em></dt>
+ <dd>Choose the default CodeMirror keybindings or keybindings from one of several popular editors:
+ <ul>
+  <li>Vim</li>
+  <li>Emacs</li>
+  <li>Sublime Text</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Advanced_settings">Advanced settings</h3>
+
+<dl>
+ <dt><em>Show Gecko platform data</em></dt>
+ <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd>
+</dl>
+
+<dl>
+ <dt><em>Disable HTTP Cache</em></dt>
+ <dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.
+ <div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div>
+ </dd>
+ <dt><em>Disable JavaScript</em></dt>
+ <dd>Reload the current tab with JavaScript disabled.</dd>
+ <dt><em>Enable Service Workers over HTTP</em></dt>
+ <dd>Enable Service Worker registrations from insecure websites.</dd>
+ <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt>
+ <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd>
+ <dt><em>Enable remote debugging</em></dt>
+ <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd>
+ <dt><em>Enable worker debugging</em></dt>
+ <dd>Enable a panel within the debugger to debug workers.
+ <p class="note">Note: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p>
+ </dd>
+</dl>
diff --git a/files/zh-tw/tools/style_editor/index.html b/files/zh-tw/tools/style_editor/index.html
new file mode 100644
index 0000000000..058bf07f22
--- /dev/null
+++ b/files/zh-tw/tools/style_editor/index.html
@@ -0,0 +1,103 @@
+---
+title: 樣式編輯器
+slug: Tools/Style_Editor
+translation_of: Tools/Style_Editor
+---
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">樣式編輯器使您能夠</span></span>:</p>
+
+<ul>
+ <li>查看和編輯與頁面關聯的所有樣式表</li>
+ <li>從頭開始創建新樣式表並將其應用於該頁面</li>
+ <li>導入現成的樣式表並將其應用於該頁面</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+<p>要打開樣式編輯器，請從“ 網頁開發者”選單中選擇“樣式編輯器”選項。（這是Mac上“工具”選單中的子選單）。 <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">工具箱</a>將會顯示在瀏覽器的視窗底部，並顯示樣式編輯器:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>樣式編輯器分為兩個主要部分：</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">視窗左側的樣式列表</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_editor_pane">視窗中間的樣式編輯器</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar">視窗右邊媒體側欄</a></li>
+</ul>
+
+<div class="geckoVersionNote">
+<p>從Firefox 33開始，樣式編輯器還有第三個組件: <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">媒體測攔</a>。</p>
+</div>
+
+<h2 id="樣式列表">樣式列表</h2>
+
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">左側的樣式列表格列出了當前頁面正在使用的所有樣式表。</span> <span title="">通過單擊工作表名稱左側的眼球圖標，可以快速打開和關閉樣式表的使用。</span> <span title="">通過單擊列表中每個樣式表選項右下角的“儲存”按鈕，可以將對樣式表所做的任何更改保存到電腦硬碟裡。</span></span></p>
+
+<h2 id="樣式編輯器">樣式編輯器</h2>
+
+<p>中間是編輯器窗格。 您可以在此處閱讀和編輯所選樣式表的原始碼。 您所做的任何更改都會立即應用於頁面。 這使得嘗試，修改和測試更改變得容易。 對更改感到滿意後，可以單擊樣式列表窗格中工作表條目上的“儲存”按鈕，以在電腦上儲存副本。</p>
+
+<p>The editor provides line numbers and syntax highlighting to help make it easier to read your CSS. It also supports a number of <a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a>.</p>
+
+<p>The Style Editor automatically de-minimizes style sheets that it detects, without affecting the original. This makes it much easier to work on pages that have been optimized.</p>
+
+<p>The Style Editor supports autocomplete. Just start typing, and it will offer you a list of suggestions.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">You can switch autocomplete off in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p>
+
+<h2 id="The_media_sidebar">The media sidebar</h2>
+
+<p>From Firefox 33 onwards, the Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>. The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. The condition text of the rule is greyed-out if the media query doesn’t currently apply.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">The media sidebar works especially well with <a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> for creating and debugging responsive layouts:</p>
+
+<p>{{EmbedYouTube("aVUXmvLSwoM")}}</p>
+
+<h2 id="Creating_and_importing_style_sheets">Creating and importing style sheets</h2>
+
+<p>You can create a new style sheet by clicking the New button in the toolbar. Then you can just start entering CSS into the new editor and watch as the new styles apply in real time just like changes to the other sheets.</p>
+
+<p>You can load a style sheet from disk and apply it to the page by clicking the Import button.</p>
+
+<h2 id="Source_map_support">Source map support</h2>
+
+<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
+
+<p>Web developers often create CSS files using a preprocessor like <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>. These tools generate CSS files from a richer and more expressive syntax. If you do this, being able to see and edit the generated CSS is not so useful, because the code you maintain is the preprocessor syntax, not the generated CSS. So you'd need to edit the generated CSS, then manually work out how to reapply that to the original source.</p>
+
+<p>Source maps enable the tools to map back from the generated CSS to the original syntax, so they can display, and allow you to edit, files in the original syntax. From Firefox 29 onwards, the Style Editor can understand CSS source maps.</p>
+
+<p>This means that if you use, for example, Sass, then the Style Editor will show you, and allow you to edit, Sass files, rather than the CSS that is generated from them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">For this to work, you must:</p>
+
+<ul>
+ <li>use a CSS preprocessor that understands the <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Currently this means <a href="http://sass-lang.com/">Sass</a> 3.3.0 or above or the <a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>. Other preprocessors are actively working on adding support, or considering it.</li>
+ <li>actually instruct the preprocessor to generate a source map, for example by passing the <code>--sourcemap</code> argument to the Sass command-line tool</li>
+</ul>
+
+<h3 id="Viewing_original_sources">Viewing original sources</h3>
+
+<p>Now, if you check "Show original sources" in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, the links next to CSS rules in the <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> will link to the original sources in the Style Editor.</p>
+
+<p>From Firefox 35 onwards original sources are displayed by default.</p>
+
+<h3 id="Editing_original_sources">Editing original sources</h3>
+
+<p>You can also edit the original sources in the Style Editor and see the results applied to the page immediately. To get this to work there are two extra steps.</p>
+
+<p>First, set up your preprocessor so it watches the original source and automatically regenerates the CSS when the source changes. With Sass you can do this simply by passing the <code>--watch</code> option:</p>
+
+<pre>sass index.scss:index.css --sourcemap --watch</pre>
+
+<p>Next, save the original source in the Style Editor by clicking the "Save" button next to the file, and saving it over the original file.</p>
+
+<p>Now when you make changes to the source file in the Style Editor the CSS is regenerated and you can see the changes right away.</p>
+
+<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
+
+<h3 id="Source_editor_shortcuts">Source editor shortcuts</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
diff --git a/files/zh-tw/tools/web_audio_editor/index.html b/files/zh-tw/tools/web_audio_editor/index.html
new file mode 100644
index 0000000000..77e3ee44ba
--- /dev/null
+++ b/files/zh-tw/tools/web_audio_editor/index.html
@@ -0,0 +1,36 @@
+---
+title: Web Audio Editor
+slug: Tools/Web_Audio_Editor
+translation_of: Tools/Web_Audio_Editor
+---
+<div class="geckoVersionNote">
+ <p>The Web Audio Editor is new in Firefox 32.</p>
+</div>
+<p>With the <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>, developers create an {{domxref ("AudioContext", "audio context")}}. Within that context they then construct a number of {{domxref ("AudioNode", "audio nodes")}}, including:</p>
+<ul>
+ <li>nodes providing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">audio source</a>, such as an oscillator or a data buffer source</li>
+ <li>nodes performing <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformations</a> such as delay and gain</li>
+ <li>nodes representing the <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination of the audio stream</a>, such as the speakers</li>
+</ul>
+<p>Each node has zero or more {{domxref ("AudioParam")}} properties that configure its operation. For example, the {{domxref ("GainNode")}} has a single <code>gain</code> property, while the {{domxref ("OscillatorNode")}} has <code>frequency</code> and <code>detune</code> properties.</p>
+<p>The developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.</p>
+<p>The Web Audio Editor examines an audio context constructed in the page and provides a visualization of its graph. This gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. You can then examine and edit the <code>AudioParam</code> properties for each node in the graph. Some non-<code>AudioParam</code> properties, like an <code>OscillatorNode</code>'s <code>type</code> property, are displayed, and you can edit these as well.</p>
+<p>This tool is still experimental. If you find bugs, we'd love it if you <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">filed them in Bugzilla</a>. If you have feedback or suggestions for new features, <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> or <a href="http://twitter.com/firefoxdevtools">Twitter</a> are great places to register them.</p>
+<h2 id="Opening_the_Web_Audio_Editor">Opening the Web Audio Editor</h2>
+<p>The Web Audio Editor is not enabled by default in Firefox 32. To enable it, open the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">Developer Tool Settings</a> and check "Web Audio". Now there should be an extra tab in the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">Toolbox toolbar</a> labeled "Web Audio". Click the tab and load a page that constructs an audio context. Two good demos are:</p>
+<ul>
+ <li>the <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, which can apply various effects to the microphone input and also provides a visualisation of the result</li>
+ <li>the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, which changes the pitch and volume of a sine wave as you move the mouse pointer</li>
+</ul>
+<h2 id="Visualizing_the_graph">Visualizing the graph</h2>
+<p>The Web Audio Editor will now display the graph for the loaded audio context. Here's the graph for the Violent Theremin demo:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8815/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">You can see that it uses three nodes: an {{domxref ("OscillatorNode")}} as the source, a {{domxref ("GainNode")}} to control the volume, and an {{domxref ("GainNode")}} as the destination.</p>
+<h3 id="Connections_to_AudioParams">Connections to AudioParams</h3>
+<div class="geckoVersionNote">
+ <p>Displaying connections to AudioParams is new in Firefox 34.</p>
+</div>
+<p>Connections between nodes are displayed as solid lines. If, instead, you've <a href="/en-US/docs/Web/API/AudioNode.connect%28AudioParam%29">connected a node to an AudioParam in another node</a>, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the <code>AudioParam</code>:<img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<h2 id="Inspecting_and_modifying_AudioNodes">Inspecting and modifying AudioNodes</h2>
+<p>If you click on a node, it's highlighted and you get a node inspector on the right hand side. This list the values of that node's <code>AudioParam</code> properties. For example, here's what the OscillatorNode looks like:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8817/web-audio-editor-node.png" style="display: block; margin-left: auto; margin-right: auto;">With the Violent Theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. However, the value isn't updated in real time: you have to click the node again to see the updated value.</p>
+<p>If you click on a value in the node inspector you can modify it: press Enter or Tab and the new value takes effect immediately.</p>
diff --git a/files/zh-tw/tools/web_console/console_messages/index.html b/files/zh-tw/tools/web_console/console_messages/index.html
new file mode 100644
index 0000000000..47849a3dab
--- /dev/null
+++ b/files/zh-tw/tools/web_console/console_messages/index.html
@@ -0,0 +1,389 @@
+---
+title: 主控台訊息
+slug: Tools/Web_Console/Console_messages
+translation_of: Tools/Web_Console/Console_messages
+---
+<p>訊息顯示窗格佔據了網頁主控台的大部分：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p>
+
+<p>每個訊息都會以單獨的行顯示出來：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Time</strong>（時間）</td>
+   <td>訊息被紀錄的時間。預設情況並不顯示：你可以<a href="/zh-TW/docs/Tools_Toolbox#Settings">在工具箱內設定</a>讓時間戳出現。</td>
+  </tr>
+  <tr>
+   <td><strong>Category</strong>（類別）</td>
+   <td>
+    <p><strong>類別</strong>：它標示這訊息屬於什麼類別：</p>
+
+    <ul style="margin-left: 40px;">
+     <li><strong>黑色</strong>：網路請求</li>
+     <li><span style="color: #0099ff;"><strong>藍色</strong></span>：CSS 警告/錯誤/日誌</li>
+     <li><strong><span style="color: #ff8c00;">橘色</span></strong>：JavaScript 警告/錯誤</li>
+     <li><span style="color: #ff0000;"><strong>紅色</strong></span>：安全性警告/錯誤</li>
+     <li><span style="color: #90b090;"><strong>綠色</strong></span>：伺服器日誌</li>
+     <li><span style="color: #a9a9a9;"><strong>淺灰色</strong></span>：<a href="/zh-TW/docs/Web/API/console" title="/zh-TW/docs/Web/API/console">Console</a> API 訊息</li>
+     <li><span style="color: #696969;"><strong>暗灰色</strong></span>：與<a href="/zh-TW/docs/Tools/Web_Console/The_command_line_interpreter">命令行解釋器</a>互動的輸入/輸出</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Type</strong>（種類）</td>
+   <td>For all messages except network requests and interactive input/output an icon indicating whether it is an error(X), a warning(!) or an informational log message (i).</td>
+  </tr>
+  <tr>
+   <td><strong>Message</strong>（訊息）</td>
+   <td>訊息本身。</td>
+  </tr>
+  <tr>
+   <td><strong>Number of occurrences</strong>（出現次數）</td>
+   <td>若該行產生的警告或錯誤被執行一次以上，該行只會紀錄一次、並用計數器表明被執行多少次。</td>
+  </tr>
+  <tr>
+   <td><strong>Filename and line number</strong>（文件名和行數）</td>
+   <td>
+    <p>對 JavaScript、CSS 與主控台的 API 訊息而言，訊息可以追蹤到特定的程式碼行數。主控台接著會提供一個能鏈接到生成該訊息的文件名和行數。</p>
+
+    <p>從 Firefox 36 開始，還會提供訊息生成的列數。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>By default, the console is cleared each time you navigate to a new page or reload the current page. To override this behavior, check "Enable persistent logs" in the <a href="/en-US/docs/Tools_Toolbox#Common_preferences">Settings</a>.</p>
+
+<h2 id="Message_categories">Message categories</h2>
+
+<h3 id="Network">Network</h3>
+
+<div class="note">
+<p>Network log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>Network requests are logged with a line that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Time</strong></td>
+   <td>The time the message was recorded.</td>
+  </tr>
+  <tr>
+   <td><strong>Category</strong></td>
+   <td>Indicates that the message is an HTTP request.</td>
+  </tr>
+  <tr>
+   <td><strong>Method</strong></td>
+   <td>
+    <p>The specific HTTP request method.</p>
+
+    <p>If the request was made as an <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, there's an additional note indicating this:</p>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>URI</strong></td>
+   <td>The target URI.</td>
+  </tr>
+  <tr>
+   <td><strong>Summary</strong></td>
+   <td>The HTTP version, status code, and time taken to complete.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Viewing_network_request_details">Viewing network request details</h4>
+
+<p>If you click on the message, you'll be redirected to the <a href="/en-US/docs/Tools/Network_Monitor">Network panel</a> where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.</p>
+
+<p>Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:</p>
+
+<ul>
+ <li><strong>Headers:</strong> request and response headers</li>
+ <li><strong>Response:</strong> the response body</li>
+ <li><strong>Cookies:</strong> any cookies that were sent along with the request</li>
+ <li><strong>Call Stack</strong> (new in Firefox 50): for requests initiated by JavaScript, such as <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, you can see the call stack at the point the request was made.</li>
+</ul>
+
+<p>{{EmbedYouTube("cFlcWzJ9j4I")}}</p>
+
+<h3 id="JS">JS</h3>
+
+<p>JavaScript messages look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Learn_more_link">"Learn more" link</h4>
+
+<div class="geckoVersionNote">New in Firefox 49</div>
+
+<p>JavaScript errors contain a "Learn more" link that takes you to the<a href="/en-US/docs/Web/JavaScript/Reference/Errors"> JavaScript error reference</a> containing additional advice for fixing issues:</p>
+
+<p>{{EmbedYouTube("OabJc2QR6o0")}}</p>
+
+<h4 id="Source_maps">Source maps</h4>
+
+<div class="geckoVersionNote">New in Firefox 50 (but disabled by default)</div>
+
+<p>From Firefox 50, the Web Console understands <a href="http://blog.teamtreehouse.com/introduction-source-maps">source maps</a>. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.</p>
+
+<p>At the moment source map support is disabled by default. To enable it, visit "about:config", find the preference "devtools.sourcemap.locations.enabled" and set it to <code>true</code>.</p>
+
+<p>Be aware that support is still experimental. It may have bugs and may slow down console output. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1289570">Bug 1289570</a> tracks any work that needs to be done before source map support can be enabled by default.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="note">
+<p>CSS warnings and reflow messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>CSS messages look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Reflow_events">Reflow events</h4>
+
+<p>The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p>
+
+<p>Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p>
+
+<p>Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">toolbar</a> and selecting "Reflows".</p>
+
+<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p>
+
+<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4>
+
+<p>If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.</p>
+
+<p>However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls <code>window.getComputedStyle(thing).height</code>:</p>
+
+<pre class="brush: js">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<p>Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.</p>
+
+<h3 id="Security">Security</h3>
+
+<p>Security warnings and errors look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p>
+
+<p>The complete list of security messages is as follows:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Message</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed active content</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Blocked loading mixed display content</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) active content on a secure page</td>
+   <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Loading mixed (insecure) display content on a secure page</td>
+   <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
+   <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Pages containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td>
+   <td>iframes containing login forms must be served over HTTPS, not HTTP.</td>
+  </tr>
+  <tr>
+   <td>The site specified an invalid Strict-Transport-Security header.</td>
+   <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
+   </td>
+   <td>
+    <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p>
+
+    <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p>
+
+    <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p>
+
+<h3 id="Logging">Logging</h3>
+
+<div class="note">
+<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Web console supports the following <a href="/en-US/docs/Web/API/Console">Console API</a> messages:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></li>
+ <li><code><a href="/en-US/docs/Web/API/Console/clear">clear()</a></code> (new in Firefox 48)</li>
+ <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li>
+ <li><code>exception()</code></li>
+ <li><code>info()</code></li>
+ <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li>
+</ul>
+
+<p>The console prints a stack trace for all error messages, like this:</p>
+
+<pre class="brush: js">function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p>
+
+<h3 id="Server">Server</h3>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 43</p>
+</div>
+
+<div class="note">
+<p>Server-side log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p>
+</div>
+
+<p>From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p>
+
+<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p>
+
+<ul>
+ <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li>
+ <li>your server-side code uses this API to log messages</li>
+ <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li>
+ <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li>
+ <li>the Web Console decodes these headers and displays them</li>
+</ul>
+
+<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p>
+
+<h3 id="Command_line_inputoutput">Command line input/output</h3>
+
+<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p>
+
+<h2 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h2>
+
+<h3 id="Filtering_by_category">Filtering by category</h3>
+
+<p>You can use the toolbar along the top to constrain the results displayed.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:</p>
+
+<ul>
+ <li>Net
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>XHR</li>
+   <li>Log</li>
+  </ul>
+ </li>
+ <li>CSS
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>Reflows</li>
+  </ul>
+ </li>
+ <li>JS
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+  </ul>
+ </li>
+ <li>Security
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+  </ul>
+ </li>
+ <li>Logging
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>Info</li>
+   <li>Log</li>
+   <li>Shared Workers</li>
+   <li>Service Workers</li>
+   <li>Add-on or Chrome Workers</li>
+  </ul>
+ </li>
+ <li>Server
+  <ul>
+   <li>Errors</li>
+   <li>Warnings</li>
+   <li>info</li>
+   <li>Log</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="用文字過濾">用文字過濾</h3>
+
+<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p>
+
+<h3 id="清除日誌">清除日誌</h3>
+
+<p>&gt;最後，您可以使用工具欄清除日誌。在 Firefox 48 以前，可以按下右邊的「清除」按鈕。在 Firefox 48 以後，可以按下左邊的垃圾桶圖示。</p>
diff --git a/files/zh-tw/tools/web_console/index.html b/files/zh-tw/tools/web_console/index.html
new file mode 100644
index 0000000000..49678e6d99
--- /dev/null
+++ b/files/zh-tw/tools/web_console/index.html
@@ -0,0 +1,37 @@
+---
+title: 網頁主控台
+slug: Tools/Web_Console
+translation_of: Tools/Web_Console
+---
+<p>網頁主控台能：</p>
+
+<ol>
+ <li>記錄網頁相關的資訊：網路請求、JavaScript、CSS、安全性相關的問題，警告和錯誤、以及頁面運行的 JavaScript 相關問題，警告，錯誤，和參考訊息。</li>
+ <li>透過執行頁面文中的 JavaScript 表達式與網頁互動</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Opening_the_Web_Console">打開網頁主控台</a></dt>
+ <dd>如何開始使用網頁主控台。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/The_command_line_interpreter">命令行解釋器</a></dt>
+ <dd>如何用主控台與文件互動。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Split_console">分割主控台</a></dt>
+ <dd>把主控台拉到其他工具旁邊。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Console_messages">主控台訊息</a></dt>
+ <dd>主控台相關的紀錄訊息。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Rich_output">豐富的輸出對象</a></dt>
+ <dd>透過主控台觀察並與紀錄的物件互動。</dd>
+ <dt><a href="/zh-TW/docs/Tools/Web_Console/Keyboard_shortcuts">鍵盤快速鍵</a></dt>
+ <dd>鍵盤快速鍵參考。</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html b/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..1d113d419c
--- /dev/null
+++ b/files/zh-tw/tools/web_console/keyboard_shortcuts/index.html
@@ -0,0 +1,10 @@
+---
+title: 鍵盤快捷鍵
+slug: Tools/Web_Console/Keyboard_shortcuts
+translation_of: Tools/Web_Console/Keyboard_shortcuts
+---
+<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "web-console") }}</p>
+
+<h2 id="全域快捷鍵">全域快捷鍵</h2>
+
+<p>{{ Page ("zh-TW/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/zh-tw/tools/web_console/opening_the_web_console/index.html b/files/zh-tw/tools/web_console/opening_the_web_console/index.html
new file mode 100644
index 0000000000..85d89608b0
--- /dev/null
+++ b/files/zh-tw/tools/web_console/opening_the_web_console/index.html
@@ -0,0 +1,23 @@
+---
+title: 打開網頁主控台
+slug: Tools/Web_Console/Opening_the_Web_Console
+translation_of: Tools/Web_Console/UI_Tour
+---
+<p>要開啟網頁主控台：</p>
+
+<ul>
+ <li>從 Firefox 選單內的開發者工具中，點選網頁主控台（如果你讓選單出現、或是使用 Mac OS X 的話，點選「工具」選單）、</li>
+ <li>或是按下快速鍵 <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd>（OS X 是 <kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd>）</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/zh-TW/docs/Tools/DevTools_Window" title="/zh-TW/docs/Tools/DevTools_Window">網頁工具箱</a>將出現在瀏覽器視窗底部，網頁主控台也會隨之啟動（<a href="/zh-TW/docs/Tools/DevTools_Window#Toolbar" title="/zh-TW/docs/Tools/DevTools_Window#Toolbar">網頁工具箱</a>只會稱它為「主控台」）：</p>
+
+<p><img alt="網頁主控台" src="https://mdn.mozillademos.org/files/13282/console.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 845px;"></p>
+
+<p>網頁主控台介面主要有三大部分：</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">工具欄</a>：位於頂部。包含了諸如「網路」、「CSS」、還有「JS」之類的按鍵。它用於過濾顯示訊息。</li>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">命令行</a>：位於底部。你可以用它輸入 JavaScript 表達式。</li>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">訊息顯示窗格</a>：位於工具欄與命令行之間，並佔據了視窗的大部分，是網頁主控台顯示訊息的地方。</li>
+</ul>
diff --git a/files/zh-tw/tools/web_console/rich_output/index.html b/files/zh-tw/tools/web_console/rich_output/index.html
new file mode 100644
index 0000000000..d09757cfa2
--- /dev/null
+++ b/files/zh-tw/tools/web_console/rich_output/index.html
@@ -0,0 +1,75 @@
+---
+title: 豐富的輸出對象
+slug: Tools/Web_Console/Rich_output
+translation_of: Tools/Web_Console/Rich_output
+---
+<p>當網路主控台印出物件時，它不但會顯示物件名、還會包括該物件資訊的 richer set。尤其是它要：</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/Rich_output#Type-specific_rich_output">提供某些類型的額外資訊</a></li>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/Rich_output#Examining_object_properties">開啟物件屬性的詳細檢查</a></li>
+ <li><a href="/zh-TW/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">為 DOM 元素提供 richer information，並讓你能在檢查中選擇。</a></li>
+</ul>
+
+<h2 id="特定類型的_rich_output">特定類型的 rich output</h2>
+
+<p>網路主控台給許多物件類型提供了 rich output，包括：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>Object</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Array</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Date</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Promise</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 36</p>
+    </div>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>RegExp</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Window</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Document</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Element</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
+  </tr>
+  <tr>
+   <td><code>Event</code></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/14434/webconsole-events.png" style="height: 51px; width: 600px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="檢查物件屬性">檢查物件屬性</h2>
+
+<p>當控制台印出一個物件的時候，它會以斜體的樣式呈現。點擊它，你會看到一個有該物件詳細資訊的面板：
+</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;">要關閉此面板請按 <kbd>Esc</kbd> 鍵...</p>
+
+<h2 id="高亮顯示與_DOM_節點檢查">高亮顯示與 DOM 節點檢查</h2>
+
+<p>若你在控制台印出的 DOM 元素上懸停游標，頁面會高亮該元素：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the <a href="https://developer.mozilla.org/zh-TW/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p>
diff --git a/files/zh-tw/tools/web_console/split_console/index.html b/files/zh-tw/tools/web_console/split_console/index.html
new file mode 100644
index 0000000000..398f771c79
--- /dev/null
+++ b/files/zh-tw/tools/web_console/split_console/index.html
@@ -0,0 +1,14 @@
+---
+title: 分割主控台
+slug: Tools/Web_Console/Split_console
+translation_of: Tools/Web_Console/Split_console
+---
+<p>您可以把主控台拉到其他工具旁邊。當你在工具箱中的另一種工具內，只要按下 <kbd>Esc</kbd> 或是在<a href="/zh-TW/docs/Tools_Toolbox#Toolbar">工具欄</a>內的「切換分割主控台」按鈕。工具箱將會分割，上面是原有的工具、而下面會是網頁主控台。</p>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>如往常般，<code>$0</code> 在檢測器作為選中元素的速記：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">當您使用含有除錯器的分割主控台，主控台的範圍，是當前執行的 stack frame。因此，若你在函數內選了一個斷點，範圍將是該函式的範圍。You'll get autocomplete for objects defined in the function, and can easily modify them on the fly: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..72d9eba4fc
--- /dev/null
+++ b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,121 @@
+---
+title: 命令行解釋器
+slug: Tools/Web_Console/The_command_line_interpreter
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13280/console-cli.png" style="display: block; height: 296px; margin-left: auto; margin-right: auto; width: 877px;"></p>
+
+<h2 id="Entering_expressions">Entering expressions</h2>
+
+<p>To enter expressions just type into the command line and press <kbd>Enter</kbd>. To enter multiline expressions, use <kbd>Shift</kbd>+<kbd>Enter</kbd> instead of <kbd>Enter</kbd>.</p>
+
+<p>The expression you type is echoed in the message display window, followed by the result:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="geckoVersionNote">New in Firefox 47</div>
+
+<p>From Firefox 47 onwards, if your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p>
+
+<p>For example, if you type:</p>
+
+<pre class="brush: js">function foo() {</pre>
+
+<p>and then <kbd>Enter</kbd>, the Console will not immediately execute the input, but will behave as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p>
+
+<h2 id="Accessing_variables">Accessing variables</h2>
+
+<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Autocomplete">Autocomplete</h2>
+
+<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Type <kbd>Enter</kbd> or <kbd>Tab</kbd> to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p>
+
+<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p>
+
+<p>You get autocomplete suggestions for array elements, as well:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Defining_variables">Defining variables</h2>
+
+<p>You can define your own variables, and then access them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Command_history">Command history</h2>
+
+<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p>
+
+<p>From Firefox 39 onwards, this history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p>
+
+<h2 id="Working_with_iframes">Working with iframes</h2>
+
+<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p>
+
+<p>You can pass the iframe DOM element:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>You can pass a CSS selector that matches the iframe:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>You can pass the iframe's global window object:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>For example, suppose we have a document that embeds an iframe:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The iframe defines a new function:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>You can switch context to the iframe like this:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Now you'll see that the global window's document is the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">And you can call the function defined in the iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Helper_commands">Helper commands</h2>
+
+<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>
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
+---
+<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
new file mode 100644
index 0000000000..cfdadf7a1b
--- /dev/null
+++ b/files/zh-tw/tools/webide/troubleshooting/index.html
@@ -0,0 +1,46 @@
+---
+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>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
commit	218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree	a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/tools
parent	074785cea106179cb3305637055ab0a009ca74f2 (diff)
download	translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip