initial commit

7 files changed, 669 insertions, 0 deletions

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>