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..e30fa14cdf4 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 @@ -1,24 +1,21 @@ -project_path: /web/tools/_project.yaml -book_path: /web/tools/_book.yaml -description:控制台日志是一种可以检查您的页面或应用所进行操作的强大方式。我们将先了解 console.log()，然后再探索其他高级用途。 +project_path: /web/tools/_project.yaml book_path: /web/tools/_book.yaml description: 控制台记录功能强大，可以检查您的页面或应用的功能。我们从 console.log() 开始并探索其他高级用法。robots: noindex -{# wf_updated_on: 2018-04-06 #} -{# wf_published_on: 2015-04-13 #} +{# wf_updated_on: 2019-03-28 #} {# wf_published_on: 2015-04-13 #} {# wf_blink_components: Platform>DevTools #} # 诊断并记录到控制台中 {: .page-title } -{% include "web/_shared/contributors/pbakaus.html" %} -{% include "web/_shared/contributors/megginkearney.html" %} -{% include "web/_shared/contributors/flaviocopes.html" %} -控制台日志是一种可以检查您的页面或应用所进行操作的强大方式。我们将先了解 console.log()，然后再探索其他高级用途。 +{% include "web/_shared/contributors/pbakaus.html" %} {% include "web/_shared/contributors/megginkearney.html" %} {% 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,18 +23,17 @@ 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) +将在控制台中输出以下内容： ![Log Multiple](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-log-multiple.png?raw=true) ## 自动填充命令 {:#autocomplete} 在控制台中键入内容时，控制台将自动显示与您已键入文字匹配的相关方法的自动填充下拉菜单。其中包括您已经执行的前几个命令。 -![自动填充的示例](images/autocomplete.png) +![example of autocomplete](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/autocomplete.png?raw=true) ## 组织控制台输出 {:#organizing} @@ -49,19 +45,18 @@ 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) +示例输出： ![Simple console group output](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-group.png?raw=true) #### 嵌套组 @@ -69,42 +64,40 @@ 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) +下面是控制台中的嵌套组输出： ![Simple console group output](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-nestedgroup.png?raw=true) #### 自动折叠组 大量使用组时，即时查看所有信息可能不是非常有用。这些情况下，您可以通过调用 [`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) +groupCollapsed() 输出： ![初始处于折叠状态的组](https://github.com/google/WebFundamentals/blob/master/src/content/zh-cn/tools/chrome-devtools/console/images/console-write-groupcollapsed.png?raw=true) ## 错误和警告 @@ -114,30 +107,30 @@ 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(); +``` 转变为 -![错误示例输出](images/console-write-error-server-not-resp.png) +![Error example output](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-error-server-not-resp.png?raw=true) ### console.warn() [`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); +} +``` 转变为 -![警告示例](images/console-write-warning-too-few-nodes.png) +![Warn example](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-warning-too-few-nodes.png?raw=true) ## 断言 @@ -147,12 +140,11 @@ 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) +断言失败在控制台中的显示方式： ![断言失败](https://github.com/google/WebFundamentals/blob/master/src/content/zh-cn/tools/chrome-devtools/console/images/console-write-assert-failed.png?raw=true) ## 字符串替代和格式设置 @@ -160,52 +152,51 @@ 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) +上一个代码示例的输出： ![示例替代输出](https://github.com/google/WebFundamentals/blob/master/src/content/zh-cn/tools/chrome-devtools/console/images/console-write-log-multiple.png?raw=true) ### 使用 CSS 设置控制台输出的样式 利用 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"); +``` ..将您的日志输出设置为蓝色的大字体： -![设置了格式的字符串](images/console-write-format-string.png) +![Formatted string](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/console-write-format-string.png?raw=true) ### 将 DOM 元素格式化为 JavaScript 对象 -默认情况下，DOM 元素将以其 HTML 的表示的形式记录到控制台中，不过有时，您希望以 JavaScript 对象的形式访问 DOM 元素并检查其属性。为此，您可以使用 `%O` 字符串说明符（参见上文），也可以使用 `console.dir` 达到同样的效果： - -![使用 dir() 记录元素](images/dir-element.png) - +默认情况下，DOM 元素将以其 HTML 的表示的形式记录到控制台中，不过有时，您希望以 JavaScript 对象的形式访问 DOM 元素并检查其属性。为此，您可以使用 `%O` 字符串说明符（参见上文），也可以使用 `console.dir` 达到同样的效果： +![Logging an element using dir()](https://github.com/google/WebFundamentals/blob/master/src/content/en/tools/chrome-devtools/console/images/dir-element.png?raw=true) +## 反馈 {: #feedback } -{# wf_devsite_translation #} +{% include "web/_shared/helpful.html" %}