initial commit

2 files changed, 407 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/console/assert/index.html b/files/zh-tw/web/api/console/assert/index.html
new file mode 100644
index 0000000000..415b4cfa9a
--- /dev/null
+++ b/files/zh-tw/web/api/console/assert/index.html
@@ -0,0 +1,118 @@
+---
+title: Console.assert()
+slug: Web/API/console/assert
+tags:
+  - API
+  - DOM
+  - Debugging
+  - 函式
+  - 控制台
+  - 網頁控制台
+  - 網頁開發
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>如果斷言（assertion）為非（false），主控台會顯示錯誤訊息；如果斷言為是（true），則不發生任何事。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>注意</strong>：<em>在 Node.js 內 <code>console.assert()</code> 方法的實做，與瀏覽器並不相同。</em></p>
+
+<p>瀏覽器內呼叫 falsy 的 <code>console.assert()</code> 斷言出現 <code>message</code>，但不會中斷程式碼的執行。然而在 Node.js 裡面，falsy 斷言會拋出 <code>AssertionError</code> 錯誤。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // c-like message formatting
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>布林表達式。如果斷言為非，訊息會出現在主控台上。</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>要印出來的 JavaScript 物件名單。 The string representations of each of these objects are appended together in the order listed and output.</dd>
+ <dt><code>msg</code></dt>
+ <dd>包含零個以上的 JavaScript 替代（substitution）字串。</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript objects with which to replace substitution strings within <code>msg</code>. This parameter gives you additional control over the format of the output.</dd>
+</dl>
+
+<p>請參見 {{domxref("console")}} 的 <a href="/zh-TW/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> 以獲取詳細資訊。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下程式碼示範一個 JavaScript 物件的斷言使用：</p>
+
+<pre class="brush: js">const errorMsg = 'the # is not even';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // or, using ES2015 object property shorthand:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}
+</pre>
+
+<p>請注意，雖然包含替換字符串的字符串在 Node 中用作 <code>console.log</code> 的參數，但很多（如果不是大多數）瀏覽器...</p>
+
+<pre class="brush: js">console.log('the word is %s', 'foo');
+// output: the word is foo
+</pre>
+
+<p>...在所有瀏覽器中，使用此類字符串目前無法作為console.assert的參數使用：</p>
+
+<pre class="brush: js">console.assert(false, 'the word is %s', 'foo');
+// correct output in Node (e.g. v8.10.0) and some browsers
+//     (e.g. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// incorrect output in some browsers
+//     (e.g. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo
+</pre>
+
+<p>有關詳細信息，請參閱 {{domxref("console")}} 文檔中的<a href="https://developer.mozilla.org/zh-TW/docs/Web/API/console#Outputting_text_to_the_console">將文本輸出到控制台</a>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/console/index.html b/files/zh-tw/web/api/console/index.html
new file mode 100644
index 0000000000..36320a69a8
--- /dev/null
+++ b/files/zh-tw/web/api/console/index.html
@@ -0,0 +1,289 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - NeedsCompatTable
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works varies from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p>
+
+<p>The <code>Console</code> object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Log a message and stack trace to console if the first argument is <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Clear the console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Log the number of times this line has been called with the given label.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>An alias for <code>log()</code>.
+ <div class="note"><strong>Note</strong>: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>An alias for <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. However, unlike <code>group()</code> this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative logging of information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Starts the browser's built-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Displays tabular data as a table.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since it started.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Usage</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3>
+
+<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
+
+<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.</p>
+
+<h4 id="Outputting_a_single_object">Outputting a single object</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>The output looks something like this:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4>
+
+<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);</pre>
+
+<p>This output will look like this:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Using_string_substitutions">Using string substitutions</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Outputs an integer. Number formatting is supported, for example  <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Outputs a string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Outputs a floating-point value. Formatting is supported, for example  <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Precision formatting doesn't work in Chrome</p>
+</div>
+
+<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>The output looks like this:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Styling_console_output">Styling console output</h4>
+
+<p>You can use the <code>%c</code> directive to apply a CSS style to console output:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
+
+<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
+
+<p>To exit the current group, simply call <code>console.groupEnd()</code>. For example, given this code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>The output looks like this:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
+
+<p>For example, given this code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>Will log the time needed by the user to discard the alert box:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
+
+<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
+
+<h3 id="Stack_traces">Stack traces</h3>
+
+<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>The output in the console looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li>
+ <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li>
+ <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li>
+</ul>
+
+<h3 id="Other_implementations">Other implementations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>