Cheat Sheet速查表
跳转到主要内容

Chrome DevTools 使用技巧

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

Elements 面板

操作快捷键
打开 DevToolsF12 或 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