控制台功能参考

凯切·巴斯克斯
Kayce Basques
Twitter GitHub Glitch
索菲亚·埃梅利安诺娃
Sofia Emelianova
GitHub

本页面介绍了与 Chrome 开发者工具控制台相关的功能。本文假定您已熟悉如何使用控制台查看记录的消息并运行 JavaScript。如果没有，请参阅使用入门。

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

打开控制台

控制台能以面板或抽屉式导航栏中的标签页的形式打开。

打开“控制台”面板

按 Ctrl+Shift+J 或 Command+Option+J (Mac)。

控制台。

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

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

在抽屉式导航栏中打开控制台

按 Esc 键或点击自定义并控制开发者工具 自定义和控制开发者工具。，然后选择显示控制台抽屉式导航栏。

显示控制台抽屉。

抽屉式导航栏窗口会弹出，同时 Console 标签页会打开。

抽屉式导航栏中的“Console”标签页。

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

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

打开控制台设置

点击控制台右上角的 设置。 控制台设置。

控制台设置。

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

点击 Show Console Sidebar 图标 显示控制台边栏。 以显示边栏，这对于过滤非常有用。

控制台边栏。

查看邮件

本部分包含一些功能，这些功能会更改控制台中的消息显示方式。有关实操演示，请参阅查看消息。

停用邮件分组

打开控制台设置，然后停用类似群组，以停用控制台的默认消息分组行为。有关示例，请参阅记录 XHR 和提取请求。

查看断点处的消息

控制台通过以下方式标记由断点触发的消息：

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

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

查看堆栈轨迹

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

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

堆栈轨迹。

查看异步堆栈轨迹

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

在这种情况下，堆栈轨迹会显示异步操作的“完整故事”。

异步堆栈轨迹。

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

如果源代码映射包含 ignoreList 字段，默认情况下，Console 会从堆栈轨迹中隐藏来自打包器（例如 webpack）或框架（例如 Angular）生成的源代码的第三方帧。

如需查看包括第三方帧在内的全栈轨迹，请点击堆栈轨迹底部的 Show N more frame。

显示另外 N 个框架。

如需始终查看全栈轨迹，请停用 设置。 设置 > 忽略列表 > 自动将已知的第三方脚本添加到忽略列表设置。

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

记录 XHR 和提取请求

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

记录 XMLHttpRequest 和 Fetch 请求。

上例中的顶部消息显示了控制台的默认分组行为。以下示例展示了同一日志在停用消息分组后的外观。

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

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

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

隐藏网络消息

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

控制台中显示 404 消息。

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

  1. 打开控制台设置。
  2. 选中隐藏网络复选框。

显示或隐藏 CORS 错误

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

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

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

在控制台中显示 CORS 错误。

如果控制台设置为显示 CORS 错误，而您遇到这些错误，可以点击错误旁边的以下按钮：

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

过滤消息

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

过滤浏览器消息

打开控制台边栏，然后点击用户消息，以仅显示来自页面 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: 后，开发者工具会显示所有相关网址。

网址过滤器。

域名也可以。例如，如果 https://example.com/a.js 和 https://example.com/b.js 正在记录消息，则 url:https://example.com 可让您专注于来自这两个脚本的消息。

如需隐藏来自特定网址的所有邮件，请输入 -url:，后跟相应网址，例如 https://b.wal.co。这是一个排除的网址过滤器。

排除的网址过滤器。开发者工具将隐藏与指定网址匹配的所有消息。

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

查看来自特定脚本的消息。

过滤来自不同上下文的邮件

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

过滤掉与正则表达式格式不匹配的邮件

在过滤文本框中输入正则表达式（如 /[foo]\s[bar]/），以过滤掉与该模式不匹配的任何消息。不支持空格，请改用 \s。开发者工具会检查消息文本或导致消息被记录的脚本中是否发现该模式。

例如，以下命令会过滤掉与 /[gm][ta][mi]/ 不匹配的所有邮件。

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

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

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

运行 JavaScript

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

字符串复制选项

默认情况下，控制台会将字符串输出为有效的 JavaScript 字面量。右键点击输出内容，然后在三个复制选项之间进行选择：

  • 复制为 JavaScript 字面量。转义适当的特殊字符，并根据内容使用单引号、双引号或反引号封装字符串。
  • 复制字符串内容。将确切的原始字符串（包括新行和其他特殊字符）复制到剪贴板。
  • 复制为 JSON 字面量。将字符串的格式设置为有效的 JSON。

复制选项。

重新运行历史记录中的表达式

按向上箭头键可循环播放您之前在控制台中运行的 JavaScript 表达式的历史记录。按 Enter 键再次运行该表达式。

使用实时表达式实时观察表达式的值

如果您发现自己在控制台中反复输入相同的 JavaScript 表达式，则可能会发现创建实时表达式更简单。使用实时表达式时，您只需输入一次表达式，然后将其固定在控制台顶部。表达式的值近乎实时地更新。请参阅使用实时表达式实时观看 JavaScript 表达式值。

停用即时评估

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

通过评估触发用户激活

用户激活是指浏览会话的状态，具体取决于用户操作。“活跃”状态表示用户当前正在与网页或在网页加载后进行过互动。

如需通过任何评估触发用户激活，请打开“控制台设置”，然后勾选 复选框。 评估触发器用户激活。

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

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

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

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

选择 JavaScript 上下文

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

“JavaScript 上下文”下拉菜单。

假设您在网页上嵌入了一个 <iframe> 广告。您需要运行 JavaScript 来调整广告的 DOM为此，您首先需要从 JavaScript 上下文下拉列表中选择广告的浏览上下文。

选择其他 JavaScript 上下文。

检查对象属性

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

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

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

Spot 拥有的属性和继承的属性

控制台会先将自己的对象属性排序，并以粗体突出显示。

显示对象属性。

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

显示继承的属性。

评估自定义访问器

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

Spot 可枚举和非枚举属性

可枚举属性的颜色很亮。非枚举属性会静音。 可枚举和非枚举属性。 可以使用 for … in 循环或 Object.keys() 方法迭代可枚举属性。

发现类实例的私有属性

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

类实例的私有属性。

控制台也可以自动填充私有属性，即使您在类范围之外对私有属性求值时也是如此。

私有属性自动补全。

检查内部 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 对象。

清除控制台

您可以使用以下任一工作流程来清除控制台数据：

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