控制台功能参考

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

打开控制台

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

打开“控制台”面板

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

控制台。

如需从命令菜单中打开控制台，请开始输入 Console，然后运行旁边带有面板徽章的 Show Console 命令。

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

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

按 Escape 键或点击自定义和控制开发者工具图标 自定义和控制开发者工具。，然后选择显示控制台抽屉。

显示控制台抽屉栏。

抽屉会在开发者工具窗口底部弹出，并打开控制台标签页。

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

如需从命令菜单中打开“控制台”标签页，请开始输入 Console，然后运行带有抽屉徽章的 Show Console 命令。

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

打开控制台设置

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

控制台设置。

以下链接介绍了每项设置：

点击显示控制台边栏图标 显示控制台边栏。 以显示边栏，该边栏可用于过滤。

控制台边栏。

查看消息

此部分包含可更改控制台中消息呈现方式的功能。如需查看实际操作的分步说明，请参阅查看消息。

停用消息分组

打开控制台设置，然后停用归为一组，以停用控制台的默认消息分组行为。如需查看示例，请参阅记录 XHR 和 Fetch 请求。

查看来自断点的消息

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

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

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

查看堆栈轨迹

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

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

堆栈轨迹。

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

控制台可以在堆栈轨迹中显示一系列错误原因（如果有）。

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

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

查看异步堆栈轨迹

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

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

异步堆栈轨迹。

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

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

如需查看包含第三方框架的完整堆栈轨迹，请点击堆栈轨迹底部的显示另外 N 个帧。

再显示 N 个框架。

如需始终查看完整的堆栈轨迹，请停用 设置。 Settings > 忽略列表 > Automatically add known third-party scripts to ignore list 设置。

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

记录 XHR 和 Fetch 请求

打开控制台设置，然后启用记录 XMLHttpRequests 以在控制台中记录所有 XMLHttpRequest 和 Fetch 请求。

记录 XMLHttpRequest 和 Fetch 请求。

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

取消分组后，记录的 XMLHttpRequest 和 Fetch 请求的显示效果。

在网页加载期间保持消息不变

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

隐藏网络消息

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

控制台中的 404 消息。

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

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

显示或隐藏 CORS 错误

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

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

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

在控制台中显示 CORS 错误。

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

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

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

过滤消息

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

过滤掉浏览器消息

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

查看用户消息。

按日志级别过滤

开发者工具会为大多数 console.* 方法分配严重级别。

会员等级分为四种：

  • Verbose
  • Info
  • Warning
  • Error

例如，console.log() 位于 Info 组中，而 console.error() 位于 Error 组中。控制台 API 参考介绍了每种适用方法的严重程度。

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

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

“日志级别”下拉菜单。

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

使用边栏查看警告。

按网址过滤消息

输入 url:，然后输入网址，即可仅查看来自该网址的消息。输入 url: 后，开发者工具会显示所有相关网址。

网址过滤条件。

网域也适用。例如，如果 https://example.com/a.js 和 https://example.com/b.js 是日志消息，url:https://example.com 可让您专注于来自这两个脚本的消息。

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

排除性网址过滤条件。开发者工具正在隐藏与指定网址匹配的所有消息。

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

查看特定脚本中的消息。

过滤掉来自不同上下文的消息

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

过滤掉与正则表达式模式不匹配的消息

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

例如，以下过滤条件会过滤掉所有不符合 /[gm][ta][mi]/ 的消息。

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

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

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

运行 JavaScript

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

字符串复制选项

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

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

复制选项。

重新运行之前的表达式并清除历史记录

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

如需清除控制台历史记录，请右键点击控制台中的空白区域，然后从上下文菜单中选择清除控制台历史记录。

清除、复制、展开、收起和保存消息

如需清除控制台窗口，请执行以下操作之一：

  • 点击顶部操作栏中的块 清除控制台。
  • 按 Ctrl+L 或 Cmd+K。
  • 右键点击控制台中的空白区域，然后从上下文菜单中选择 Clear console。

如需展开或收起所有消息，请点击顶部操作栏中的图标 全部展开或图标 全部收起。

右键点击时显示的上下文菜单。

您还可以通过上下文菜单执行以下操作：

  • 复制控制台：将所有当前消息复制到剪贴板，但不包括之前命令的历史记录。
  • 另存为…：将所有当前消息保存到纯文本 .log 文件中。

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

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

停用 Eager Evaluation

当您在控制台中输入 JavaScript 表达式时，抢先求值会显示该表达式的返回值预览。打开控制台设置，然后取消选中急切求值复选框以关闭返回值预览。

通过评估触发用户激活

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

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

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

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

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

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

选择 JavaScript 上下文

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

“JavaScript 上下文”下拉菜单。

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

选择其他 JavaScript 上下文。

检查对象属性

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

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

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

识别自有属性和继承属性

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

显示对象属性。

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

显示继承的属性。

评估自定义访问器

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

识别可枚举属性和不可枚举属性

可枚举的属性以亮色显示。不可枚举的属性处于静音状态。 可枚举属性和不可枚举属性。 可枚举的属性可以通过 for … in 循环或 Object.keys() 方法进行迭代。

发现类实例的私有属性

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

类实例的私有属性。

即使在类范围之外评估私有属性，控制台也可以自动补全这些属性。

私有房产自动补全。

检查内部 JavaScript 属性

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

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

检查函数

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

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

检查函数的属性。

函数具有以下属性：

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

清除控制台

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

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