school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

使用控制台

了解如何:打开 DevTools 控制台;堆叠冗余消息或将其显示在各自的行上;清除或保留输出,或者将其保存到文件中;过滤输出,以及访问其他控制台设置。

TL;DR

  • 以专用面板或任何其他面板旁的抽屉式导航栏的形式打开控制台。
  • 堆叠冗余消息,或者将其显示在各自的行上。
  • 清除或保留页面之间的输出,或者将其保存到文件中。
  • 按严重性等级、通过隐藏网络消息或者按正则表达式模式对输出进行过滤。

打开控制台

以全屏模式的专用面板形式访问控制台:

Console 面板

或以任何其他面板旁的抽屉式导航栏的形式:

Console 抽屉式导航栏

以面板形式打开

要打开专用的 Console 面板,请执行以下操作之一:

  • Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。
  • 如果 DevTools 已打开,则按 Console 按钮。

打开 Console 面板时,Console 抽屉式导航栏将自动折叠。

以抽屉式导航栏形式打开

要以任何其他面板旁的抽屉式导航栏的形式打开控制台,请执行以下操作之一:

  • 在 DevTools 处于聚焦状态时按 Esc
  • Customize and control DevTools 按钮,然后按 Show console

显示控制台

消息堆叠

如果一条消息连续重复,而不是在新行上输出每一个消息实例,控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数。

消息堆叠

如果您倾向于为每一个日志使用一个独特的行条目,请在 DevTools 设置中启用 Show timestamps

显示时间戳

由于每一条消息的时间戳均不同,因此,每一条消息都将显示在各自的行上。

带时间戳的控制台

处理控制台历史记录

清除历史记录

您可以通过以下方式清除控制台历史记录:

  • 在控制台中点击右键,然后按 Clear console
  • 在控制台中键入 clear()
  • 从您的 JavaScript 代码内调用 console.clear()
  • Ctrl+L (Mac、Windows、Linux)。

保留历史记录

启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储,直至您清除控制台或者关闭标签。

保存历史记录

在控制台中点击右键,然后选择 Save as,将控制台的输出保存到日志文件中。

将控制台的输出保存到日志文件

选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector

Execution Context Selector

通常,您会看到此环境设置为 top(页面的顶部框架)。

其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境,您需要从下拉菜单中选中它们。 例如,如果您要查看 <iframe> 元素的日志输出,并修改该环境中存在的某个变量,您需要从 Execution Context Selector 下拉菜单中选中该元素。

控制台默认设置为 top 环境,除非您通过检查其他环境中的某个元素来访问 DevTools。 例如,如果您检查 <iframe> 中的一个 <p> 元素,那么,DevTools 将 Execution Context Selector 设置为该 <iframe> 的环境。

当您在 top 以外的环境中操作时,DevTools 将 Execution Context Selector 突出显示为红色,如下面的屏幕截图中所示。 这是因为开发者很少需要在 top 以外的任意环境中操作。 输入一个变量,期待返回一个值,只是为了查看该变量是否为 undefined(因为该变量是在不同环境中定义的),这会非常令人困惑。

Execution Context Selector 突出显示为红色

过滤控制台输出

点击 Filter 按钮 (filter 按钮) 可以过滤控制台输出。您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

过滤的控制台输出

按严重性等级进行过滤的说明如下所示:

选项及显示的内容
All 显示所有控制台输出
Errors 仅显示 console.error() 的输出。
Warnings 仅显示 console.warn() 的输出。
Info 仅显示 console.info() 的输出。
Logs 仅显示 console.log() 的输出。
Debug 仅显示 console.timeEnd()console.debug() 的输出。

其他设置

打开 DevTools 设置,转至 General 标签,然后向下滚动到 Console 部分,查看更多控制台设置。

控制台设置

设置及说明
Hide network messages 默认情况下,控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如,将不会记录 404 和 500 系列错误。
Log XMLHttpRequests 确定控制台是否记录每一个 XMLHttpRequest。
Preserve log upon navigation 在页面刷新或导航时保留控制台历史记录。
Show timestamps 在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。这会停用消息堆叠。
Enable custom formatters 控制 JavaScript 对象的格式设置