chrome 开发者工具之控制台面板
我们在文章中总说在控制台操作代码及查看输出结果,刚开始接触开发的人都不知道如何使用控制台面板。我们平时经常使用的是 chrome 浏览器,这次我们主要介绍如何使用 chrome 控制台面板。
在开发期间,可以经常使用控制台面板记录诊断信息,或者使用它作为 shell 在页面上与 JavaScript 进行交互。
我们可以通过菜单和快捷键两种方式打开 chrome 控制台页面。两种方式具体操作步骤如下所示:
方式一:从 chrome 浏览器菜单选择 视图-> 开发者 -> 开发者工具。
方式二:打开 chrome 浏览器,按 F12 快捷键。
通过两种方式打开开发者工具之后,切换至 Console 标签,以专用面板形式访问控制台:
或以任何其他面板旁的抽屉式导航栏的形式:
以面板形式打开
要打开专用的 Console 面板,请执行以下操作之一:
按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。
如果 开发者工具 已打开,则按 Console 按钮。
打开 Console 面板时,Console 抽屉式导航栏将自动折叠。
以抽屉式导航栏形式打开
要以任何其他面板旁的抽屉式导航栏的形式打开控制台,请执行以下操作之一:
在 开发者工具 处于聚焦状态时按 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(页面的顶部框架)。
其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境,您需要从下拉菜单中选中它们。例如,如果您要查看
控制台默认设置为 top 环境,除非您通过检查其他环境中的某个元素来访问 DevTools。例如,如果您检查
当您在 top 以外的环境中操作时,DevTools 将 Execution Context Selector 突出显示为红色,如下面的屏幕截图中所示。这是因为开发者很少需要在 top 以外的任意环境中操作。输入一个变量,期待返回一个值,只是为了查看该变量是否为 undefined(因为该变量是在不同环境中定义的),这会非常令人困惑。
过滤控制台输出
点击 Filter 按钮(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 对象的格式设置。 |