Console 面板应该算是开发中最常用的面板之一，主要用途：一个是查看记录log消息，一个是运行Js代码（表达式）。通过这两个用途，提高页码开发的效率，使得开发更加容易。
面板简介
打开面板
按Control+ Shift+J或Command+ Option+ J(Mac)。
或者打开命令行输入Show console ，选择panle打开
打开Show Console Drawer，Drawer会在面板下发展示，内容同console面板一致
面板布局
主要分为三部分：顶部工具栏、左侧消息类型tab、中间是记录消息展示内容，以及js表单时编写窗口
点击控制左侧tab面板展示/隐藏
点击清空中间面板内容
点击添加一个live expression
点击 切换 js 运行上下文
消息过滤，支持文本输入，正则输入，消息类型多选
点击设置面板信息展示传送门
- Hide Network 隐藏网络消息，如404，500。
- Preserve Log 跨页面保留消息。默认重新加载页，控制台会清空。
- Selected Context Only 仅使用 top 选择的js上下文
- Group Similar 消息分组
- Log XmlHttpRequests 记录
XMLHttpRequest/Fetch消息 - Eager Evaluation 表达式值预览。当您在控制台中键入 JavaScript 表达式时，Eager Evaluation会显示该表达式返回值的预览。
- Autocomplete From History 当您输入表达式时，控制台的自动完成弹出窗口会显示您之前运行的表达式。这些表达式以
>字符开头。
- Evaluate triggers user activation 用户激活活动信息
- window.open()
- Show CORS errors in console 在console显示/隐藏 cors错误信息
查看记录消息
记录消息演示
- 打开演示。
2、操作演示查看js记录的消息
- 点击
Log Info按钮，Hello, Console!被记录到控制台。
通过点击 消息记录右侧的文件log.js:2，可打开Source面板查看打印记录位置代码。
- 点击
Log Warning按钮，Abandon Hope All Ye Who Enter被记录到控制台。这种消息是警告消息。
通过点击 消息记录右侧的文件log.js:12，可打开Source面板查看打印记录位置代码。
展开查看代码调用栈跟踪，先调用的函数会在底部。
可以通过console.trace()记录堆栈跟踪
- 点击
Log Error，I'm sorry, Dave. I'm afraid I can't do that.被记录到控制台。这种消息是错误消息。
通过点击 消息记录右侧的文件log.js:16，可打开Source面板查看打印记录位置代码。
展开查看代码调用栈跟踪，先调用的函数会在底部。
- 点击
Log Table打印表格
查看源码
- 点击
Log Group打印列表
查看源码，先声明console.group(label)分组，在console.info(msg)打印记录，最后console.groupEnd(label)结束
- 点击
Log Custom打印自定义消息
查看源码，使用console.log表达式消息，样式参数
- 查看404消息，资源请求404报错
- 查看Error消息，通常为js代码异常导致
- 查看Violation消息
消息过滤
类型过滤
消息类型主要根据严重级别分为：Verbose、Info、Warning或Error。
- 单击Log Levels下拉菜单选择展示消息类型（能多选类型）
- 或者通过左侧类型tab切换展示对应消息类型记录（只能看一种类型）
- message 所有消息
- user message 用户手动打印显示
- error
Error类型消息 - warning
Warning类型消息 - info
Info类型消息 - verbose
Verbose类型消息
展开tab能够查看对应消息来源（源码位置）
文本过滤
- 普通文本过滤：文本框输入内容进行过滤
- 正则过滤：
/^L/
运行js代码
控制台是一个REPL，代表读取、评估、打印和循环。它读取您输入的 JavaScript，评估您的代码，打印出表达式的结果，然后循环回到第一步。
最常用来获取DOM元素、测试代码表达式、或者获取api方法（autocomplete），需要有js基础，这里不多介绍了。
输入表达式回车是直接进行运行，如果需要换行，需要先按住Shift（command）
使用live expression实时查看js值
单击创建实时表达式 。将出现实时表达式文本框。
输入js表达式，这里输入a+b
重新赋值 a=3，表达式自动求值
console 消息格式化
格式化说明符
可以使用格式说明符来格式化控制台消息。格式说明符以百分比字符 (%) 开头，以指示数据类型（整数、浮点数等）的“类型字符”结束。
const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);
chorme devtools 格式化说明符列表
| 说明符 | 输出 |
|---|---|
%s | 将值格式化为字符串 |
%i或者%d | 将值格式化为整数 |
%f | 将值格式化为浮点值 |
%o | 将值格式化为可展开的 DOM 元素 |
%O | 将值格式化为可扩展的 JavaScript 对象 |
%c | 将 CSS 样式规则应用于第二个参数指定的输出字符串 |
运行在一个消息同时使用多个格式说明符
console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
需要注意类型转换规则
消息自定义样式
- 您可以使用
%c格式说明符通过 CSS 设置控制台消息的样式。
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);
- 带有 ANSI 转义序列的样式，可以使用ANSI 转义序列来设置控制台消息的样式
\x1B[𝘗1;…;𝘗nm
𝘗1-𝘗n是SGR（选择图形再现）参数的有效子序列。𝘗1-𝘗n可以省略，在这种情况下，它的值为零。\x1B[m是\x1B[0m的简写，其中显示属性将被重置。
console.log('\x1B[41;93;4mHello\x1B[m');
console api
主要是一些消息记录api，将消息从 js代码 写入控制台
console.clear()
清除控制台消息
console.log(obj [, obj, ...])
类型：Info
向控制台打印一条消息。
console.log('log');
console.table(array)
类型：Info
将对象数组记录为表
console.table([
{
first: 'René',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
]);
console.dir(obj)
类型：Info
打印指定对象的 JSON 表示
console.dir(document.head);
console.dirxml(DOM)
类型：Info
打印节点
console.dirxml(document);
console.trace()
类型：Info
将堆栈跟踪打印到控制台
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
console.group(label) / console.groupCollapsed(label) / console.groupEnd()
视觉上将消息组合在一起，直到console.groupEnd(label)被调用。
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
console.time([label]) / console.timeEnd()
启动一个新的计时器。调用console.timeEnd([label])以停止计时器并将经过的时间打印到控制台
console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
console.count([label])
类型：Info
同一标签计数，默认default，从0开始
console.count();
console.count('coffee');
console.count();
console.count();
console.countReset([label])
重置计数，从0开始
console.debug(Obj [, Obj, ...])
类型：Verbose
console.warn(obj [, obj, ...])
类型：Warning
向控制台打印警告
console.warn('warn');
console.error(obj [, obj,...])
类型：Error
打印object到控制台，将其格式化为错误，并包含堆栈跟踪。
console.error("I'm sorry, Dave. I'm afraid I can't do that.");
console.assert(expression, object)
类型：Error
expression = true时向控制台写入错误。
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});
console 实体API
$_ 返回最近计算的表达式的值
$0-$4 返回最近引用的五个DOM元素或者最近引用的五个堆对象
最近选择排在前面，如新选择的使用$0引用。选择通过Element面板或者进行直接选择
最近选择 <button id="hello"></button>
$(selector [, startNode]) 返回对具有指定 CSS 选择器的第一个 DOM 元素的引用
当使用一个参数调用时，此函数是document.querySelector()函数的别名。
此函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。此参数的默认值为document。
$$(selector [, satrtNode]) 返回与给定 CSS 选择器匹配的元素数组
等效于调用document.querySelectorAll()。
$x(path [, startNode]) 返回与给定 XPath 表达式匹配的 DOM 元素数组
返回页面上的所有元素<button>：
$x("//button")
返回包含元素<a>的所有元素<p>：
$x("//p[a]")
clear() 清除控制台历史记录
console.clear() 的别名
copy(obj) 复制对象字符串到剪贴板
debug(func) 指定函数调试，调用此函数，自动中断跳转Source面板
undebug(func) 取消调试，以便在调用该函数时不再调用调试器
dir(obj) 显示指定对象的属性列表
console.dir() 的别名
dirxml(obj) 打印指定对象的 XML 表示
console.dirxml() 的别名
table(array) 使用表格格式打印对象数据
console.table() 的别名
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
inspect(obj/func) 检查指定的元素或对象
会自动打开合适的面板（Element、Profiles堆对象）
inspect(document.body);
自动跳转Element面板选中body元素
getEventListeners(DOM) 返回绑定到DOM元素的监听器
返回值是一个对象，其中包含每个已注册事件类型的数组。每个数组的成员都是每种类型注册的侦听器的对象。
getEventListeners(document);
keys(obj) 返回指定对象的键数组
Object.keys()别名
let player1 = { "name": "Ted", "level": 42 };
keys(player1)
values(obj) 返回指定对象的值数组
Object.values()别名
let player1 = { "name": "Ted", "level": 42 };
values(player1)
monitor(func) 监听函数调用
当调用指定的函数时，控制台会记录一条消息，指示函数名称以及在调用函数时传递给函数的参数。
function sum(x, y) {
return x + y;
}
monitor(sum);
unmonitor(func) 取消函数监听
monitorEvent(DOM [, event])
当指定对象上发生指定事件之一时，事件对象将记录到控制台。您可以指定要监视的单个事件、事件数组或映射到预定义事件集合的通用事件“类型”之一。
预定义事件集合
monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])
monitorEvents(window, "key");
unmonitorEvents(DOM[, event]) 取消指定对象事件监听
profile([name]) / profileEnd([name])
使用可选名称启动 JavaScript CPU 分析会话
补充
- 在控制台输入
document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页编辑
