Chrome DevTools 常用操作速查表
把 Chrome DevTools 前端调试最常用的操作整理成速查，调试页面时对照查。
返回 开发工具快捷键 8
F12 或 Cmd+Option+I打开 DevTools（macOS）
F12 或 Ctrl+Shift+I打开 DevTools（Win/Linux）
Cmd+Option+J打开 Console（macOS）
Cmd+Option+E打开 Elements（macOS）
Cmd+Shift+C选择元素模式
Cmd+Shift+P打开命令菜单
Cmd+P快速打开文件
Cmd+Shift+M切换设备模拟
Console 命令 12
console.log("message")打印日志
console.table(array)表格形式打印
console.time("label") / console.timeEnd("label")计时
console.count("label")计数
console.group("group") / console.groupEnd()分组
console.assert(condition, "error")断言
console.dir(element)打印 DOM 对象
copy(document.title)复制到剪贴板
$0当前选中的 DOM 元素
$("selector")查询选择器（类似 querySelector）
$$("selector")查询所有匹配元素
monitorEvents(element, "click")监控事件
Elements 调试 9
Edit as HTML编辑元素 HTML
Toggle Edit as HTML切换编辑模式
Force Element State (:hover, :active)强制元素状态
Break on: subtree modificationsDOM 变化断点
Break on: attribute modifications属性变化断点
Store as global variable存储为全局变量
Copy selector复制 CSS 选择器
Copy XPath复制 XPath
Delete node删除节点
Network 分析 10
Disable cache禁用缓存
Throttling: Slow 3G网络限速
Filter: Doc, JS, CSS, Img, XHR按类型过滤
Filter: -domain:example.com排除域名
Filter: status-code:404按状态码过滤
Filter: is:from-cache缓存请求
Replay XHR重放请求
Copy as cURL复制为 cURL 命令
Save as...保存响应
Block request URL拦截请求
Performance 性能 7
Record录制性能数据
Screenshots截图
Memory内存分析
Main thread主线程分析
Flame Chart火焰图
Bottom-Up / Call Tree调用树分析
Summary时间分布
Application 存储 8
Local Storage本地存储
Session Storage会话存储
CookiesCookie 管理
IndexedDBIndexedDB 查看
Cache StorageService Worker 缓存
Clear site data清除站点数据
Service WorkersService Worker 管理
ManifestPWA Manifest
💡 提示
- Console 里 $0 是当前选中的 DOM 元素，可以直接操作。
- Network 面板右键 Copy as cURL 可以复制请求命令到终端重放。
- Performance 面板录制时避免同时开其他标签页，影响准确性。