控制台功能参考

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

本页是与 Chrome 开发者工具控制台相关的功能参考。本文假定您已经熟悉如何使用控制台查看记录的消息并运行 JavaScript。否则，请参阅使用入门。

如需查找 console.log() 等函数的 API 参考文档，请参阅 Console API 参考文档。如需参考 monitorEvents() 等函数，请参阅 Console Utilities API 参考文档。

打开控制台

您可以将控制台以面板或抽屉中的标签页的形式打开。

打开“控制台”面板

按 Control+Shift+J 或 Command+Option+J（Mac）。

控制台。

如需从命令菜单打开控制台，请开始输入 Console，然后运行旁边带有面板标志的显示控制台命令。

用于显示控制台面板的命令。

在抽屉式菜单中打开控制台

按 Escape 或点击 Customize And Control DevTools 自定义和控制 DevTools。，然后选择 Show Console Drawer。

显示控制台抽屉式导航栏。

抽屉式导航栏会在开发者工具窗口的底部弹出，并打开 Console 标签页。

抽屉式菜单中的“控制台”标签页。

如需从命令菜单打开“控制台”标签页，请开始输入 Console，然后运行旁边带有抽屉标记的显示控制台命令。

用于在抽屉式菜单中显示“控制台”标签页的命令。

打开控制台设置

点击 Console（控制台）右上角的 设置。 Console Settings（控制台设置）。

控制台设置。

以下链接对各项设置进行了说明：

点击显示控制台边栏图标 显示控制台边栏。 即可显示边栏，该边栏非常适合进行过滤。

控制台边栏。

查看消息

本部分介绍了用于更改控制台中消息显示方式的功能。如需查看实操演示，请参阅查看消息。

停用消息分组

打开 Play 管理中心设置，然后停用将类似消息分组，以停用 Play 管理中心的默认消息分组行为。如需查看示例，请参阅记录 XHR 和 Fetch 请求。

查看断点消息

控制台会按如下方式标记由断点触发的消息：

控制台会标记由条件断点和日志点创建的消息。

如需跳转到 Sources 面板中的内嵌断点编辑器，请点击断点消息旁边的锚链接。

查看堆栈轨迹

控制台会自动捕获错误和警告的堆栈轨迹。堆栈轨迹是导致错误或警告的函数调用（帧）的历史记录。控制台按相反顺序显示它们：最新帧位于顶部。

如需查看堆栈轨迹，请点击错误或警告旁边的 展开。 展开图标。

堆栈轨迹。

在堆栈轨迹中查看错误原因

控制台可以显示堆栈轨迹中的错误原因链（如果有）。

为了更轻松地进行调试，您可以在捕获和重新抛出错误时指定错误原因。控制台会沿原因链向上遍历，并会输出带有 Caused by: 前缀的每个错误堆栈，以便您找到原始错误。

堆栈轨迹中带有“Caused by:”前缀的一系列错误原因。

查看异步堆栈轨迹

如果您正在使用的框架支持或者在直接使用浏览器调度基元（例如 setTimeout）时，开发者工具可以通过将异步代码的两部分链接在一起来跟踪异步操作。

在本例中，堆栈轨迹会显示异步操作的“完整故事”。

异步堆栈轨迹。

在堆栈轨迹中显示已知的第三方帧

当源映射包含 ignoreList 字段时，默认情况下，控制台会从由捆绑器（例如 webpack）或框架（例如 Angular）生成的来源中隐藏堆栈轨迹中的第三方帧。

如需查看包含第三方帧的完整堆栈轨迹，请点击堆栈轨迹底部的展开 N 个帧。

再显示 N 个帧。

如需始终查看完整的堆栈轨迹，请停用 设置。 Settings（设置）> Ignore List（忽略列表）> Automatically add known third-party scripts to ignore list（自动将已知的第三方脚本添加到忽略列表）设置。

自动将已知的第三方脚本添加到忽略列表。

记录 XHR 和提取请求

打开控制台设置，然后启用 Log XMLHttpRequests，以便在发生所有 XMLHttpRequest 和 Fetch 请求时将其记录到控制台。

记录 XMLHttpRequest 和 Fetch 请求。

上述示例中的顶部消息显示了 Play 管理中心的默认分组行为。以下示例展示了在停用消息分组后，同一日志的显示方式。

取消分组后的已记录 XMLHttpRequest 和 Fetch 请求的外观。

在网页加载过程中保留消息

默认情况下，每当您加载新页面时，Play 管理中心都会清除。如需在页面加载期间保留消息，请打开控制台设置，然后启用保留日志复选框。

隐藏网络消息

默认情况下，浏览器会将网络消息记录到控制台。例如，以下示例中的顶部消息表示 404。

控制台中显示 404 消息。

如需隐藏网络消息，请执行以下操作：

  1. 打开“管理中心设置”。
  2. 选中隐藏网络复选框。

显示或隐藏 CORS 错误

如果网络请求因跨源资源共享 (CORS) 而失败，控制台可能会显示 CORS 错误。

如需显示或隐藏 CORS 错误，请执行以下操作：

  1. 打开控制台设置。
  2. 选中或取消选中在控制台中显示 CORS 错误复选框。

在控制台中显示 CORS 错误。

如果控制台已设置为显示 CORS 错误，并且您遇到了此类错误，可以点击错误旁边的以下按钮：

“网络”和“问题”按钮。

  • 位置，用于在网络面板中打开包含 CORS 相关 TypeError 的请求。
  • 问题。，在问题标签页上获取可能的解决方案。

过滤消息

您可以通过多种方式在控制台中滤除消息。

滤除浏览器消息

打开控制台边栏，然后点击用户消息，以便仅显示来自网页 JavaScript 的消息。

查看用户消息。

按日志级别过滤

开发者工具会指定 console.* 方法的大多数严重级别。

有四个级别：

  • Verbose
  • Info
  • Warning
  • Error

例如，console.log() 属于 Info 组，而 console.error() 属于 Error 组。Console API 参考文档介绍了每种适用方法的严重程度级别。

浏览器记录到控制台的每条消息也具有严重级别。您可以隐藏任何不感兴趣的消息。例如，如果您只对 Error 消息感兴趣，则可以隐藏其他 3 组消息。

点击 Log Levels（日志级别）下拉菜单，以启用或停用 Verbose、Info、Warning 或 Error 消息。

“Log Levels”（日志级别）下拉菜单。

您还可以按日志级别进行过滤，方法是 显示控制台边栏。 打开控制台边栏，然后点击错误、警告、信息或详细。

使用边栏查看警告。

按网址过滤消息

输入 url: 后跟网址，即可仅查看来自该网址的消息。输入 url: 后，DevTools 会显示所有相关网址。

网址过滤条件。

网域也适用。例如，如果 https://example.com/a.js 和 https://example.com/b.js 是日志记录消息，则您可以使用 url:https://example.com 来重点关注这 2 个脚本中的消息。

如需隐藏来自指定网址的所有消息，请输入 -url: 后跟网址，例如 https://b.wal.co。这是网址否定过滤条件。

排除的网址过滤器。DevTools 会隐藏与指定网址匹配的所有消息。

您还可以打开控制台边栏，展开用户消息部分，然后点击包含您要重点关注的消息的脚本的网址，以显示来自单个网址的消息。

查看特定脚本中的消息。

滤除来自不同上下文的消息

假设您的网页上有广告。广告嵌入在 <iframe> 中，并在您的 Play 管理中心内生成大量消息。由于此广告位于不同的 JavaScript 上下文中，因此要隐藏其消息，一种方法是打开控制台设置，然后选中仅限所选上下文复选框。

过滤掉不符合正则表达式格式的邮件

在过滤文本框中输入正则表达式（例如 /[foo]\s[bar]/），以滤除与该模式不匹配的所有消息。不支持空格，请改用 \s。DevTools 会检查消息文本或导致记录消息的脚本中是否存在该模式。

例如，以下过滤条件会滤除与 /[gm][ta][mi]/ 不匹配的所有消息。

过滤掉与 /[gm][ta][mi]/ 不匹配的所有消息。

如需在日志消息中搜索文本，请执行以下操作：

  1. 若要打开内置搜索栏，请按 Command+F (Mac) 或 Ctrl+F（Windows、Linux）。
  2. 在该栏中输入您的查询。在此示例中，查询为 legacy。输入查询。 您也可以：
    • 点击 匹配大小写。 匹配大小写以使查询区分大小写。
    • 点击 “正则表达式”按钮。 Use Regular Expression（使用正则表达式），以使用 RegEx 表达式进行搜索。
  3. 按 Enter 键。如需跳转到上一个或下一个搜索结果，请按向上或向下按钮。

运行 JavaScript

本部分包含与在控制台中运行 JavaScript 相关的功能。如需查看演示，请参阅运行 JavaScript。

字符串复制选项

控制台默认以有效的 JavaScript 字面量的形式输出字符串。右键点击输出，然后从以下三个复制选项中进行选择：

  • Copy as JavaScript 字面量。转义适当的特殊字符，并根据内容将字符串括在单引号、双引号或反引号中。
  • 复制字符串内容。将原始字符串（包括换行符和其他特殊字符）复制到剪贴板。
  • 复制为 JSON 字面量。将字符串格式化为有效的 JSON。

复制选项。

从历史记录重新运行表达式

按 Up Arrow 键可循环浏览您之前在控制台中运行的 JavaScript 表达式的历史记录。按 Enter 键再次运行该表达式。

使用“实时表达式”实时查看表达式的值

如果您发现自己在控制台中反复输入相同的 JavaScript 表达式，不妨创建一个实时表达式，这样会更轻松。借助实时表达式，您只需输入一次表达式，然后将其固定到 Play 管理中心顶部。表达式的值会近乎实时更新。请参阅使用实时表达式实时监控 JavaScript 表达式值。

停用提前评估

当您在控制台中输入 JavaScript 表达式时，提前评估会显示该表达式的返回值的预览。打开控制台设置，然后停用 Eager Evaluation 复选框以关闭返回值预览。

使用评估触发用户激活

用户激活是指浏览会话的状态，该状态取决于用户操作。“活跃”状态表示用户当前正在与网页互动，或者自网页加载以来一直在互动。

如需通过任何评估触发用户激活，请打开 Play 管理中心设置，然后选中 复选框。 将代码评估视为用户操作。

停用根据历史记录自动补全功能

当您输入表达式时，控制台的自动补全弹出式窗口会显示您之前运行的表达式。这些表达式以 > 字符开头。在以下示例中，DevTools 先前评估了 document.querySelector('a') 和 document.querySelector('img')。

显示历史记录中的表达式的自动补全弹出式窗口。

打开控制台设置，然后停用根据历史记录自动补全复选框，以停止显示历史记录中的表达式。

选择 JavaScript 上下文

默认情况下，JavaScript 上下文下拉菜单设置为 top，表示主文档的浏览上下文。

“JavaScript 上下文”下拉菜单。

假设您的网页上有一个广告内嵌在 <iframe> 中。您希望运行 JavaScript 以调整广告的 DOM。为此，您首先需要从 JavaScript 上下文下拉菜单中选择广告的浏览上下文。

选择其他 JavaScript 上下文。

检查对象属性

控制台可以显示您指定的 JavaScript 对象的互动式属性列表。

如需浏览列表，请在控制台中输入对象名称，然后按 Enter 键。

如需检查 DOM 对象的属性，请按照查看 DOM 对象的属性中的步骤操作。

发现自有和继承的媒体资源

控制台会先对自己的对象属性进行排序，然后以粗体突出显示这些属性。

显示对象属性。

从原型链继承的属性使用普通字体。控制台会通过评估内置对象的相应原生访问器，在对象本身上显示这些属性。

显示继承的属性。

评估自定义访问器

默认情况下，开发者工具不会评估您创建的访问器。自定义访问器。 如需对对象评估自定义访问器，请点击 (...)。 评估了自定义访问器。

发现可枚举和不可枚举的属性

可枚举的属性颜色较亮。不可枚举的属性会被静音。可枚举和不可枚举的属性。for … in 循环或 Object.keys() 方法可用于迭代 Enumerable 属性。

查看类实例的私有属性

控制台会为类实例的私有属性指定 # 前缀。

类实例的私有属性。

控制台还可以自动补全私有属性，即使您在类作用域之外对其进行评估也是如此。

私有属性自动补全。

检查内部 JavaScript 属性

借用 ECMAScript 表示法，控制台会将 JavaScript 内部的一些属性括在双方括号中。您无法在代码中与此类属性进行交互。不过，检查它们可能很有用。

您可能会在不同的对象上看到以下内部属性：

检查函数

在 JavaScript 中，函数也是具有属性的对象。不过，如果您在 Console 中输入函数名称，开发者工具会调用该名称，而不是显示其属性。

如需查看 JavaScript 内部的函数属性，请使用 console.dir() 命令。

检查函数的属性。

函数具有以下属性：

  • [[FunctionLocation]]。指向源文件中包含函数定义的行。
  • [[Scopes]]。列出函数可以访问的值和表达式。如需在调试期间检查函数作用域，请参阅查看和修改局部、闭包和全局属性。
  • 绑定函数具有以下属性：
    • [[TargetFunction]]。bind() 的目标。
    • [[BoundThis]]：this 的值。
    • [[BoundArgs]]。函数参数的数组。 绑定的函数。
  • 生成器函数带有 [[IsGenerator]]: true 属性。 生成器函数。
  • 生成器会返回迭代器对象，并且具有以下属性：
    • [[GeneratorLocation]]。指向源文件中包含生成器定义的行。
    • [[GeneratorState]]：suspended、closed 或 running.
    • [[GeneratorFunction]]：返回对象的生成器。
    • [[GeneratorReceiver]]：接收值的对象。 Iterator 对象。

清除控制台

您可以使用以下任一工作流清除 Play 管理中心：

  • 点击清除控制台 清除。。
  • 右键点击相应消息，然后选择清除控制台。
  • 在控制台中输入 clear()，然后按 Enter 键。
  • 从网页的 JavaScript 调用 console.clear()。
  • 在控制台处于焦点状态时，按 Ctrl+L。