在控制台中记录消息

Kayce Basques

本互动教程介绍了如何在 Chrome 开发者工具控制台中记录和过滤消息。

本教程应按顺序完成。本文档假定您了解 Web 开发的基础知识，例如如何使用 JavaScript 为页面添加交互功能。

设置演示版和开发者工具

本教程旨在让您打开演示并自行尝试所有工作流。当您实际跟随操作时，以后更有可能记住工作流。

1. 打开演示。

2. 可选：将演示移至单独的窗口。在此示例中，教程位于左侧，演示位于右侧。

   

3. 聚焦演示，然后按 Ctrl + Shift + J 或 Command + Option + J (Mac) 打开开发者工具。默认情况下，DevTools 会在演示的右侧打开。

   

4. 可选：将开发者工具固定到窗口底部，或取消停靠至单独的窗口。

   开发者工具停靠在演示模式的底部：

   开发者工具已从一个单独的窗口中取消停靠：

查看从 JavaScript 记录的消息

您在控制台中看到的大多数消息均来自编写相应网页的 JavaScript 的网页开发者。本部分旨在向您介绍您可能会在控制台中看到的不同消息类型，并说明如何从您自己的 JavaScript 中自行记录每种消息类型。

1. 点击演示中的日志信息按钮。系统会将 Hello, Console! 记录到控制台中。

   

2. 在控制台的 Hello, Console! 消息旁边，点击 log.js:2。Sources 面板随即会打开，并突出显示导致消息记录到控制台的代码行。

   

   当网页的 JavaScript 调用 console.log('Hello, Console!') 时，系统会记录此消息。

3. 使用以下任一工作流程返回控制台：

   • 点击控制台标签页。
   • 按 Ctrl+[ 或 Command+[ (Mac)，直到 Console 获得焦点。
   • 打开命令菜单，开始输入 Console，选择显示控制台面板命令，然后按 Enter 键。

4. 点击演示中的 Log Warning 按钮。Abandon Hope All Ye Who Enter 会记录到控制台中。

   

   采用这种格式的消息均为警告。

5. 可选：点击 log.js:12 以查看导致消息变为此类格式的代码，然后在完成后导航回控制台。如果您想要查看导致消息以某种方式记录的代码，请执行此操作。

6. 点击 Abandon Hope All Ye Who Enter 前面的 Expand 图标。开发者工具会显示导致调用的堆栈轨迹。

   

   堆栈轨迹会告诉您调用了一个名为 logWarning 的函数，而该函数又调用了一个名为 quoteDante 的函数。换言之，最先发生的调用位于堆栈轨迹的底部。您可以通过调用 console.trace() 随时记录堆栈轨迹。

7. 点击记录错误。系统会记录以下错误消息： I'm sorry, Dave. I'm afraid I can't do that.

   

8. 点击 Log Table。控制台中会记录一个关于著名音乐人的表格。

   

   请注意如何仅针对一行填充 birthday 列。请查看代码了解原因。

9. 点击日志组。4 名著名的斗罪海龟的名字被分组到 Adolescent Irradiated Espionage Tortoises 标签下。

   

10. 点击 Log Custom（记录自定义）。控制台中会记录一条带有红色边框和蓝色背景的消息。

    

这里的主要思路是，如果您想将消息从 JavaScript 记录到控制台，可以使用 console 方法之一。每种方法设置邮件的格式各不相同。

除了本部分介绍的方法，还有更多的方法。在本教程结束时，您将了解如何探索其余方法。

查看浏览器记录的消息

浏览器也会将消息记录到控制台。这种情况通常会在网页存在问题时发生。

1. 点击原因 404。浏览器会记录 404 网络错误，因为网页的 JavaScript 尝试提取不存在的文件。

   

2. 点击导致错误。浏览器会记录未捕获的 TypeError，因为 JavaScript 正在尝试更新不存在的 DOM 节点。

   

3. 点击 Log Levels（日志级别）下拉菜单，并启用 Verbose 选项（如果已停用）。您将在下一部分中详细了解过滤。这样做是为了确保您记录的下一条消息仍然可见。注意：如果“默认级别”下拉列表已停用，您可能需要关闭控制台边栏。如需详细了解控制台边栏，请在下方按消息来源过滤。

   

4. 点击违规原因。页面将无响应几秒钟，然后浏览器将消息 [Violation] 'click' handler took 3000ms 记录到控制台中。具体时长可能会有所不同。

   

过滤消息

在某些页面上，您会看到控制台显示大量消息。开发者工具提供了许多不同的方法来滤除与当前任务无关的消息。

要点：控制台只会过滤掉输出消息，您在控制台中输入的所有输入内容都会保留在该控制台中。

按日志级别过滤

每个 console.* 方法都分配有一个严重级别：Verbose、Info、Warning 或 Error。例如，console.log() 是 Info 级消息，而 console.error() 是 Error 级消息。

注意：如需查看 console.* 方法及其严重级别的完整列表，请参阅 Console API 参考文档。

如需按日志级别过滤，请执行以下操作：

1. 点击 Log Levels（日志级别）下拉菜单并停用 Errors（错误）。如果某个级别旁边不再有对勾标记，则该级别处于停用状态。Error 级消息会消失。

   

2. 再次点击 Log Levels（日志级别）下拉菜单，然后重新启用 Errors（错误）。Error 级消息会重新出现。

要点：控制台会始终记住您应用的下拉过滤条件。它在所有页面、页面、开发者工具和 Chrome 重新加载时都会保留。如需快速应用临时过滤条件，请使用边栏。

按文字过滤

如果您只想查看包含某个确切字符串的消息，请在过滤条件文本框中输入该字符串。

1. 在 Filter 文本框中输入 Dave。所有不包含字符串 Dave 的消息都会隐藏。您可能还会看到 Adolescent Irradiated Espionage Tortoises 标签。这确实是个错误。

   

2. 从 Filter 文本框中删除 Dave。所有邮件都会重新显示出来。

按正则表达式过滤

如果您想显示包含某种文本模式（而不是特定字符串）的所有消息，请使用正则表达式。

1. 在 Filter 文本框中输入 /^[AH]/。在 RegExr 中输入此模式，以获取其作用的说明。

   

2. 从 Filter 文本框中删除 /^[AH]/。系统会重新显示所有消息。

按消息来源过滤

如果您只想查看来自特定网址的邮件，请使用边栏。

要点：边栏过滤条件是临时的。控制台不会在所有页面中保留此类过滤器，也不会在页面、开发者工具和 Chrome 重新加载时保留此类过滤器。

1. 点击 Show Console Sidebar 图标 。

   

2. 点击 12 Messages 旁边的展开 图标。边栏显示了导致系统记录消息的网址列表。例如，log.js 导致了 11 条消息。

   

按用户消息过滤

之前，点击 Log Info（日志信息）后，一个名为 console.log('Hello, Console!') 的脚本用于将消息记录到控制台。通过此类 JavaScript 记录的消息称为用户消息。相反，当您点击原因 404 时，浏览器会记录一条 Error 级消息，指出找不到请求的资源。此类消息会被视为浏览器消息。您可以使用边栏过滤浏览器消息，仅显示用户消息。

1. 点击 9 用户消息。浏览器消息已隐藏。

   

2. 点击 12 消息可再次显示所有消息。

将控制台与任何其他面板一起使用

如果您正在修改样式，但需要快速检查控制台日志中是否存在某些内容，该怎么办？使用抽屉式导航栏。

1. 点击元素标签页。

2. 按 Esc。系统会打开 Drawer 的 Console 标签页。它具备您在整个教程中一直使用的控制台的所有功能。

   

后续步骤

恭喜，您已学完教程。点击 Dispense Trophy 即可领取您的奖杯。

• 如需了解与控制台界面相关的更多功能和工作流，请参阅控制台参考文档。
• 请参阅 Console API 参考文档，详细了解查看从 JavaScript 记录的消息部分中演示的所有 console 方法，并探索本教程中未介绍的其他 console 方法。
• 如需了解您还可以使用开发者工具执行哪些其他操作，请参阅使用入门。
• 请参阅在控制台中设置消息的格式和样式，详细了解所有 console 格式和样式设置方法。