使用 Console(控制台)了解如何:打开DevTools Console(控制台),堆叠冗余消息或在自己的行上显示它们,清除或保持输出或将其保存到文件,过滤输出,以及了解其他Console(控制台)设置。
TL;DR以专用面板形式,或作为任何其他面板的抽屉式面板的形式,打开Console(控制台)。堆叠冗余消息或在自己的行上显示它们。清除或保持页面之间的输出,或将其保存到文件。按严重性级别,通过隐藏网络消息,或通过正则表达模式过滤输出。打开 Console(控制台)以专用面板形式打开 Console(控制台):
或作为任何其他面板的抽屉式面板形式打开:
打开控制台面板要打开专用的控制台面板,请执行以下之一操作:
按Ctrl+Shift+J(Windows / Linux)或Cmd+Opt+J(Mac)。如果 DevTools 已打开,请按Console(控制台)按钮。打开控制台面板时,控制台抽屉式窗格会自动折叠隐藏。
打开控制台抽屉式窗格要在任何其他面板打开控制台抽屉式窗格,请执行以下之一操作:
在 DevTools 获取焦点时 按Esc键。点击Customize and control DevTools(自定义并控制DevTools,也叫开发者工具主菜单)按钮,然后选择Show console(显示控制台)。
信息栈如果连续地重复信息,不会在新行上打印出每个信息实例,控制台会“堆叠”重复信息,并在左边显示一个数字,表示消息重复的次数。
如果您喜欢每个日志独占一行,请在 DevTools settings(设置)中启用Show timestamps(显示时间戳)。
由于每个信息的时间戳不同,每条信息都显示在其自己单独的行上。
控制台历史信息的操作清除控历史信息您可以通过执行以下任一操作来清除Console(控制台)的历史记录:
在Console(控制台)中右键单击,然后选择Clear console(控制台)。在控制台中键入clear()。在JavaScript代码中调用console.clear()。使用快捷键Ctrl+L(Mac,Windows,Linux)。保留历史记录勾选Console(控制台)顶部的Preserve log(保留日志)复选框,可以在页面刷新或页面跳转时保留控制台历史记录。信息将被存储,直到您清除Console(控制台)信息或关闭tab页。
保存历史记录在Console(控制台)中右键单击,然后选择Save as...(另存为),可以将控制台输出记录保存到日志文件中。
选择执行上下文在下面的截图中以蓝色高亮显示的下拉菜单被称为Execution Context Selector(执行上下文选择器)。
您通常会看到上下文设置为top(页面的顶部框架)。
其他框架和扩展在其自己的上下文中起作用。要使用这些其他上下文,您需要从下拉菜单中选择它们。例如,如果您想查看
Console(控制台)默认为top上下文,除非通过检查另一个上下文中的元素来访问DevTools。例如,如果您检查