command

Command 菜单可以帮助我们快速找到那些被隐藏起来的功能

• 在 Chrome 的调试打开的情况下 按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )

代码块

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行

console

$

$0

在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。

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

?

在 console 中就是对这一大串函数 document.querySelector 的别名

?('div')

$_

$_ 是对上次执行的结果的 引用

$i

Tools 里面来使用 npm 插件，运行 $i('lodash') 或者 $i('moment') 几秒钟后，可以获取到 lodash / momentjs

---

console 默认就被 async 包裹

系统数据

Storage 系统的 占用数 和 空闲数

await navigator.storage.estimate()

console.table

如果有一个 数组 (或者是 类数组 的对象，或者就是一个 对象 )需要打印，可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来，它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以 缩放 甚至 还可以排序

console.dir

console.dir 可以查看 DOM 节点所关联到的真实的 js 对象 ，并且查看他的 属性

给 logs 加上时间戳

你可以在设置(在调试工具中的 ⋮ 下拉中找到它，或者按下 F1 )中来开启或者使用 command

show timestamps

监测执行时间

• console.time() — 开启一个计时器
• console.timeEnd() — 结束计时并且将结果在 console 中打印出来

如果你想一次记录多件事，可以往这些函数中传入不同的标签值。(例如: console.time('loading') ， console.timeEnd('loading') )

Network

Network 面板中的过滤器输入框接受字符串或正则表达式，对应显示匹配的请求，可以过滤很多属性 例如 method 或者 mime-type

元素面板

通过 'h' 来隐藏元素

拖动 & 放置 元素

使用 control (按钮) 来移动元素

Drawer

在 DevTools（任何选项卡）中时，按 [esc] 来显示它，再次按 [esc] 隐藏它

点击主页面在 Drawer的 console 面板前面的 ⋮ 图标来打开完整选项列表。另外，也可以打开 command Menu ，然后输入 Drawer 来打开

• Animations
• Changes
• Console
• Coverage
• Network conditions
• Performance monitor
• Quick source
• Remote devices
• Rendering
• Request blocking
• Search
• Sensors
• What’s new