控制台功能参考

Kayce Basques

Sofia Emelianova

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

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

打开控制台

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

打开“控制台”面板

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

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

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

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

抽屉式导航栏会在开发者工具窗口底部弹出，同时控制台标签页会打开。

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

打开控制台设置

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

要点：请勿与上方和 三点状菜单旁边的 开发者工具设置混淆。

以下链接分别介绍了各项设置：

• 隐藏网络
• 保留日志
• 仅限选定的上下文
• 在控制台中对类似消息进行分组
• 在控制台中显示 CORS 错误
• 记录 XMLHttpRequests
• 即刻评估
• 根据历史记录自动补全功能

打开控制台边栏

点击 Show Console Sidebar 图标 即可显示边栏，这对于过滤非常有用。

查看邮件

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

停用邮件分组

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

查看来自断点的消息

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

• 带有橙色问号 ? 的条件断点中的 console.* 调用
• Logpoint 消息（粉色两个点 ..）

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

查看堆栈轨迹

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

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

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

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

为了简化调试流程，您可以在捕获和重新抛出错误时指定错误原因。随着 Console 逐步深入原因链，它会输出带有 Caused by: 前缀的每个错误堆栈，以便您找到原始错误。

查看异步堆栈轨迹

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

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

要点：开发者工具会根据 console.createTask() API 方法实现此“异步堆栈标记”功能。 DevTools 鼓励框架和抽象使用此 API。例如，Angular 支持此功能。

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

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

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

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

记录 XHR 和提取请求

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

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

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

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

隐藏网络消息

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

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

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

显示或隐藏 CORS 错误

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

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

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

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

• ，用于在网络面板中使用与 CORS 相关的 TypeError 打开请求。
• ，在问题标签页上获取潜在解决方案。

过滤消息

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

过滤浏览器消息

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

按日志级别过滤

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

共有四个级别：

• Verbose
• Info
• Warning
• Error

例如，console.log() 在 Info 组中，而 console.error() 在 Error 组中。Console 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]/ 不匹配的所有消息。

在日志中搜索文字

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

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

运行 JavaScript

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

字符串复制选项

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

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

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

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

使用实时表达式实时监视表达式的值

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

停用 Eager 评估

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

通过评估触发用户激活

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

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

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

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

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

选择 JavaScript 上下文

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

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

检查对象属性

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

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

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

发现自己的属性和继承的属性

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

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

评估自定义访问器

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

发现可枚举和非枚举属性

可枚举属性的颜色是明亮的。非枚举属性会静音。 您可以使用 for … in 循环或 Object.keys() 方法遍历可枚举属性。

发现类实例的私有属性

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

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

检查内部 JavaScript 属性

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

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

• 任何对象都具有 [[Prototype]]。
• 原初封装容器具有 [[PrimitiveValue]] 属性。
• ArrayBuffer 对象具有以下属性：
  • [[Int8Array]]、[[Uint8Array]]、[[Int16Array]]、[[Int32Array]]
  • [[ArrayBufferByteLength]]、[[ArrayBufferData]]
    要点：如需检查 View 对象引用的 JavaScript ArrayBuffer，请点击 按钮。
• 除了特定于 ArrayBuffer 的属性之外，WebAssembly.Memory 对象还具有 [[WebAssemblyMemory]] 属性。
• 键控集合（映射和集）具有一个 [[Entries]] 属性，其中包含其键控条目。
• Promise 对象具有以下属性：
  • [[PromiseState]]：待处理、已满足或已拒绝
  • [[PromiseResult]]：undefined 表示待处理，<value> 表示已完成，<reason> 表示遭拒
• Proxy 对象具有以下属性：[[Handler]] 对象、[[Target]] 对象和 [[isRevoked]]（是否关闭）。

检查函数

在 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。