diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/console | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/console')
23 files changed, 2636 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/console/assert/index.html b/files/zh-cn/web/api/console/assert/index.html new file mode 100644 index 0000000000..4ce50bbef2 --- /dev/null +++ b/files/zh-cn/web/api/console/assert/index.html @@ -0,0 +1,102 @@ +--- +title: Console.assert() +slug: Web/API/Console/assert +tags: + - console +translation_of: Web/API/console/assert +--- +<div>{{APIRef("Console API")}}</div> + +<p>如果断言为false,则将一个错误消息写入控制台。如果断言是 <code>true</code>,没有任何反应。</p> + +<p>{{AvailableInWorkers}}</p> + +<div> +<p><code>console.assert()</code>方法在Node.js中的实现和浏览器中可用的<code>console.assert()</code>方法实现是不同的。在浏览器中当<code>console.assert()</code>方法接受到一个值为假断言的时候,会向控制台输出传入的内容,但是并不会中断代码的执行,而在Node.js v10.0.0之前,一个值为假的断言也将会导致一个<code>AssertionError</code>被抛出,使得代码执行被打断。v10.0.0修复了此差异,所以现在<code>console.assert()</code>在Node 和浏览器中执行行为相同 。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">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>一个布尔表达式。如果assertion为假,消息将会被输出到控制台之中。</dd> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>被用来输出的Javascript对象列表,最后输出的字符串是各个对象依次拼接的结果。</dd> + <dt><code>msg</code></dt> + <dd>一个包含零个或多个子串的Javascript字符串。</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>各个消息作为字串的Javascript对象。这个参数可以让你能够控制输出的格式。</dd> +</dl> + +<h2 id="案例">案例</h2> + +<p>下面的代码示例演示了JavaScript对象的使用:</p> + +<pre class="brush: js">const errorMsg = 'the # is not even'; +for (let number = 2; number <= 5; number += 1) { + console.log('the # is ' + number); + console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); + // 或者使用 ES2015 对象简写: + // console.assert(number % 2 === 0, {number, errorMsg}); +} +// 输出: +// 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>请注意, 你可以在大多数浏览器中使用 console.log 进行格式化输出</p> + +<pre class="brush: js">console.log('the word is %s try number %d', 'foo', 123); +// 输出: the word is foo try number 123</pre> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">但是 </span></font>console.assert</code> 在不同浏览器中可能获得不同的效果:</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-CN/docs/Web/API/Console#%E8%BE%93%E5%87%BA%E6%96%87%E6%9C%AC%E5%88%B0%E6%8E%A7%E5%88%B6%E5%8F%B0">输出文本到控制台</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", "#consoleassertexpression-object", "console.assert()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</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-cn/web/api/console/clear/index.html b/files/zh-cn/web/api/console/clear/index.html new file mode 100644 index 0000000000..4de2fcb2ea --- /dev/null +++ b/files/zh-cn/web/api/console/clear/index.html @@ -0,0 +1,110 @@ +--- +title: clear() +slug: Web/API/Console/clear +translation_of: Web/API/Console/clear +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>清空控制台.</p> + +<p>控制台显示的内容将会被一些信息替换,比如‘Console was cleared’这样的信息。</p> + +<p>需要的注意的一点是在Google Chrome浏览器中,如果用户在<a href="https://developers.google.cn/web/tools/chrome-devtools/console#preserve-log">设置</a>中勾选了“Preserve log”选项,console.clear()将不会起作用。 </p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.clear(); +</pre> + +<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", "#consoleclear", "console.clear()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("48.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("48.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <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-cn/web/api/console/count/index.html b/files/zh-cn/web/api/console/count/index.html new file mode 100644 index 0000000000..9b28cc12df --- /dev/null +++ b/files/zh-cn/web/api/console/count/index.html @@ -0,0 +1,169 @@ +--- +title: Console.count() +slug: Web/API/Console/count +translation_of: Web/API/Console/count +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>输出 count() 被调用的次数。此函数接受一个可选参数 <code>label。</code></p> + +<p>{{AvailableInWorkers}}</p> + +<p>如果有 <code>label</code>,此函数输出为那个指定的 <code>label 和</code> count() 被调用的次数。</p> + +<p>如果 <code>label </code>被忽略,此函数输出 count() 在其所处位置上被调用的次数。</p> + +<p>例如,下面的代码:</p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count();</pre> + +<p>Console 的输出如下:</p> + +<pre class="eval">"<no label>: 1" +"<no label>: 2" +"<no label>: 3" +"<no label>: 1" +</pre> + +<p>注意最后一行的日志输出:在 11 行对 count() 的单独调用是被当作一个独立事件来处理的。</p> + +<p>如果把变量 <code>user </code>当作<code> label 参数传给前面调用的 count(),把字符串 "alice" 传给后面调用的 count():</code></p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(user); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count("alice");</pre> + +<p>可以看到输出如下:</p> + +<pre class="eval">"bob: 1" +"alice: 1" +"alice: 2" +"alice: 3"</pre> + +<p>现在可以基于不同的 <code>label</code> 值维护不同的数值。由于 11 行的 <code>label 匹配了两次 user 的值,因此它不会被当作独立的事件。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.count([label]); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>label</code></dt> +</dl> + +<p> 字符串,如果有,count() 输出此给定的 <code>label 及其</code>被调用的次数。</p> + +<p><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">规范</strong></p> + +<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", "#consolecountlabel", "console.count()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("30.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("30.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/console/countreset/index.html b/files/zh-cn/web/api/console/countreset/index.html new file mode 100644 index 0000000000..237fbef762 --- /dev/null +++ b/files/zh-cn/web/api/console/countreset/index.html @@ -0,0 +1,132 @@ +--- +title: Console.countReset() +slug: Web/API/Console/countReset +translation_of: Web/API/Console/countReset +--- +<div>{{APIRef("Console API")}}</div> + +<p>重置计数器。此函数有一个可选参数 <code>label</code>。</p> + +<p>{{AvailableInWorkers}}</p> + +<p>如果提供了参数<code>label</code>,此函数会重置与label关联的计数。</p> + +<p>如果省略了参数<code>label</code>,此函数会重置默认的计数器。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.countReset([label]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>label</code></dt> + <dd>一个字符串, 若传入此参数 <code>countReset() </code>重置此label的count为0。</dd> + <dd>若忽略此参数 <code>countReset()</code> 重置count()默认的 default 字段的count为0<br> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>若传入label参数:</p> + +<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre> + +<p>若不传入label参数:</p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre> + +<h3 id="异常情况">异常情况</h3> + +<p>若传入一个不存在的 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><code>label</code></span></font>, <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset</code> 返回下面的警告信息:</span></span></span></p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre> + +<p>若 <code>label</code> 没有被传入 并且 <code>count()</code> 也没有被调用过, <code>countReset</code> 返回下面的警告信息:</p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre> + +<h2 id="示例">示例</h2> + +<p>下面给出示例代码:</p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.count(); +console.countReset();</pre> + +<p>控制台打印输出结果:</p> + +<pre class="eval">"default: 1" +"default: 2" +"default: 3" +"default: 1" +"default: 0" +</pre> + +<p>Note that the call to console.counterReset() resets the value of the default counter to zero.</p> + +<p>可以看到 调用 <code>console.counterReset()</code> 重置了<code>default</code> 的计数为0</p> + +<p>如果我们把 <code>user</code> 变量做为 <code>label</code> 传入第一次调用的 <code>count() </code> 把字符串 <code>'alice' </code>作为第二次调用<code>count()</code> 的参数</p> + +<pre class="brush: js">var user = ""; + +function greet() { + console.count(user); + return "hi " + user; +} + +user = "bob"; +greet(); +user = "alice"; +greet(); +greet(); +console.countReset("bob"); +console.count("alice");</pre> + +<p>我们看到的输出如下:</p> + +<pre class="eval">"bob: 1" +"alice: 1" +"alice: 2" +"bob: 0" +"alice: 3"</pre> + +<p>调用countReset("bod")只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。</p> + +<h2 id="Specifications">Specifications</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", "#count", "console.countReset()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Console.countReset")}}</p> diff --git a/files/zh-cn/web/api/console/debug/index.html b/files/zh-cn/web/api/console/debug/index.html new file mode 100644 index 0000000000..5e99b5ac81 --- /dev/null +++ b/files/zh-cn/web/api/console/debug/index.html @@ -0,0 +1,67 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +tags: + - 控制台 + - 调试 +translation_of: Web/API/Console/debug +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary"><code>{{domxref("Console")}}</code>.<strong><code>debug()</code></strong> 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.debug(<em>对象1</em> [, <em>对象2</em>, ..., <em>对象N</em>]); +console.debug(<em>消息</em>[, 字符串<em>1</em>, ..., 字符串<em>N</em>]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>对象1</code> ... <code>对象N</code></dt> + <dd>要输出的JavaScript 对象列表。 按传参的顺序把对象输出到控制台。</dd> + <dt><code>消息</code></dt> + <dd>一个JavaScript字符串,其中包含零个或多个替代字符串。</dd> + <dt><code>字符串1</code> ... <code>字符串N</code></dt> + <dd>JavaScript 对象,用来依次替换<code>msg</code>中的替代字符串。你可以在替代字符串中指定对象的输出格式。查看{{SectionOnPage("/zh-CN/docs/Web/API/Console", "使用字符串替换")}}了解替换字符串如何工作。</dd> +</dl> + +<p>有关详细信息,请参阅{{domxref("console")}} 对象文档中的<a href="/zh-CN/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", "#debug", "console.debug()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想为数据做出贡献,请查看https://github.com/mdn/browser-compat-data并向我们推送请求。</div> + +<p>{{Compat("api.Console.debug")}}</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <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://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/dir/index.html b/files/zh-cn/web/api/console/dir/index.html new file mode 100644 index 0000000000..8a8ecdf53f --- /dev/null +++ b/files/zh-cn/web/api/console/dir/index.html @@ -0,0 +1,106 @@ +--- +title: console.dir +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示。</p> + +<p>{{AvailableInWorkers}}</p> + +<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.dir(<em>object</em>); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>object</code></dt> + <dd>打印出该对象的所有属性和属性值.</dd> +</dl> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("8.0")}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("8.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/api/console/dirxml/index.html b/files/zh-cn/web/api/console/dirxml/index.html new file mode 100644 index 0000000000..50ad5d6029 --- /dev/null +++ b/files/zh-cn/web/api/console/dirxml/index.html @@ -0,0 +1,98 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +translation_of: Web/API/Console/dirxml +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.dirxml(<em>object</em>); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>object</code></dt> + <dd>一个属性将被输出的JavaScript对象。</dd> +</dl> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/error/index.html b/files/zh-cn/web/api/console/error/index.html new file mode 100644 index 0000000000..288f34fb4d --- /dev/null +++ b/files/zh-cn/web/api/console/error/index.html @@ -0,0 +1,170 @@ +--- +title: Console.error() +slug: Web/API/Console/error +translation_of: Web/API/Console/error +--- +<div>{{APIRef("Console API")}}</div> + +<p>向 Web 控制台输出一条错误消息。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<div class="note"> +<p><strong>注意:</strong> <code>console.exception()</code> 是 <code>console.error() 的别名;它们功能相同。</code></p> +</div> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>要输出的 JavaScript 对象列表。 这些对象的字符串形式按顺序加起来然后输出。</dd> + <dt><code>msg</code></dt> + <dd>一个字符串,它包含零个或多个替代字符串。</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>JavaScript 对象可以用此来替换<code>msg</code>里的替代字符串。你可以控制输出的格式。</dd> +</dl> + +<p>详情请看{{domxref("console")}}文档中的 <a href="/zh-CN/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", "#error", "console.error()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>替代字符串</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>console.exception</code> alias</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>替代字符串</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>console.exception</code> alias</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <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://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/group/index.html b/files/zh-cn/web/api/console/group/index.html new file mode 100644 index 0000000000..6d1c1b44a2 --- /dev/null +++ b/files/zh-cn/web/api/console/group/index.html @@ -0,0 +1,68 @@ +--- +title: console.group +slug: Web/API/Console/group +translation_of: Web/API/Console/group +--- +<p>{{ ApiRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>在 <a href="/zh-cn/Tools/Web_Console" title="Web Console">Web控制台</a>上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用{{ domxref("console.groupEnd()") }}之后,当前分组结束.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="eval">console.group(); +</pre> +<h2 id="参数">参数</h2> +<p>无.</p> +<h2 id="备注">备注</h2> +<p>在文档{{ domxref("console") }}中查看<a href="/zh-cn/DOM/console#Using_groups_in_the_console" title="zh-cn/DOM/console#Using_groups_in_the_console">在控制台中使用分组</a>,了解更多详细内容.</p> +<h2 id="Specification" name="Specification">规范</h2> +<p>不属于任何公开的规范</p> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>4.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="相关链接">相关链接</h2> +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> +<p>{{ languages( {"en": "en/DOM/console.group" } ) }}</p> diff --git a/files/zh-cn/web/api/console/groupcollapsed/index.html b/files/zh-cn/web/api/console/groupcollapsed/index.html new file mode 100644 index 0000000000..ee1a798f2a --- /dev/null +++ b/files/zh-cn/web/api/console/groupcollapsed/index.html @@ -0,0 +1,70 @@ +--- +title: console.groupCollapsed +slug: Web/API/Console/groupCollapsed +translation_of: Web/API/Console/groupCollapsed +--- +<p>{{ ApiRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>在 <a class="new " href="../Tools/Web_Console" rel="internal" title="Web Console">Web控制台</a>上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用<code><a class="new" href="../../Article_not_found?uri=zh-cn/DOM/console.groupEnd" rel="internal">console.groupEnd()</a></code> 之后,当前分组结束.和 {{ domxref("console.group()") }}方法的不同点是,新建的分组默认是折叠的.用户必须点击一个按钮才能将折叠的内容打开.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="eval">console.groupCollapsed(); +</pre> +<h2 id="参数">参数</h2> +<p>无</p> +<h2 id="备注">备注</h2> +<p>在文档{{ domxref("console") }}中查看<a href="/zh-cn/DOM/console#Using_groups_in_the_console" title="zh-cn/DOM/console#Using_groups_in_the_console">在控制台中使用分组</a>,了解更多详细内容.</p> +<h2 id="Specification" name="Specification">规范</h2> +<p>不属于任何公开的规范</p> +<h2 id="浏览器">浏览器</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>6</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>5.1</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko_备注">Gecko 备注</h3> +<p>从Gecko 9.0 {{ geckoRelease("9.0") }}开始,Firefox自带的web控制台开始支持该方法, 但是该方法新建的分组不是折叠的,也就是说该方法的功能等同于 {{ domxref("console.group()") }}.</p> +<h2 id="相关链接">相关链接</h2> +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/console.groupCollapsed" } ) }}</p> diff --git a/files/zh-cn/web/api/console/groupend/index.html b/files/zh-cn/web/api/console/groupend/index.html new file mode 100644 index 0000000000..a90ae09cf3 --- /dev/null +++ b/files/zh-cn/web/api/console/groupend/index.html @@ -0,0 +1,118 @@ +--- +title: Console.groupEnd() +slug: Web/API/Console/groupEnd +translation_of: Web/API/Console/groupEnd +--- +<p>{{APIRef("Console API")}}</p> + +<p>在 <a href="/en-US/docs/Tools/Web_Console">Web控制台</a>中退出一格缩进(结束分组). 请参阅 {{domxref("console")}} 中的<a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> 来获取它的用法和示例.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.groupEnd(); +</pre> + +<h2 id="参数">参数</h2> + +<p>None.</p> + +<h2 id="Specifications">Specifications</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", "#groupend", "console.groupEnd()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0<sup>[1]</sup></td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented in <a href="http://trac.webkit.org/changeset/35421">http://trac.webkit.org/changeset/35421</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> 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<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> diff --git a/files/zh-cn/web/api/console/info/index.html b/files/zh-cn/web/api/console/info/index.html new file mode 100644 index 0000000000..0b946b9719 --- /dev/null +++ b/files/zh-cn/web/api/console/info/index.html @@ -0,0 +1,155 @@ +--- +title: Console.info() +slug: Web/API/Console/info +translation_of: Web/API/Console/info +--- +<div>{{APIRef("Console API")}}</div> + +<p>向web控制台输出一个通知信息。仅在Firefox,web控制台的日志中的项目旁边会显示一个小的‘I‘图标</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>要输出的JavaScript对象列表。对象obj1,obj2,...列出顺序和输出顺序一致。</dd> + <dt><code>msg</code></dt> + <dd>JavaScript字符串。可包含零个或多个替换字符串。</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> +</dl> + +<p> 用于替换msg内的替换字符串的JavaScript对象。 可以对输出的格式进行额外的控制。</p> + +<p>查看更多细节可访问 {{domxref("console")}} 文件内的<a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting t</a><a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">ext to the console</a></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#info", "console.info()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>初次定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>替换字符串</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>信息标志</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>在 Web Worker 中可用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>替换字符串</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>在 Web Worker 中可用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/log/index.html b/files/zh-cn/web/api/console/log/index.html new file mode 100644 index 0000000000..5650dfe8bd --- /dev/null +++ b/files/zh-cn/web/api/console/log/index.html @@ -0,0 +1,124 @@ +--- +title: console.log +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>向 Web 控制台输出一条消息。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval notranslate">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN]</em>); +console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN]</em>); +console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj) +console.log(`temp的值为: ${temp}`) +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>一个用于输出的 JavaScript 对象列表。其中每个对象会以字符串的形式按照顺序依次输出到控制台。</dd> + <dt><code>msg</code></dt> + <dd>一个JavaScript字符串,其中包含零个或多个替代字符串。</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>JavaScript 对象,用来依次替换<code>msg</code>中的替代字符串。你可以在替代字符串中指定对象的输出格式。</dd> +</dl> + +<p>查看<a href="/zh-CN/docs/Web/API/Console#Outputting_text_to_the_console" title="zh-cn/DOM/console#Outputting_text_to_the_console">向控制台输出文本</a>来了解更多{{ domxref("console") }}对象的用法。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本功能</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>替代字符串</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatChrome(28)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>10<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本功能</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>替代字符串</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>不属于任何公开的规范</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li> + <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li> +</ul> + +<p>{{ languages( {"en": "en/DOM/console.log" } ) }}</p> diff --git a/files/zh-cn/web/api/console/profile/index.html b/files/zh-cn/web/api/console/profile/index.html new file mode 100644 index 0000000000..fc611fe671 --- /dev/null +++ b/files/zh-cn/web/api/console/profile/index.html @@ -0,0 +1,114 @@ +--- +title: Console.profile() +slug: Web/API/Console/profile +tags: + - API + - DOM + - Web开发 + - web控制台 + - 参考 + - 描述信息 + - 方法 + - 调试 + - 非标准 +translation_of: Web/API/Console/profile +--- +<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> + +<p>开始记录性能描述信息(例如, <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>)。</p> + +<p>你可以选择提供一个参数来命名描述信息,这将允许你在有多个描述信息被记录时来选择只停止那个描述信息(被你命名的那个)。请查阅{{domxref("Console.profileEnd()")}}来确认这个参数是如何被解释的。</p> + +<p>要停止记录,请调用{{domxref("Console.profileEnd()")}}。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.profile(<em>profileName</em>); +</pre> + +<h2 id="Parameters">Parameters</h2> + +<dl> + <dt><code>profileName</code></dt> + <dd>描述信息的名字。可选。</dd> +</dl> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatChrome("53.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>实际可用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>实际可用</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Console.profileEnd()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/console/profileend/index.html b/files/zh-cn/web/api/console/profileend/index.html new file mode 100644 index 0000000000..6e1bb6ece9 --- /dev/null +++ b/files/zh-cn/web/api/console/profileend/index.html @@ -0,0 +1,46 @@ +--- +title: Console.profileEnd() +slug: Web/API/Console/profileEnd +translation_of: Web/API/Console/profileEnd +--- +<p>{{APIRef("Console API")}}{{Non-standard_header}}</p> + +<div class="warning"> +<p>在 console.profile() 之后立刻调用此API可能会导致其无法工作.。为解决此问题,请在setTimeOut中至少延迟5毫秒后再调用。 请看 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>。</p> +</div> + +<p>profileEnd方法会停止记录之前已经由{{domxref("Console.profile()")}}开始记录的性能描述信息</p> + +<p>你可以选择提供一个参数来命名需要记录的描述信息。这使得你在记录多个描述信息的时候可以停止记录特定的描述信息。</p> + +<ul> + <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">如果 </span></font>Console.profileEnd()</code> 传了描述信息名字,并且它与正在记录的描述信息的名字相匹配,则此描述信息将会停止。</li> + <li><code><font face="Open Sans, arial, x-locale-body, sans-serif">如果 </font>Console.profileEnd()</code> 传了描述信息名字,并且它与正在记录的描述信息的名字不匹配,则不会进行更改。</li> + <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">如果 </span></font>Console.profileEnd()</code> 没有传描述信息名字,最近启动记录的描述信息将会停止。</li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.profileEnd(<em>profileName</em>); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>profileName</code></dt> + <dd>描述信息的名字。可选。</dd> +</dl> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Console.profileEnd")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Console.profile()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/console/table/index.html b/files/zh-cn/web/api/console/table/index.html new file mode 100644 index 0000000000..85d5ba2822 --- /dev/null +++ b/files/zh-cn/web/api/console/table/index.html @@ -0,0 +1,151 @@ +--- +title: Console.table() +slug: Web/API/Console/table +tags: + - API + - Web 开发 + - 控制台 + - 方法 + - 调试 +translation_of: Web/API/Console/table +--- +<div>{{APIRef("Console API")}}</div> + +<p>将数据以表格的形式显示。</p> + +<p>这个方法需要一个必须参数 <code>data</code>,<code>data</code> 必须是一个数组或者是一个对象;还可以使用一个可选参数 <code>columns</code>。</p> + +<p>它会把数据 <code>data</code> 以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。</p> + +<p>表格的第一列是 <code>index</code>。如果数据 <code>data</code> 是一个数组,那么这一列的单元格的值就是数组的索引。 如果数据是一个对象,那么它们的值就是各对象的属性名称。 注意(在 FireFox 中)<code>console.table</code> 被限制为只显示1000行(第一行是被标记的索引(原文:labeled index))。</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="打印单一参数类型">打印单一参数类型</h3> + +<p>数据的参数类型可以是数组或是对象。</p> + +<pre class="brush: js">// 打印一个由字符串组成的数组 + +console.table(["apples", "oranges", "bananas"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p> + +<pre class="brush: js">// 打印一个属性值是字符串的对象 + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var me = new Person("John", "Smith"); + +console.table(me);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p> + +<h3 id="打印复合的参数类型">打印复合的参数类型</h3> + +<p>如果需要打印的元素在一个数组中,或者需要打印的属性在一个对象,并且他们本身就是一个数组或者对象,则将会把这个元素显示在同一行,每个元素占一列:</p> + +<pre class="brush: js">// 二元数组的打印 + +var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +console.table(people);</pre> + +<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p> + +<pre class="brush: js">// 打印一个包含对象的数组 + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily]);</pre> + +<p>请注意,如果数组包含对象,则列将使用属性名称进行标记。</p> + +<p>结果显示,如果数组中包含该对象,打印出来的列标签将是该对象的属性名</p> + +<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p> + +<pre class="brush: js">// 打印属性名是对象的对象 + +var family = {}; + +family.mother = new Person("Jane", "Smith"); +family.father = new Person("John", "Smith"); +family.daughter = new Person("Emily", "Smith"); + +console.table(family);</pre> + +<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p> + +<h3 id="选择要隐藏的列">选择要隐藏的列</h3> + +<p><code>console.table()</code> 会把所有元素罗列在每一列,你可以使用 <code>columns</code> 参数选择要显示的列的子集:</p> + +<pre class="brush: js">// 一个对象数组,只打印 firstName + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily], ["firstName"]);</pre> + +<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p> + +<h3 id="按列重新排序">按列重新排序</h3> + +<p>你可以点击每列的顶部标签来重排输出的表格。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns</em>]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>data</code></dt> + <dd>要显示的数据。必须是数组或对象。</dd> + <dt><code>columns</code></dt> + <dd>一个包含列的名称的数组。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.Console.table")}}</p> +</div> diff --git a/files/zh-cn/web/api/console/time/index.html b/files/zh-cn/web/api/console/time/index.html new file mode 100644 index 0000000000..0bb67dc2c9 --- /dev/null +++ b/files/zh-cn/web/api/console/time/index.html @@ -0,0 +1,55 @@ +--- +title: console.time +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +<p>{{ ApiRef() }}</p> + +<p>你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 {{ domxref("console.timeEnd()") }} 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。</p> + +<p>关于 <a href="/en/DOM/console#Timers" title="en/DOM/console#Timers">Timers</a> 的细节和例子请参考文档 {{ domxref("console") }} 。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">console.time(<em>timerName</em>); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>timerName</code></dt> + <dd>新计时器的名字。 用来标记这个计时器,作为参数调用 {{ domxref("console.timeEnd()") }}可以停止计时并将经过的时间在终端中打印出来.</dd> +</dl> + +<h2 id="Specification" name="Specification">规范</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", "#time", "console.time()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Console.time")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("Console.timeEnd()")}}</li> + <li>{{domxref("Console.timeLog()")}}</li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/timeend/index.html b/files/zh-cn/web/api/console/timeend/index.html new file mode 100644 index 0000000000..57a38b8079 --- /dev/null +++ b/files/zh-cn/web/api/console/timeend/index.html @@ -0,0 +1,61 @@ +--- +title: Console.timeEnd() +slug: Web/API/Console/timeEnd +translation_of: Web/API/Console/timeEnd +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<h2 id="概述">概述</h2> + +<p>停止一个通过 <code>console.time()</code> 启动的计时器</p> + +<div class="note"> +<p>注意:该方法在使用时不会将输出的时间返回到js,它只能用于控制台调试.请勿将该方法作为普通计时器或性能数据收集器的一部分.</p> +</div> + +<p>有关详细信息和示例,请参阅 <a href="/en-US/docs/Web/API/console#Timers">Timers</a></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">console.timeEnd(<em>label</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>label</code></dt> + <dd>需要停止的计时器名字。一旦停止,计时器所经过的时间会被自动输出到控制台。</dd> +</dl> + +<h2 id="Specifications">Specifications</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", "#consoletimeendlabel", "console.timeEnd()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("api.Console.timeEnd")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/timelog/index.html b/files/zh-cn/web/api/console/timelog/index.html new file mode 100644 index 0000000000..9dc87c6071 --- /dev/null +++ b/files/zh-cn/web/api/console/timelog/index.html @@ -0,0 +1,102 @@ +--- +title: Console.timeLog() +slug: Web/API/Console/timeLog +tags: + - API + - DOM + - Debugging + - Method + - Web Development + - console + - web console +translation_of: Web/API/Console/timeLog +--- +<div>{{APIRef("Console API")}}</div> + +<div>在控制台输出计时器的值,该计时器必须已经通过 {{domxref("console.time()")}} 启动。</div> + +<div></div> + +<p>参阅文档中的 <a href="/en-US/docs/Web/API/console#Timers">Timers</a> 部分获取详细说明和示例。 </p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.timeLog(<em>label</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>label</code></dt> + <dd>计时器索引。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>如果没有传入 label 参数,则以 default: 作为引导返回数据:</p> + +<pre>default: 1042ms</pre> + +<p>如果传入了一个已经存在的 <code>label</code> ,则会以 <code>label: </code> 作为引导返回数据:</p> + +<pre>label: 1242ms</pre> + +<h3 id="异常">异常</h3> + +<p>如果计时器未启动, <code>timeLog()</code> 会返回一个警告:</p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “default” doesn’t exist.</span></span></span></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">如果传入的 label 索引没有与之对应的计时器,则返回如下警告:</span></span></span></p> + +<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “timer name” doesn’t exist.</span></span></span> </pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">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 和第二个 alert 框的时间间隔:</p> + +<p><a href="https://mdn.mozillademos.org/files/16741/timer_output.png"><img alt="" src="https://mdn.mozillademos.org/files/16741/timer_output.png" style="height: 354px; width: 537px;"></a></p> + +<p>注意:使用 <code>timelog()</code> 输出计时器的值会显示计时器名称。使用 <code>timeEnd()</code> 停止也会显示计时器名称和输出计时器的值,并且,最后的 " - timer ended" 可以清楚的显示计时器不再计时的信息。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.Console.timeLog")}}</p> +</div> + +<h2 id="相关文档">相关文档</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/timestamp/index.html b/files/zh-cn/web/api/console/timestamp/index.html new file mode 100644 index 0000000000..ed92f19a27 --- /dev/null +++ b/files/zh-cn/web/api/console/timestamp/index.html @@ -0,0 +1,98 @@ +--- +title: Console.timeStamp() +slug: Web/API/Console/timeStamp +translation_of: Web/API/Console/timeStamp +--- +<div>{{APIRef("Console API")}}{{Non-standard_header}}</div> + +<p>向浏览器的 <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> 或者 <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> 工具添加一个标记。这样可以让你将代码中的一个点和其他在时间轴上已记录的事件相关联,例如布局事件和绘制事件等。</p> + +<p>你可以选择用一个参数来作为时间戳标签,然后标记旁边就会显示这个标签。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">console.timeStamp(label); +</pre> + +<h2 id="Parameters">Parameters</h2> + +<dl> + <dt><code>label</code></dt> + <dd>Label for the timestamp. Optional.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop">{{CompatUnknown}} +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Console.time()")}}</li> + <li>{{domxref("Console.timeEnd()")}}</li> + <li><a href="/en-US/docs/Tools/Performance/Waterfall#Timestamp_markers">Adding timestamps to the Waterfall</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/trace/index.html b/files/zh-cn/web/api/console/trace/index.html new file mode 100644 index 0000000000..682eba535e --- /dev/null +++ b/files/zh-cn/web/api/console/trace/index.html @@ -0,0 +1,70 @@ +--- +title: console.trace +slug: Web/API/Console/trace +translation_of: Web/API/Console/trace +--- +<p>{{APIRef("Console API")}}</p> + +<p>{{domxref("console")}} 的 <strong><code>trace()</code> 方法</strong>向 <a href="/zh-cn/Tools/Web_Console" title="Web Console">Web控制台</a> 输出一个堆栈跟踪。</p> + +<p>{{AvailableInWorkers}}</p> + +<p>在页面{{ domxref("console") }}文档中查看<a href="/zh-CN/docs/Web/API/console#堆栈跟踪" title="zh-cn/DOM/console#Stack_traces">堆栈跟踪</a>的详细介绍和示例。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="notranslate">console.trace( [...<var>any</var>, ...<var>data</var> ]);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>...<var>any</var>, ...<var>data</var></code> {{optional_inline}}</dt> + <dd>Zero or more objects to be output to console along with the trace. These are assembled and formatted the same way they would be if passed to the {{domxref("console.log()")}} method.</dd> +</dl> + +<h2 id="Syntax" name="Syntax">Example</h2> + +<pre class="notranslate">function foo() { + function bar() { + console.trace(); + } + bar(); +} + +foo(); +</pre> + +<p>In the console, the following trace will be displayed:</p> + +<pre class="notranslate">bar +foo +<anonymous></pre> + +<h2 id="Specification" name="Specification">规范</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", "#trace", "console.trace()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Console.trace")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> +</ul> diff --git a/files/zh-cn/web/api/console/warn/index.html b/files/zh-cn/web/api/console/warn/index.html new file mode 100644 index 0000000000..c3ba21b2b0 --- /dev/null +++ b/files/zh-cn/web/api/console/warn/index.html @@ -0,0 +1,147 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +translation_of: Web/API/Console/warn +--- +<div>{{APIRef("Console API")}}</div> + +<p>向 Web 控制台输出一条警告信息。</p> + +<p>{{AvailableInWorkers}}</p> + +<p>{{Note("在火狐浏览器里,警告会有一个小感叹号图标在 Web 控制台信息前面。")}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>obj1</code> ... <code>objN</code></dt> + <dd>要输出的 Javascript 对象列表。其中每个对象会以字符串的形式按照顺序依次输出到控制台。</dd> + <dt><code>msg</code></dt> + <dd>一个 JavaScript 字符串,其中包含零个或多个替代字符串。</dd> + <dt><code>subst1</code> ... <code>substN</code></dt> + <dd>零个或多个 Javascript 对象 依次替换 msg 中的替代字符串,你可以在替代字符串中指定对象的输出格式。</dd> +</dl> + +<p>查看 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Console">向控制台输出文本</a> 来了解更多 {{domxref("console")}} 的用法。</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", "#warn", "console.warn()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Substitution strings</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly 文档:控制台</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN:使用 F12 工具控制台来查看错误和状态</a></li> +</ul> |