控制台功能参考

本文概述了 控制台的功能。

内容:

打开控制台

可以在活动栏快速视图工具栏中打开控制台工具。

在活动栏中打开控制台工具

Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开,并在活动栏中选择了控制台工具的选项卡:

控制台工具

在“快速视图”工具栏中打开控制台工具

若要在“快速视图”工具栏中打开控制台工具,请在“DevTools”窗口底部按 Esc。如果“快速视图”工具栏以前已隐藏,则显示:

快速视图工具栏中的控制台工具

或者,单击“ 自定义和控制 DevTools (...) >切换快速视图面板

从命令菜单打开控制台

若要从命令菜单打开控制台工具,请执行以下操作:

  1. Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。

    命令菜单最初打开,其文本框前面有一个字符 >

  2. 键入 “显示控制台 ”,然后选择“ 显示控制台” 选项之一:

    • 若要在活动栏中打开控制台,请选择旁边带有面板锁屏提醒的选项。
    • 若要在“快速视图”工具栏中打开“控制台”,请选择旁边带有“快速视图”锁屏提醒的选项。

    运行 命令以显示控制台工具

若要了解有关 命令菜单的详细信息,请参阅 在命令菜单中运行命令

打开控制台设置

若要更改 主机 工具的设置,请单击“ 主机设置 (控制台设置”图标) 按钮。 将显示“设置”部分:

控制台设置

打开边栏以筛选消息

若要在 控制台中显示边栏,若要筛选消息,请单击“ 显示控制台边栏 (显示控制台边栏) 。 将显示边栏:

控制台边栏

若要详细了解如何在 控制台 工具中筛选消息,请参阅 筛选消息

查看消息

以下部分介绍更改 消息在控制台 工具中的显示方式的功能。 有关动手演练,请参阅控制台概述中的检查和筛选当前网页上的信息

关闭消息分组

默认情况下, 控制台 将类似的消息组合在一起。 例如,如果记录了多个后续消息, 控制台中只显示一条消息。 该消息包括记录消息的次数的计数,你可以展开消息以查看所有实例。

若要关闭 主机的默认消息分组行为,请单击“ 主机设置 ” (“ 控制台设置”图标) 按钮,然后选择“ 在控制台中分组类似消息 ”复选框。

记录 XHR 和提取请求

若要记录 和 Fetch JavaScript API 触发XMLHttpRequest的所有网络请求,请执行以下操作:

  1. 在新窗口或选项卡中打开演示网页 “检查网络活动演示 ”。

  2. 控制台 工具中,单击“ 控制台设置 (控制台设置”图标) 按钮,然后选中“ 日志 XMLHttpRequests ”复选框。

  3. 在呈现的网页中,单击“ 获取数据 ”按钮。 这会触发 Fetch API 请求, 然后控制台 会记录请求和响应详细信息:

    在控制台中记录的提取请求

跨页面加载持久保存消息

加载新网页时, 控制台 中的消息将被清除。 若要在页面加载时保留消息,请单击“ 控制台设置 (控制台设置”图标) 按钮,然后选择“ 保留日志 ”复选框。

隐藏网络错误

默认情况下, 控制台 工具会记录网络错误:

控制台中的“404”网络错误消息

上面显示的错误是由于 HTTP 响应,其状态代码为 404

若要隐藏网络错误,请单击“ 主机设置 (控制台设置”图标) 按钮,然后选择“ 隐藏网络 ”复选框。

解释在 Edge 中使用 Copilot 的控制台错误和警告

使用 DevTools 检查网页时,通常会在 控制台 工具中看到错误和警告。 这些错误和警告有时可能难以理解和修复。 通过使用 “解释此错误” 功能,可以在 Edge 中获取有关 Copilot 中的错误或警告的详细信息:

Microsoft Edge 边栏中显示错误消息和说明的 Copilot。

若要了解有关此功能的详细信息,请参阅 在 Edge 中使用 Copilot 解释控制台错误和警告

筛选消息

有多种方法可在 控制台中筛选出消息。

筛选掉浏览器消息

若要仅显示来自网页的 JavaScript 的消息,请执行以下操作:

  1. 在新窗口或选项卡中打开演示网页 PWAmp ,然后单击“ 播放 ”按钮。

    演示网页将消息记录到 控制台 ,还记录了多个浏览器消息:

    控制台中的多个用户和浏览器消息

  2. 控制台 工具中,若要显示边栏,请单击“ 显示控制台边栏 (显示控制台边栏) 。

  3. 在边栏中,单击 3 条用户消息。 用户消息数可能因网页记录的消息数而异。

    控制台工具仅显示网页记录的消息,浏览器消息处于隐藏状态:

    仅在控制台中打开边栏的用户消息

按日志级别筛选

DevTools 将记录到 控制台 工具的每条消息分配四个严重级别之一:

  • Error
  • Info
  • Verbose
  • Warning

这四个严重级别适用于:

  • 使用 consoleconsole.error()console.warn()console.log()方法从网页中记录的消息。
  • 浏览器记录的消息。

可以隐藏不感兴趣的任何级别的邮件。 例如,如果只对消息感兴趣 Error ,则可以隐藏其他三个级别。

按级别筛选消息:

  1. 控制台 工具的工具栏中,单击“ 日志级别 ”下拉列表。

    如果下拉列表不可用,请先通过单击“ 隐藏控制台 边栏” (隐藏 控制台边栏) 隐藏边栏来隐藏边栏

  2. 在下拉列表中,启用或禁用任何 VerboseInfoWarningsErrors 级别:

    “日志级别”下拉列表

按脚本 URL 筛选消息

若要按记录消息的脚本的 URL 筛选消息,请使用 “筛选 ”文本框:

  1. 在新窗口或选项卡中打开演示网页 PWAmp 。来自各种脚本的消息将记录到 控制台

  2. 控制台 工具的工具栏中,单击 “筛选器 ”文本框,然后键入 url:。 一个下拉列表,其中包含记录消息的脚本的 URL:

    “筛选器”文本框的下拉列表,其中显示了脚本 URL

  3. 选择要关注的脚本的 URL。 控制台工具仅显示来自该脚本的消息:

    控制台中仅显示来自所选脚本 URL 的消息

无需从 控制台 工具在 “筛选器” 下拉列表中提供的 URL 列表中进行选择。 可以键入要筛选的 URL 或 URL 的一部分。 例如,如果 https://example.com/a.jshttps://example.com/b.js 正在记录消息, url:example.com 则允许你专注于这两个脚本中的消息。

使用负 URL 筛选器反转筛选器

若要隐藏从脚本记录的消息,请在 “筛选器 ”文本框中键入 -url: 脚本的 URL 或部分 URL。 例如,若要对 https://example.com/a.js隐藏消息,请键入 -url:example.com/a.js

使用边栏显示来自单个脚本的消息

若要显示来自单个脚本的消息,请使用边栏:

  1. 若要在 控制台中显示边栏,请单击“ 显示控制台边栏 (显示控制台边栏) 。 此时会显示边栏。

  2. 展开 “3 个用户消息 ”部分。 该数量可能因网页记录的消息数而异。 将显示记录消息的脚本列表。

  3. 选择包含要关注的消息的脚本脚本。 控制台仅显示来自该脚本的消息:

    使用边栏筛选来自一个脚本的消息

筛选出来自不同 JavaScript 上下文的消息

默认情况下, 控制台 工具显示来自网页上运行的所有 JavaScript 上下文的消息。 这可能包括来自网页中嵌入的跨域 <iframe> 元素的消息,或在后台运行的服务辅助角色。

若要仅显示来自一个 JavaScript 上下文的消息,请执行以下操作:

  1. 单击 “主机设置” (“控制台设置”图标) 按钮。 此时将显示“设置”部分。

  2. 选中“ 仅选定上下文 ”复选框。 控制台中仅显示由顶部 JavaScript 上下文记录的消息。

  3. 若要选择不同的上下文,请在 控制台 工具的工具栏中,单击 “JavaScript 上下文 ”下拉列表,然后选择要关注的上下文:

    JavaScript 上下文下拉列表

若要详细了解如何选择其他 JavaScript 上下文,请参阅 选择要运行 JavaScript 表达式的上下文

使用正则表达式模式筛选消息

若要仅显示与正则表达式模式匹配的消息,请执行以下操作:

  1. 控制台 工具的工具栏中,单击 “筛选器 ”文本框。

  2. 键入正则表达式模式,例如 /.*\.mp3$/ ,以匹配以 .mp3结尾的消息。

    控制台仅显示与正则表达式模式匹配的消息:

基于正则表达式筛选的消息列表

运行 JavaScript

本部分包含与 在控制台中运行 JavaScript 相关的功能。 有关动手演练,请参阅 在控制台中运行 JavaScript

使用控制台历史记录再次运行表达式

若要运行之前在 控制台中运行的 JavaScript 表达式,请执行以下操作:

  1. 向上键 可循环浏览之前运行的 JavaScript 表达式的历史记录。

  2. Enter 再次运行表达式。

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

若要实时watch JavaScript 表达式的值,请创建实时表达式,而不是重复运行表达式:

  1. 控制台 工具工具栏中,单击“ 创建实时表达式 ”按钮 (“创建实时表达式”图标) 。 “ 表达式 ”文本框显示在工具栏下方。

  2. 输入 JavaScript 表达式,然后单击“ 表达式 ”文本框外部。 新表达式及其值显示在 控制台 工具的顶部。

有关详细信息,请参阅 使用实时表达式监视 JavaScript 中的更改

在键入时禁用计算 JavaScript 表达式

默认情况下,在控制台中键入 JavaScript 表达式时,控制台工具会显示表达式值的预览。

在键入时关闭实时预览:

  1. 单击 “主机设置” (“控制台设置”图标) 按钮。

  2. 清除 “预先评估 ”复选框。

从历史记录中关闭自动完成

控制台 工具中键入 JavaScript 表达式时,将显示一个自动完成弹出窗口。 自动完成弹出窗口包含:

  • 针对与键入的字符匹配的全局 JavaScript 对象和函数的建议。
  • 针对之前运行的 JavaScript 表达式的建议。

前面运行的有关 JavaScript 表达式的建议以 > 字符为前缀,并显示在自动完成窗口的底部:

自动完成弹出窗口显示历史记录中的表达式

若要停止显示以前运行的表达式中的建议,请执行:

  1. 单击 “主机设置” (“控制台设置”图标) 按钮。

  2. 清除“ 从历史记录中自动完成 ”复选框。

选择上下文以运行 JavaScript 表达式

网页具有main浏览上下文,网页的 JavaScript 在其中运行。 但是,网页可以具有其他 JavaScript 上下文,例如嵌入网页中的跨域 <iframe> 元素,或在后台运行的服务辅助角色。

默认情况下,位于控制台工具工具栏中的 JavaScript 上下文下拉列表设置为顶部,这表示main网页的浏览上下文:

JavaScript 上下文下拉列表,其中显示了已选择顶部上下文

控制台 工具中运行的任何 JavaScript 表达式都会在 JavaScript 上下文 下拉列表中选择的上下文中计算。

若要在不同的上下文(例如跨域 <iframe> 元素中)运行 JavaScript 表达式,请单击 “JavaScript 上下文 ”下拉列表,然后选择另一个浏览上下文。

清除控制台

若要清除 控制台,请使用以下任一方法:

  • 单击“ 清除主机 (清除主机) ”按钮。

  • 右键单击邮件,然后选择“ 清除控制台”。

  • 键入clear()控制台工具,然后按 Enter

  • 从网页的 JavaScript 调用 console.clear()

  • 控制台工具处于焦点时,按 Ctrl+L

另请参阅

注意

此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改,并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到,由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可