Devtools 控制台模板

[coconilu]

控制面板

打开的方式有两种：

1. 以面板形式打开

2. 以抽屉式导航栏形式打开

控制台历史记录

清除操作：

1. 在控制台中点击右键，然后按 Clear console
2. 在控制台中键入 clear()
3. 从您的 JavaScript 代码内调用 console.clear()
4. 按 Ctrl+L （Mac、Windows、Linux）

保留操作：

启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储，直至您清除控制台或者关闭标签。

保存操作：

在控制台中点击右键，然后选择 Save as，将控制台的输出保存到日志文件中。

过滤控制台输出

我们可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

控制台设置

可以在Settings（F1） -> Preferences 中的 Console找到控制台相关的配置：

设置及说明

Hide network messages | 默认情况下，控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如，将不会记录 404 和 500 系列错误。
Selected context only | 只显示选择的上下文的控制台输出。
Log XMLHttpRequests | 确定控制台是否记录每一个 XMLHttpRequest。
Show timestamps | 在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。这会停用消息堆叠。
Autocomplete from history | 根据历史记录自动填充命令。
Group similar | 相同消息堆叠。
Eager evaluation | 即时显示结果（不需要按回车）
Preserve log upon navigation | 在页面刷新或导航时保留控制台历史记录。
Enable custom formatters | 控制 JavaScript 对象的格式设置。

Console API

谈到控制台就不得不说明一下console的API了

console.assert(expression, object)，在被评估的表达式为 false 时向控制台写入一个错误。
console.clear()，清空控制台。
console.context()
console.count(label)，同一个label出现的次数。
console.countReset(label)，重置计数。
console.debug(object [, object, ...])，与 console.log() 作用相同。
console.dir(object)，输出以 JavaScript 形式表示的指定对象。如果正在记录的对象是 HTML 元素，将输出其以 DOM 形式表示的属性。
console.dirxml(object)，如果可以，输出 object 子级元素的 XML 表示形式，否则输出其 JavaScript 表示形式。 在 HTML 和 XML 元素上调用 console.dirxml() 等同于调用 console.log()。
console.error(object [, object, ...])，输出一条类似于 console.log() 的消息，将消息设置成错误样式，并在调用此方法的地方包含一个堆叠追踪。
console.group(object[, object, ...])，启动一个带有可选标题的新日志组。以可视化方式将在 console.group() 后、console.groupEnd() 前发生的所有控制台输出组合在一起。
console.groupCollapsed(object[, object, ...])，创建一个初始处于折叠状态而不是打开状态的新日志组。
console.groupEnd()，关闭日志组。
console.info(object [, object, ...])，输出一条类似 console.log() 的消息，但同时在输出旁显示一个图标（带白色“i”的蓝色圆圈）。
console.memory，返回内存中的JS堆栈的信息。
console.log(object [, object, ...])，在控制台中显示一条消息。将一个或多个对象传递到此方法。每个对象都会进行评估并级联到一个由空格分隔的字符串中。
console.profile([label])，启动一个带有可选标签的 JavaScript CPU 配置文件。要完成配置文件，请调用 console.profileEnd()。 每一个配置文件都会添加到 Profiles 面板中。
console.profileEnd()，停止当前的 JavaScript CPU 分析会话（如果正在进行此会话），并将报告输出到 Profiles 面板中。
console.table(object)，表格方式打印对象。
console.time(label)，启动一个具有关联标签的新计时器。使用相同标签调用 console.timeEnd() 时，定时器将停止，经过的时间将显示在控制台中。计时器值精确到亚毫秒。传递到 time() 和 timeEnd() 的字符串必须匹配，否则计时器不会结束。
console.timeEnd(label)，停止当前的计时器（如果正在运行一个计时器），并将计时器标签和经过的时间输出到控制台。
console.timeStamp([label])，在录制会话期间向 Timeline 添加一个事件。
console.trace(object)，从调用此方法的位置输出一个堆叠追踪。
console.warn(object [, object, ...])，输出一条类似 console.log() 的消息，但同时在记录的消息旁显示一个黄色警告图标。

参考

使用控制台