initial commit

1 files changed, 303 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/console/index.html b/files/zh-cn/web/api/console/index.html
new file mode 100644
index 0000000000..f66e3de417
--- /dev/null
+++ b/files/zh-cn/web/api/console/index.html
@@ -0,0 +1,303 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - Reference
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><strong><code>Console</code></strong> 对象提供了浏览器控制台调试的接口（如：Firefox 的 <a href="/en-US/docs/Tools/Web_Console">Web Console</a>）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。</p>
+
+<p><code>Console</code> 对象可以从任何全局对象中访问到，如 浏览器作用域上的 {{domxref("Window")}}，以及通过属性控制台作为workers中的特定变体的 {{domxref("WorkerGlobalScope")}}。可以通过 {{domxref("Window.console")}} 引用，也可以简单的通过 <code>console</code> 引用。例：</p>
+
+<pre class="brush: js notranslate">console.log("Failed to open the specified link")</pre>
+
+<p>本页面记录了 <code>Console</code> 对象上的 {{anch("Methods")}}（方法）并给出了几个 {{anch("Usage")}} （用例）。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="blockIndicator note">
+<p><strong>提示</strong>: 实际的 <code>console</code> 接口被定义为全小写的形式（比如不是这种形式 <code>Console</code> ），这是历史原因导致的。</p>
+</div>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>如果第一个参数为 <code>false</code> ，则将消息和堆栈跟踪记录到控制台。</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>清空控制台，并输出 <code>Console was cleared</code>。</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。</dd>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>重置指定标签的计数器值。</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>在控制台打印一条 <code>"debug"</code> 级别的消息。</dd>
+ <dt>{{domxref("Console.dir()")}}</dt>
+ <dd>显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。.</dd>
+ <dt>{{domxref("Console.dirxml()")}}</dt>
+ <dd>打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图。</dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>打印一条错误信息，使用方法可以参考 <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a>。</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd><code>error()</code> 方法的别称。</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>创建一个新的内联 <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, 后续所有打印内容将会以子层级的形式展示。调用 <code>groupEnd()</code>来闭合组。</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>创建一个新的内联 <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>。使用方法和 <code>group()</code> 相同，不同的是，<code>groupCollapsed()</code> 方法打印出来的内容默认是折叠的。调用<code>groupEnd()</code>来闭合组。</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>闭合当前内联 <a href="https://developer.mozilla.org/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>。</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>打印资讯类说明信息，使用方法可以参考 <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a>。</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>打印内容的通用方法，使用方法可以参考 <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a>。</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>将列表型的数据打印成表格。</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>启动一个以入参作为特定名称的<a href="https://developer.mozilla.org/en-US/docs/Web/API/console#Timers">计时器</a>，在显示页面中可同时运行的计时器上限为10,000.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>结束特定的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/console#Timers">计时器</a> 并以豪秒打印其从开始到结束所用的时间。</dd>
+ <dt>{{domxref("Console.timeLog()")}}</dt>
+ <dd>打印特定 <a href="/en-US/docs/Web/API/console#Timers">计时器</a> 所运行的时间。</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>添加一个标记到浏览器的 <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> 工具。</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>输出一个 <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>。</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>打印一个警告信息，可以使用 <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> 和额外的参数。</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">用法</h2>
+
+<h3 id="输出文本到控制台">输出文本到控制台</h3>
+
+<p>console 对象中较多使用的主要有四个方法 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, 和{{domxref("console.error()")}}。每一个结果在日志中都有不同的样式，可以使用浏览器控制台的日志筛选功能筛选出感兴趣的日志信息。</p>
+
+<p>有两种途径使用这些方法，可以简单的传入一组对象，其中的字符串对象会被连接到一起，输出到控制台。或者可以传入包含零个或多个的替换的字符串，后面跟着被替换的对象列表。</p>
+
+<h4 id="打印单个对象">打印单个对象</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js notranslate">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>打印结果类似下面:</p>
+
+<pre class="notranslate">[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="打印多个对象">打印多个对象</h4>
+
+<p>可以打印多个对象，就像下面一样：</p>
+
+<pre class="brush: js notranslate">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>打印结果类似下面：</p>
+
+<pre class="notranslate">[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})</pre>
+
+<h4 id="使用字符串替换">使用字符串替换</h4>
+
+<p>可以在传递给 console 的方法的时候使用下面的字符以期进行参数的替换。</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>%o</code> or <code>%O</code></td>
+   <td>打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。</td>
+  </tr>
+  <tr>
+   <td><code>%d</code> or <code>%i</code></td>
+   <td>打印整数。支持数字格式化。例如, <code>console.log("Foo %.2d", 1.1)</code> 会输出有先导 0 的两位有效数字: <code>Foo 01</code>。</td>
+  </tr>
+  <tr>
+   <td><code>%s</code></td>
+   <td>打印字符串。</td>
+  </tr>
+  <tr>
+   <td><code>%f</code></td>
+   <td>打印浮点数。支持格式化，比如 <code>console.log("Foo %.2f", 1.1)</code> 会输出两位小数: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注意</strong>：Chrome 不支持精确格式化。</p>
+</div>
+
+<p>当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。</p>
+
+<pre class="notranslate">for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>输出样例如下所示：</p>
+
+<pre class="notranslate">[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="为控制台定义样式">为控制台定义样式</h4>
+
+<p>可以使用 <code>%c</code> 为打印内容定义样式：</p>
+
+<pre class="brush: js notranslate">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div></div>
+
+<div>指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。</div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;">
+<p><br>
+ <code>%c</code> 语法可用的属性如下 (至少在 Firefox 中是这样，别的浏览器会有诸多不同）：</p>
+
+<ul>
+ <li>{{cssxref("background")}} 与其全写版本。</li>
+ <li>{{cssxref("border")}} 与其全写版本。</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("clear")}} 和 {{cssxref("float")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("font")}} 与其全写版本。</li>
+ <li>{{cssxref("line-height")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}} 与其全写版本。</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("text-transform")}} 这类 <code>text-*</code> 属性 </li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}} 和 {{cssxref("word-break")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+
+<p><strong>注意</strong>: 控制台信息的默认行为与行内元素相似。为了应用 <code>padding</code>, <code>margin</code> 这类效果，你应当这样设置<code>display: inline-block</code>.。</p>
+</div>
+
+<h3 id="在_console_中使用编组">在 console 中使用编组</h3>
+
+<p>可以使用嵌套组来把视觉上相关的元素合并，以协助组织你的输出。使用<code>console.group()</code>创建新的嵌套块，或者用<code>console.groupCollapsed()</code> 创建默认折叠的块，这种块需要点击闭合按钮来展开才能读到。</p>
+
+<p>直接调用 <code>console.groupEnd()</code>.就可以退出当前组。比如下面的代码:</p>
+
+<pre class="brush: js notranslate">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>执行结果:</p>
+
+<p><img alt="Demo of nested groups in Firefox console" src="https://mdn.mozillademos.org/files/16911/console_groups_demo.png"></p>
+
+<h3 id="定时器">定时器</h3>
+
+<p>你可以使用定时器来计算一段特定操作的周期。使用 <code>console.time</code><code>()</code> 方法以创建一个计时器，其唯一的参数表示了计时器的名字。使用 <code>console.timeEnd</code><code>()</code> 方法以关闭计时器，并获取经过的毫秒数，其同样以计时器的名字作为参数。一个页面最多同时只能有 10,000 个计数器运行。</p>
+
+<p>示例：:</p>
+
+<pre class="brush: js notranslate">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+</pre>
+
+<p>这段代码将会打印需要用户关闭 alert box 的时间, 打印时间到控制台上，等用户关闭第二个 alert 后，把结束时间打印到控制台。</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>注意无论在开始还是结束的时候都会打印计时器的名字。</p>
+
+<div class="note"><strong>注意:</strong> 如果使用计时器来记录网络时间请求的话下面的内容很重要。计时器将会报告传输过程的整个时间,而网络面板里显示的时间只计算了请求头部所需要的时间。如果启用了响应体日志记录，那么列出的响应头部和响应体组合的时间应该与在控制台输出中看到的时间相符。</div>
+
+<h3 id="堆栈跟踪">堆栈跟踪</h3>
+
+<p>控制台也支持输出堆栈，其将会显示到调用 {{domxref("console.trace()")}} 的点的调用路径。如下所示：</p>
+
+<pre class="brush: js notranslate">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>控制台的输出：</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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="注意">注意</h2>
+
+<ul>
+ <li>在 Firefox 浏览器中，如果页面中自己定义了 <code>console</code> 对象，那么它会覆盖掉浏览器内置的 <code>console</code>对象，在其它浏览器可能也是。</li>
+</ul>
+
+<h2 id="相关文档">相关文档</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> - Firefox 浏览器控制台如何处理 console API 的调用</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> - 如何在调试移动设备时查看控制台输出。</li>
+</ul>
+
+<h3 id="其他实现">其他实现</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api">Microsoft Edge DevTools</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari Web Inspector</a></li>
+</ul>