console/elements 快捷操作
- $$ 类似jQuery选择器/document.querySelectorAll的简写
- $_ 快速获取上一行变量
- $0 配合 elements 面板快速选中 dom
- $0–$4 : 依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0是最新的记录，以此类推
- vue 开发者工具有个类似上面的 $vm0
- 内置函数
copy，将 JavaScript 变量的值快速复制到其他地方 - 内置函数
table，将 JavaScript 变量快速展示到一个 table 中 - 右键
变量/elements里的dom可以存储到全局的临时变量里 - elements 选中 dom 右侧 event listeners 查看 dom 上的事件监听，还能手动移除
- 查看颜色相关样式的时候
Shift + Click可以切换颜色格式 - 当你打开一个在源标签里的文件之后，DevTools能够允许你轻松地跳转到代码里的任意一行，Windows 和 Linux用户只需要按下Ctrl + G (在Mac上使用 Cmd + L ),然后输入你想跳转的行数即可
- 但是如果你希望在源代码中搜索该怎么办？按下Ctrl + Shift + F(在Mac上使用Cmd + Opt + F)，即可在所有已加载的文件中查找一个特定的字符串。这个搜索的方法也支持正则表达式
- sources 面板左下角
{}可以快速格式化，虽然很多时候会很卡 - setting -> preferences -> Sources -> Code folding 开启像ide类似的折叠代码功能
牛逼的命令面板
快捷键
windows：Ctrl + Shift + P
macOS：Cmd + Shift + P
- 输入 Screenshot 选择各种内置截图工具
network 面板小技巧
- 找到一个请求，右键可以将这个URL/域名 block 模拟请求挂掉的情况
- 还有节流模拟低网速信息，禁用缓存，持续显示log之类的
- 图片类请求可以在 preview 面板中右键转换成 data URI
