前端调试必备：console控制台的打开，保存历史，过滤

本文内容来自：Chrome Console控制台的打开，保存历史，过滤和其它的设置 – Break易站

我们这里的console是谷歌浏览器的控制台，作用有监控Html,css和javascript.还可以debug前端的很多很多问题。

这篇文章主要是了解如何：打开DevTools控制台，在控制台上显示消息，清除或保留输出或将其保存到文件，过滤输出并访问其他控制台设置。

这篇文章主要是讲下面四个方面：

打开控制台作为专用面板或任何其他面板旁边的侧边栏。

在console上面堆叠冗余的消息，或者在他们自己的行上显示它们。

清除或保留页面之间的输出，或将其保存到文件。

按严重性级别筛选输出，隐藏网络消息或正则表达式模式。

打开Console控制台

以全屏专用面板访问控制台：

以侧边栏或者底部的方式打开控制台

作为面板打开

要打开专门的控制台面板，可以：

按Ctrl + Shift + J（Windows / Linux）或Cmd + Opt + J（Mac）。

如果DevTools已经打开，请按控制台按钮 （console）。

当您打开控制台面板时，控制台抽屉会自动折叠。

作为抽屉打开

要将控制台作为任何其他面板旁边的抽屉打开，请执行以下操作之一：

在DevTools处于焦点时按Esc键。

按自定义和控制按钮，然后按显示控制台。

Console控制台消息堆叠

如果连续重复一条消息，而不是将新消息的每个实例都打印出来，控制台将“堆叠”消息，而是在左边空白处显示一个数字。 数字表示消息重复了多少次。

如果您更喜欢每个日志的唯一行条目，请启用DevTools设置中的显示时间戳。

由于每条消息的时间戳不同，每条消息都显示在自己的行上，就不会堆叠了。

Console控制台使用控制台历史记录

Console控制台清除历史

您可以通过执行以下任一操作来清除控制台历史记录：

右键单击控制台，然后按清除控制台。

在控制台中输入clear（）。

从你的JavaScript代码中调用clear（）。

键入Ctrl + L（Mac，Windows，Linux）。

启用控制台顶部的“保留日志”复选框可在页面刷新或更改之间保留控制台历史记录。 消息将被存储，直到您清除控制台或关闭选项卡。

Console控制台保存历史

在控制台中右键单击并选择另存为以将控制台的输出保存到日志文件。

Console控制台选择执行上下文

在下面的屏幕截图中蓝色突出显示的下拉菜单称为执行上下文选择器。

您通常会将上下文设置为顶部（页面的顶部框架）。

其他框架和扩展在它们自己的上下文中操作。要使用这些其他上下文，您需要从下拉菜单中选择它们。例如，如果您想查看

除非您通过检查另一个上下文中的元素来访问DevTools，否则控制台默认为顶层上下文。例如，如果您检查

元素，则DevTools会将执行上下文选择器设置为该

当您在上方以外的环境中工作时，DevTools会突出显示“执行环境选择器”红色，如下面的屏幕截图所示。这是因为开发人员很少需要在除top之外的任何环境下工作。输入一个变量，期望一个值，只能看到它是未定义的（因为它是在不同的上下文中定义的）。

Console控制台过滤控制台输出

点击过滤器按钮（过滤器按钮）过滤控制台输出。 您可以按严重性级别，正则表达式或隐藏网络消息进行过滤。

按严重性级别过滤相当于以下内容：

Console控制台其他设置

打开DevTools设置，进入“常规”选项卡，然后向下滚动到“控制台”部分以进一步进行控制台设置。

本文内容来自：Chrome Console控制台的打开，保存历史，过滤和其它的设置 – Break易站