快捷键

shift+enter：Console 中换行

ctrl + shift + D (⌘ + shift + D Mac)：切换控制台位置，右侧底部相互切换

ctrl + [ 和 ctrl + ]：左右切换面板

ctrl + 1 到 ctrl + 9：按索引切换面板（需Settings >>Preferences>>Appearance 打开此功能）

ctrl + f：查找，任何面板都支持

Ctrl + Shift + P (Mac： ⌘ + Shift+ P )：打开命令输入框，可搜索命令等

Ctrl+P：搜索框，输入 ? 可查看帮助

控制台命令

复制内容到剪切板：copy(…)，当然你亦可在 elements 面板直接鼠标右键复制元素

输出结果保存为全局变量：控制台 右击 它，并选择 “Store as global variable” (保存为全局变量) 选项。

保存日志：控制台 右击 选Save as保存日志

截图：Elements 面板，鼠标右击元素选 Capture node screenshoot 截图，或在命令输入框数入 screenshoot 搜索相关命令

控制台布局：在命令输入框输入 layout 搜索

切换主题：命令输入框输入 theme 切换 dark、light 主题

切换页面保留控制台输出：Console 面板 ->Console Setting-> 勾选 Preserve log 即可

控制台脚本

控制台支持直接运行 js 代码，复制回车运行即可，若想储存脚本到浏览器，命令输入框输入 snippet 打开 Snippets 面板进行添加 / 运行脚本，Ctrl+P搜索框键入 ! 可快捷搜索 Snippets。

$0：对我们当前选中的 html 节点的引用。$1是对上一次我们选择的节点的引用，$2是对在那之前选择的节点的引用，等等。一直到$4

$_：上次执行结果

$i：安装 npm 插件，如$i('moment')

$：类似 jQuery 元素选择器，如$('body')

$$：类似 $ 但它返回的是节点的 数组 ，等价于Array.from(document.querySelectorAll('div'))

$x：xpath 选择器，例如$x('/html/body/div[4]/div[2]/div[2]/div[2]/div[2]/div[2]/div')[0].textContent

异步：console 默认就被 async 包裹，因此可以直接执行 promise

res=await fetch('https://hu60.cn/q.php/index.index.json'); 
await res.json()

queryObjects(x)：对象查询，例如

class Person {constructor(name, role) {
 this.name = name;
 this.role = role;
 }
 greet() {return this.getMessage('greeting');
 }
 getMessage(type) {if (type === 'greeting') {return `Hello, I'm ${this.name}!`;
 }
 }
}
let john=new Person('John','kid')
let kids=[new Person('Mary','kid'),new Person('Luke','kid')]
new Person('tom','kid')
queryObjects(Person)

console.assert()：console.assert() 方法在第一个参数为 false 的情况下会在控制台输出信息。

console.assert(document.getElementById("demo"), " 没有 ID 为 'demo' 的元素 ");

console.table()：将集合数组或对象以表格形式展示，例如console.table([{"name":" 张三 ","age":18}]);

执行耗时：如下，括号中定义定时器名称，可以留空

console.time('timer1');
console.timeEnd('timer1');

Live Expression：Console 界面点击眼睛图标，可给当前网站添加动态脚本，执行 250ms 一次。例如可以监控页面某元素是否变化

监听事件：Elements 中选择元素鼠标右键Store as gload variable，一般会保存为 temp1 类似变量名，使用

monitorEvents(temp1); // 开始记录
unmonitorEvents(temp1); // 停止记录
monitorEvents(temp1, ['mouse', 'focus']); // 记录指定事件

Conditional breakpoints：在 Sources 里鼠标右键 Add Conditional breakpoints 或在断点上鼠标右击编辑，当条件符合才执行断点

若条件为 console.log 则会直接执行，因此可以通过断点直接打印数据到控制台

参考：https://www.frontendwingman.com/Chrome/