Chrome DevTools 使用技巧

该页面提供了一个Chrome开发者工具(DevTools)的使用技巧速查表,包括多种调试操作、网络监控、性能分析等功能的使用技巧。

Elements 面板

操作 快捷键
打开 DevTools F12Ctrl + 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