acer软件保护卡清除工具clear_chrome 开发者工具之控制台面板

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 对象的格式设置。