diff --git a/src/content/zh-cn/tools/chrome-devtools/console/console-write.md b/src/content/zh-cn/tools/chrome-devtools/console/console-write.md index d333c1f1736..f3a58b81f1c 100644 --- a/src/content/zh-cn/tools/chrome-devtools/console/console-write.md +++ b/src/content/zh-cn/tools/chrome-devtools/console/console-write.md @@ -2,8 +2,9 @@ project_path: /web/tools/_project.yaml book_path: /web/tools/_book.yaml description:控制台日志是一种可以检查您的页面或应用所进行操作的强大方式。我们将先了解 console.log()，然后再探索其他高级用途。 -{# wf_updated_on: 2018-04-06 #} +{# wf_updated_on: 2018-07-27 #} {# wf_published_on: 2015-04-13 #} +{# wf_blink_components: Platform>DevTools #} # 诊断并记录到控制台中 {: .page-title } @@ -12,13 +13,12 @@ description:控制台日志是一种可以检查您的页面或应用所进行 {% include "web/_shared/contributors/flaviocopes.html" %} 控制台日志是一种可以检查您的页面或应用所进行操作的强大方式。我们将先了解 console.log()，然后再探索其他高级用途。 - ### TL;DR {: .hide-from-toc } -- 使用 console.log() 进行基本记录 -- 使用 console.error() 和 console.warn() 显示引入注目的消息 -- 使用 console.group() 和 console.groupEnd() 对相关消息进行分组，避免混乱 -- 使用 console.assert() 显示条件性错误消息 +- 使用 console.log() 进行基本记录 +- 使用 console.error() 和 console.warn() 显示引入注目的消息 +- 使用 console.group() 和 console.groupEnd() 对相关消息进行分组，避免混乱 +- 使用 console.assert() 显示条件性错误消息 ## 写入控制台 @@ -26,9 +26,9 @@ description:控制台日志是一种可以检查您的页面或应用所进行在您的 JavaScript 中执行下面一行代码： - - console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now()); - +``` +console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now()); +``` 将在控制台中输出以下内容： ![记录多个](images/console-write-log-multiple.png) @@ -49,16 +49,16 @@ description:控制台日志是一种可以检查您的页面或应用所进行示例输入： - - var user = "jsmith", authenticated = false; - console.group("Authentication phase"); - console.log("Authenticating user '%s'", user); - // authentication code here... - if (!authenticated) { - console.log("User '%s' not authenticated.", user) - } - console.groupEnd(); - +``` +var user = "jsmith", authenticated = false; +console.group("Authentication phase"); +console.log("Authenticating user '%s'", user); +// authentication code here... +if (!authenticated) { + console.log("User '%s' not authenticated.", user) +} +console.groupEnd(); +``` 示例输出： ![简单的控制台组输出](images/console-write-group.png) @@ -69,24 +69,24 @@ description:控制台日志是一种可以检查您的页面或应用所进行下面的示例显示了登录流程身份验证阶段的日志组： - - var user = "jsmith", authenticated = true, authorized = true; - // Top-level group - console.group("Authenticating user '%s'", user); - if (authenticated) { - console.log("User '%s' was authenticated", user); - // Start nested group - console.group("Authorizing user '%s'", user); - if (authorized) { - console.log("User '%s' was authorized.", user); - } - // End nested group - console.groupEnd(); +``` +var user = "jsmith", authenticated = true, authorized = true; +// Top-level group +console.group("Authenticating user '%s'", user); +if (authenticated) { + console.log("User '%s' was authenticated", user); + // Start nested group + console.group("Authorizing user '%s'", user); + if (authorized) { + console.log("User '%s' was authorized.", user); } - // End top-level group + // End nested group console.groupEnd(); - console.log("A group-less log trace."); - +} +// End top-level group +console.groupEnd(); +console.log("A group-less log trace."); +``` 下面是控制台中的嵌套组输出： ![简单的控制台组输出](images/console-write-nestedgroup.png) @@ -95,13 +95,13 @@ description:控制台日志是一种可以检查您的页面或应用所进行大量使用组时，即时查看所有信息可能不是非常有用。这些情况下，您可以通过调用 [`console.groupCollapsed()`](./console-reference#consolegroupcollapsedobject-object-) 而不是 `console.group()` 的方式自动折叠组： - - console.groupCollapsed("Authenticating user '%s'", user); - if (authenticated) { - ... - } - console.groupEnd(); - +``` +console.groupCollapsed("Authenticating user '%s'", user); +if (authenticated) { + ... +} +console.groupEnd(); +``` groupCollapsed() 输出： ![初始处于折叠状态的组](images/console-write-groupcollapsed.png) @@ -114,12 +114,12 @@ groupCollapsed() 输出： [`console.error()`](./console-reference#consoleerrorobject--object-) 方法会显示红色图标和红色消息文本： - - function connectToServer() { - console.error("Error: %s (%i)", "Server is not responding",500); - } - connectToServer(); - +``` +function connectToServer() { + console.error("Error: %s (%i)", "Server is not responding",500); +} +connectToServer(); +``` 转变为 @@ -129,11 +129,11 @@ groupCollapsed() 输出： [`console.warn()`](./console-reference#consolewarnobject--object-) 方法会显示一个黄色警告图标和相应的消息文本： - - if(a.childNodes.length < 3 ) { - console.warn('Warning! Too few nodes (%d)', a.childNodes.length); - } - +``` +if(a.childNodes.length < 3 ) { + console.warn('Warning! Too few nodes (%d)', a.childNodes.length); +} +``` 转变为 @@ -147,9 +147,9 @@ groupCollapsed() 输出：下面的代码仅会在属于 `list` 元素的子节点数大于 500 时在控制台中显示一条错误消息。 - - console.assert(list.childNodes.length < 500, "Node count is > 500"); - +``` +console.assert(list.childNodes.length < 500, "Node count is > 500"); +``` 断言失败在控制台中的显示方式： ![断言失败](images/console-write-assert-failed.png) @@ -160,26 +160,28 @@ groupCollapsed() 输出：下面的示例使用字符串和数字格式说明符来将值插入到输出字符串中。您将在控制台中看到“Sam has 100 points”。 - console.log("%s has %d points", "Sam", 100); +``` +console.log("%s has %d points", "Sam", 100); +``` 格式说明符的完整列表为： -| 说明符 | 输出 | -|-----------|:----------------------------------------------------------------------------------| -| %s | 将值格式化为字符串 | -| %i 或 %d | 将值格式化为整型 | -| %f | 将值格式化为浮点值 | -| %o | 将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样 | -| %O | 将值格式化为可扩展 JavaScript 对象 | -| %c | 将 CSS 样式规则应用到第二个参数指定的输出字符串 | +说明符 | 输出 +--- | --- +%s | 将值格式化为字符串 +%i 或 %d | 将值格式化为整型 +%f | 将值格式化为浮点值 +%o | 将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样 +%O | 将值格式化为可扩展 JavaScript 对象 +%c | 将第二个参数提供的CSS 样式规则应用到输出字符串本示例使用数字说明符设置 `document.childNodes.length` 的值的格式。同时使用浮点说明符设置 `Date.now()` 的值的格式。代码： - - console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now()); - +``` +console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now()); +``` 上一个代码示例的输出： ![示例替代输出](images/console-write-log-multiple.png) @@ -188,12 +190,11 @@ groupCollapsed() 输出：利用 CSS 格式说明符，您可以自定义控制台中的显示。使用说明符启动字符串，并设置为您希望的样式，作为第二个参数。 - 尝试使用下面的代码： - - console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); - +``` +console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); +``` ..将您的日志输出设置为蓝色的大字体： @@ -201,11 +202,10 @@ groupCollapsed() 输出： ### 将 DOM 元素格式化为 JavaScript 对象 -默认情况下，DOM 元素将以其 HTML 的表示的形式记录到控制台中，不过有时，您希望以 JavaScript 对象的形式访问 DOM 元素并检查其属性。为此，您可以使用 `%O` 字符串说明符（参见上文），也可以使用 `console.dir` 达到同样的效果： +默认情况下，DOM 元素将以其 HTML 的表示的形式记录到控制台中，不过有时，您希望以 JavaScript 对象的形式访问 DOM 元素并检查其属性。为此，您可以使用 `%O` 字符串说明符（参见上文），也可以使用 `console.dir` 达到同样的效果： ![使用 dir() 记录元素](images/dir-element.png) +## 反馈 {: #feedback } - - -{# wf_devsite_translation #} +{% include "web/_shared/helpful.html" %}