了解如何: 打开 DevTools 控制台；堆叠冗余消息或将其显示在各自的行上；清除或保留输出，或者将其保存到文件中；过滤输出，以及访问其他控制台设置。
TL;DR
- 以专用面板或任何其他面板旁的抽屉式导航栏形式打开控制台。
- 堆叠冗余消息，或者将其显示在各自的行上。
- 清除或保留页面之间的输出，或者将其保存到文件中。
- 按严重性等级、通过隐藏网络消息或者按正则表达式模式对输出进行过滤。
打开控制台
以全屏模式的专用面板形式访问控制台:
或以任何其他面板旁的抽屉式导航栏的形式:
以面板形式打开
要打开专用的 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。
通常，您会看到此环境设置为 top（页面的顶部框架）。
其他框架和扩展程序在其自身的环境中运行。 要使用这些其他环境，您需要从下拉菜单中选中它们。
例如，如果您要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，您需要从 Execution Context Selector 下拉菜单中选中该元素。
控制台默认设置为 top 环境，除非您通过检查其他环境中的某个元素来访问 DevTools。
例如，如果您检查 <iframe> 中的一个 <p> 元素，那么，DevTools 将 Execution Context Selector 设置为该 <iframe> 的环境。
当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。
这是因为开发者很少需要在 top 以外的任意环境中操作。
输入一个变量，期待返回一个值，只是为了查看该变量是否为 undefined（因为该变量是在不同环境中定义的），这会非常令人困惑。
过滤控制台输出
点击 Filter 按钮（
{:.inline}）可以过滤控制台输出。
您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。
按严重性等级进行过滤的说明如下所示:
| 选项及显示的内容 | |
|---|---|
| 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 对象的格式设置。 |