ELEMENTS

调整css+0.1: option+UP 调整css+10: shift+UP 调整css+100: command+UP

展开元素全部子dom：option+click

h隐藏：选择element的DOM节点，输入h就可以隐藏该DOM，用于截图隐藏敏感信息

DOM节点的拖动：

可以直接用鼠标进行拖动，观察DOM在不同层级的展示

command+UP/DOWN 该DOM节点向上或向下移动

color颜色面板上显示了对比度，超过4.5满足了AA标准，超过7满足AAA标准

box-shadow阴影也可以通过chrome调试

CONSOLE

console.time()开启log计时器，console.timeEnd()关闭log计时器

参数为标签值，标志计时器

console.log()给第一个参数添加%c,第二个参数用css，可以打印出样式

eg：console.log('%casc%csc','color:red')

console.log()技巧，将你要打印的变量放进大括号里，可以方便观察输出的变量

eg：console.log({name, id, others})

console.dir()打印DOM节点

$_: 上次执行结果的引用

添加Chrome插件Console Importer，$i()可以在控制台注入npm包。

eg: $i('moment')

copy()可以在控制台调用，复制功能

eg:copy($_)

控制台可以直接使用await

eg: await navigator.storage.estimate()

monitor() 镜像函数，可以监听某一个函数的使用并打印函数与函数的参数

控制台保存永久表达式：存储输入的JS表达式

源代码定位：command+P

自定义代码片段Snippets保存在浏览器，刷新不会消失：Sources->Snippets

运行方式：command+shift+P打开命令面板，输入!加snippets名称，可以直接运行该snippet

条件断点，可以对某一行添加条件打断点

Chrome Edit：将文件直接拖入Sources下，可以直接在chrome内编码，源文件会做出相同修改

工作区即时同步样式：workspace中在ELEMENT面板修改的css样式会即刻同步到源文件

NetWork: 网络过滤器可以过滤属性 eg：status-code:200

command+shift+P 打开Chrome命令面板

command+[/] 向左/右切换面板

esc：开启/关闭Drawer面板，存储一些不常使用的功能