在控制台中记录消息

Kayce Basques

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

本教程旨在按顺序完成。它假定您了解 Web 开发的基础知识，例如如何使用 JavaScript 为网页添加互动性。

设置演示和开发者工具

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

1. 打开演示。

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

   

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

   

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

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

   开发者工具在单独的窗口中取消停靠：

查看从 JavaScript 记录的消息

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

1. 点击演示中的 Log Info 按钮。Hello, Console! 会记录到控制台。

   

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

   

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

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

   • 点击控制台 标签页。
   • 按 Control+[ 或 Command+[ (Mac)，直到 控制台 处于焦点状态。
   • 打开命令菜单，开始输入 Console，选择 Show Console Panel 命令， 然后按 Enter。

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

   

   格式如此的消息是警告。

5. 可选：点击 log.js:12 以查看导致消息格式如此的代码，然后在完成后返回到控制台 。每当您想查看导致消息以某种方式记录的代码时，都可以执行此操作。

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

   

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

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

   

8. 点击 Log Table 。系统会向控制台记录一个关于著名艺术家的表格。

   

   请注意，birthday 列仅填充了一行。查看代码以了解原因。

9. 点击 Log Group 。4 只著名的打击犯罪的海龟的名字会分组在 Adolescent Irradiated Espionage Tortoises 标签下。

   

10. 点击 Log Custom 。系统会向控制台记录一条带有红色边框和蓝色背景的消息。

    

这里的主要想法是，当您想从 JavaScript 向控制台 记录消息时，可以使用 console 方法之一。每种方法都会以不同的方式设置消息格式。

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

查看浏览器记录的消息

浏览器也会向控制台记录消息。如果网页存在问题，通常会出现这种情况。

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

   

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

   

3. 点击 Log Levels 下拉菜单，然后启用 Verbose 选项（如果已停用）。您将在下一部分中详细了解过滤。您需要执行此操作，以确保您记录的下一条消息可见。注意 ：如果“默认级别”下拉菜单已停用，您可能需要关闭控制台边栏。如需详细了解控制台边栏，请参阅下文的按消息来源过滤。

   

4. 点击 Cause Violation 。网页在几秒钟内变得无响应，然后浏览器 向控制台记录消息 [Violation] 'click' handler took 3000ms。确切时长可能会有所不同。

   

过滤消息

在某些网页上，您会看到控制台 中充斥着消息。开发者工具提供了许多不同的方法来过滤掉与当前任务无关的消息。

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

按日志级别过滤

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

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

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

1. 点击 Log Levels 下拉菜单，然后停用 Errors 。如果某个级别旁边不再有对勾标记，则表示该级别已停用。Error 级消息会消失。

   

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

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

按文本过滤

如果您只想查看包含确切字符串的消息，请在 Filter 框中输入该字符串。

1. 在 Filter 框中输入 Dave。所有不包含字符串 Dave 的消息都会被隐藏。

   

2. 从 Filter 框中删除 Dave。所有消息都会重新出现。

按正则表达式过滤

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

1. 在 Filter 框中输入 /^[AH]/。将此模式输入到 RegExr 中，以了解其具体作用。

   

2. 从 Filter 框中删除 /^[AH]/。所有消息都会再次显示。

按消息来源过滤

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

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

1. 点击 Show Console Sidebar 。

   

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

   

按用户消息过滤

之前，当您点击 Log Info 时，系统会调用脚本 console.log('Hello, Console!')，以便 将消息记录到控制台。像这样从 JavaScript 记录的消息称为用户消息 。相比之下，当您点击 Cause 404 时，浏览器会记录一条 Error-级消息 指出找不到请求的资源。此类消息被视为浏览器消息 。您可以使用边栏 过滤掉浏览器消息，仅显示用户消息。

1. 点击 9 User Messages 。浏览器消息会被隐藏。

   

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

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

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

1. 点击 Elements 标签页。

2. 按 Escape。抽屉式面板 的控制台 标签页会打开。它具有您在本教程中一直使用的控制台 的所有功能。

   

后续步骤

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

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