该页面提供了一个Chrome开发者工具(DevTools)的使用技巧速查表,包括多种调试操作、网络监控、性能分析等功能的使用技巧。
Elements 面板
| 操作 | 快捷键 |
|---|---|
| 打开 DevTools | F12 或 Ctrl + Shift + I |
| 切换设备工具栏 | Ctrl + Shift + M |
| 刷新并清空缓存 | Ctrl + Shift + R |
| 查看元素的上下文菜单 | 右键 |
| 编辑元素 | Enter |
| 删除元素 | Delete |
| 复制元素 | Ctrl + C |
| 粘贴元素 | Ctrl + V |
| 查看元素的 CSS 规则 | Ctrl + Shift + C |
Console 面板
| 操作 | 快捷键 |
|---|---|
| 打开控制台 | Esc |
| 清空控制台 | Ctrl + L |
| 复制选中的文本 | Ctrl + C |
| 粘贴文本 | Ctrl + V |
| 查看命令历史 | 上箭头 和 下箭头 |
| 查看对象的详细信息 | Ctrl + Shift + C |
Network 面板
| 操作 | 快捷键 |
|---|---|
| 开始/停止记录网络活动 | Ctrl + E |
| 清空网络日志 | Ctrl + R |
| 过滤请求 | Ctrl + F |
| 查看请求的详细信息 | Ctrl + Shift + C |
Performance 面板
| 操作 | 快捷键 |
|---|---|
| 开始/停止录制性能 | Ctrl + E |
| 导出录制的性能 | Ctrl + S |
| 过滤事件 | Ctrl + F |
Memory 面板
| 操作 | 快捷键 |
|---|---|
| 拍摄快照 | Ctrl + S |
| 导出快照 | Ctrl + Shift + S |
| 过滤快照 | Ctrl + F |
Application 面板
| 操作 | 快捷键 |
|---|---|
| 刷新应用程序 | Ctrl + R |
| 清除存储 | Ctrl + Shift + R |
| 过滤数据 | Ctrl + F |
Security 面板
| 操作 | 快捷键 |
|---|---|
| 查看证书 | Ctrl + Shift + C |
| 重新加载页面并绕过缓存 | Ctrl + Shift + R |
Misc
| 操作 | 快捷键 |
|---|---|
| 打开设置 | F1 |
| 切换主题 | Ctrl + Shift + P 然后输入 theme |
| 查看快捷键 | Ctrl + Shift + P 然后输入 shortcuts |