Chrome DevTools 操作速查表 - 前端调试工具常用操作大全
靠 console.log 瞎点，顶不上在一张活页上逐步定位。本表覆盖 Elements 与 DOM 断点、Console 技巧、Network 瀑布流与请求重放、Performance 火焰图、Application 存储。当页面在你本机正常、上线却出问题时，用它隔离布局 bug、揪出慢请求、追踪存储泄漏。读完能在浏览器内部完成检查、度量并修复前端问题，而不是靠猜测反复刷新。
典型使用场景
面向需要精确定位前端问题的 Web 开发者与测试工程师。本表把 DevTools 的六个面板串成一条排查主线：Console 用 console.log/table/time/count/assert 与 $0、$()、$$() 做交互式探查和取值；Elements 用 Edit as HTML、强制 :hover 状态、DOM 变化断点定位「样式被谁改了」；Network 用过滤器、限速、Replay XHR、Copy as cURL 复现请求；Performance 录制后用 Main thread、Flame Chart、Call Tree 定位卡顿；Application 检查 Local Storage、Cookies、IndexedDB、Service Workers 排查状态与缓存问题。日常最高频的两招是「Ctrl+Shift+C 选择元素」配合 $0 直接在 Console 里改属性验证，以及把失败请求 Copy as cURL 拿到终端重放。
快捷键 8
F12 或 Cmd+Option+IF12 或 Ctrl+Shift+ICmd+Option+JCmd+Option+ECmd+Shift+CCmd+Shift+PCmd+PCmd+Shift+MConsole 命令 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)copy(document.title)$0$("selector")$$("selector")monitorEvents(element, "click")Elements 调试 9
Edit as HTMLToggle Edit as HTMLForce Element State (:hover, :active)Break on: subtree modificationsBreak on: attribute modificationsStore as global variableCopy selectorCopy XPathDelete nodeNetwork 分析 10
Disable cacheThrottling: Slow 3GFilter: Doc, JS, CSS, Img, XHRFilter: -domain:example.comFilter: status-code:404Filter: is:from-cacheReplay XHRCopy as cURLSave as...Block request URLPerformance 性能 7
RecordScreenshotsMemoryMain threadFlame ChartBottom-Up / Call TreeSummaryApplication 存储 8
Local StorageSession StorageCookiesIndexedDBCache StorageClear site dataService WorkersManifest参数矩阵
| 参数 | 作用 | 示例 |
|---|---|---|
F12 / Cmd+Option+I | 打开 DevTools（macOS） | F12 |
F12 / Ctrl+Shift+I | 打开 DevTools（Win/Linux） | Ctrl + Shift + I |
Cmd+Option+J | 打开 Console（macOS） | Cmd + Option + J |
Cmd+Option+E | 打开 Elements（macOS） | Cmd + Option + E |
Cmd+Shift+C | 选择元素模式 | Cmd + Shift + C |
Cmd+Shift+P | 打开命令菜单 | Cmd + Shift + P |
Cmd+P | 快速打开文件（源码面板） | Cmd + P |
Cmd+Shift+M | 切换设备模拟 | Cmd + Shift + M |
console.log("message") | 打印日志 | console.log("message") |
console.table(array) | 以表格形式打印数组/对象 | console.table(rows) |
console.time("label") / console.timeEnd("label") | 计时，输出耗时 | console.time("render"); console.timeEnd("render"); |
console.count("label") | 统计同名日志出现次数 | console.count("render") |
console.group("group") / console.groupEnd() | 成组输出日志 | console.group("init"); console.groupEnd(); |
console.assert(condition, "error") | 条件不成立时输出断言信息 | console.assert(el, "error") |
console.dir(element) | 展开打印 DOM 对象 | console.dir($0) |
copy(document.title) | 把结果复制到剪贴板 | copy(document.title) |
$0 | 引用当前选中的 DOM 元素 | $0.style.color = "red"; |
$("selector") | 查询单个元素（类似 querySelector） | $(".card") |
$$("selector") | 查询所有匹配元素 | $$("li") |
monitorEvents(element, "click") | 监控目标元素上的事件触发 | monitorEvents($0, "click") |
Edit as HTML | 直接编辑元素 HTML | 在 Elements 中右键 → Edit as HTML |
Force Element State (:hover, :active) | 强制元素状态以便调试交互样式 | 右键节点 → Force Element State → :hover |
Break on: subtree modifications | DOM 子树变化时断下 | 右键节点 → Break on → subtree modifications |
Break on: attribute modifications | 属性变化时断下 | 右键节点 → Break on → attribute modifications |
Store as global variable | 把节点存为全局变量供 Console 使用 | 右键节点 → Store as global variable |
Copy selector / Copy XPath | 复制选择器或 XPath 路径 | 右键节点 → Copy selector |
Delete node | 删除该 DOM 节点 | 右键节点 → Delete node |
Disable cache | 禁用缓存，确保每次都是新资源 | Network 面板勾选 Disable cache |
Throttling: Slow 3G | 网络限速模拟弱网 | Throttling 选 Slow 3G |
Filter: Doc, JS, CSS, Img, XHR | 按资源类型过滤请求 | Filter 输入 XHR |
Filter: -domain:example.com | 按域名排除请求 | Filter 输入 -domain:example.com |
Filter: status-code:404 | 按状态码过滤 | Filter 输入 status-code:404 |
Filter: is:from-cache | 只看缓存命中的请求 | Filter 输入 is:from-cache |
Replay XHR | 重放选中的请求 | 右键请求 → Replay XHR |
Copy as cURL | 复制为 cURL 命令到终端重放 | 右键请求 → Copy as cURL |
Save as... | 把响应体保存到本地 | 右键请求 → Save as... |
Block request URL | 拦截匹配 URL 的请求 | 右键请求 → Block request URL |
Record | 录制性能数据 | Performance 面板 → Record |
Screenshots | 录制期间逐帧截图 | Performance 面板 → Screenshots |
Memory | 内存分析视图 | Performance 面板 → Memory |
Main thread | 主线程任务与耗时分析 | 查看 Main thread 轨道 |
Flame Chart | 火焰图定位耗时函数 | 查看 Flame Chart |
Bottom-Up / Call Tree | 自底向上 / 调用树视角 | 查看 Call Tree |
Summary | 时间分布汇总 | 查看 Summary |
Local Storage / Session Storage | 查看本地/会话存储 | Application → Local Storage |
Cookies | Cookie 管理 | Application → Cookies |
IndexedDB | 查看 IndexedDB 数据 | Application → IndexedDB |
Cache Storage | 查看 Service Worker 缓存 | Application → Cache Storage |
Clear site data | 清除该站点的所有本地数据 | Application → Clear site data |
Service Workers | Service Worker 注册与状态 | Application → Service Workers |
Manifest | 查看 PWA Manifest | Application → Manifest |
易错点与避坑指南
现象改完代码刷新页面，页面行为还是旧的
原因资源走了浏览器缓存，本地改动的 JS/CSS 未被重新拉取。
处置打开 DevTools 后勾选 Network 面板的 Disable cache，或用 Ctrl+Shift+R 强制刷新后再验证。
现象鼠标移上去才出现的样式在 Elements 里看不到，也点不出元素
原因hover 态只在真实指针悬停时生效，静态 DOM 里没有可操作的悬停目标。
处置右键节点用 Force Element State 强制 :hover；或用 Cmd+Shift+C 进入选择元素模式后在 Elements 里直接选中。
现象Console 里打错选择器返回 null，但页面上明明有这个元素
原因元素由框架异步渲染或藏在 shadow DOM 中，或选择器语法写错；也可能拿到的是另一个同名节点。
处置先用 $0 指向选中元素确认它是什么结构，再改用 $$("选择器") 拿到集合并检查 length，避免猜选择器。
现象Console 报错说某个变量未定义，但这个变量明明定义过
原因页面刷新或导航后上下文被重建，先前用 Store as global variable 存的变量已随文档失效。
处置刷新后重新用 Store as global variable 保存，或在 Console 里用 $0 直接重新引用选中元素。
现象接口在页面上能通，但 Network 里看到一堆 404 或状态异常
原因过滤条件或缓存状态影响了观察，也可能请求其实来自 Service Worker 而非网络。
处置用 status-code:404 过滤定位全部失败请求，并勾选 Disable cache 重放；再到 Application → Service Workers 确认是否有缓存层拦截。
现象Performance 录制结果里大量时间标记为 unknown 或录制很短
原因录制期间其它标签页也在活动，或录制时机没覆盖到真正卡顿的操作。
处置录制前只保留当前标签页可见，从触发问题的那一步开始录，录完立刻停止并在 Flame Chart 中定位主线程耗时函数。
现象元素被脚本删掉后 Styles 面板还在显示它改过的样式，误判为样式生效
原因面板保留了已删除节点的最后状态，而该节点已不在文档中，样式自然也不会作用于任何真实元素。
处置在 Elements 里确认节点是否仍存在（必要时 Delete node 后看是否被重新插入）；对已移除的节点，其样式不再代表线上表现。
现象改 Local Storage 或 Cookie 后页面行为没变化，像是没保存上
原因存储面板显示的是当前文档状态的快照；写入需要通过页面自身代码或手动编辑触发，部分站点还有同源与服务端状态校验。
处置手动改值后回车写回并刷新页面确认；若仍无效，用 Console 执行一次写入再读取校验，区分是存储没写成功还是逻辑不读该键。
排障路径
1快速定位「样式到底被谁改掉了」
Cmd+Shift+C 选中元素 → 右键 → Break on → attribute modifications → 重新触发断点会在脚本修改该元素属性时暂停，直接把改动来源的调用栈暴露出来。若样式来自 CSS 覆盖，在 Styles 里看是否有带删除线或来源链接的重复声明逐条禁用验证。
2在 Console 里直接验证样式假设
$0.style.color = "red"; $$(".card").length; copy($0.outerHTML)$0 指向当前选中元素，可直接改样式验证；$$ 返回集合并能看数量；copy 把 outerHTML 复制到剪贴板，方便粘到搜索框或笔记里比对。
3性能计时的最小闭环
console.time("render"); /* 可疑操作 */ console.timeEnd("render");time/timeEnd 会输出同名标签之间的毫秒耗时。若结果很大，用 console.count 统计该代码块被调用了几次——重复触发往往是真正的性能问题来源。
4找出失败请求并在终端复现
Filter 输入 status-code:404 → 右键请求 → Copy as cURL → 终端执行过滤器先收敛出所有失败请求；Copy as cURL 复制出的完整命令含方法、头与凭据，可直接在终端重放或改造成回归脚本，比手工拼参数可靠。
5弱网环境下复现加载问题
勾选 Disable cache → Throttling 选 Slow 3G → 刷新页面限速配合禁缓存能稳定复现「本地好、线上超时」类问题。观察 waterfall 中哪些请求长期 pending，就知道慢在首屏关键路径还是某个懒加载接口。
6录制并分析一次真实卡顿
Performance → Record → 触发操作 → Stop → 查看 Main thread / Flame Chart / Call Tree录制时不要切换标签页以免噪声。Flame Chart 里找最宽的调用块确定耗时函数，Call Tree 从上往下确认调用路径，Summary 给出整体时间分布，三视图合看能快速锁定瓶颈。
7排查本地状态与缓存残留
Application → Local Storage / Cookies / Cache Storage / Service Workers → Clear site data → 刷新先分别检查四个存储位置有无陈旧数据，再统一清除站点数据并刷新。若清除后行为恢复正常，说明问题出在本地状态或 Service Worker 缓存而非代码本身。
命令示例
选中元素后直接取到该节点的引用
Cmd+Shift+C
$0
$$("table tbody tr")
console.table($$("table tbody tr").map(r => r.cells[0].textContent))$0 是 Elements 面板当前高亮的节点，用它做 console 里的操作入口；$$ 返回数组，配合 console.table 能把表格数据一次性铺开，比逐个展开 DOM 快得多。
复制出 cURL 命令复现请求
Network 面板 → 右键请求 → Copy as cURL请求偶发失败但刷新又正常时，把它变成命令行：可以脱离页面单独重放、单独删某个 header 验证是不是某个头导致的问题。粘贴后记得删掉 Cookie/Authorization 再分享给别人。
用状态码过滤快速找出失败请求
Filter: status-code:404
Filter: -domain:example.com页面慢往往是几十个请求叠加的结果。按状态码过滤能立刻看清哪些是真的失败；排除掉第三方域名的埋点和字体请求后，剩下的才是自己代码发出的请求。
给一段代码计时，定位同步阻塞点
console.time("parse");
// 待测代码
console.timeEnd("parse");控制台计时比 Performance 面板轻量，适合二分法缩小范围：把一段长逻辑切成几块分别计时，超时的就是嫌疑段。Performance 面板留给需要火焰图和调用树的场景。
输出
parse: 312.7ms
DOM 被第三方脚本改掉了，用子树断点抓住时机
Break on: subtree modifications「我的节点莫名消失」这类问题，DOM 面板上看不出来是谁删的。在目标元素上打子树断点，脚本一改结构就暂停，直接看调用栈就能定位到具体脚本。
常见坑与注意事项
- Disable cache 勾上后一直忘记关：本地调试看到的是旧资源，你会反复排查一个已经不存在的 bug。
- Copy as cURL 复制出的命令包含 Cookie、Authorization 和 CSRF token，直接粘到 issue、聊天或公开仓库等于泄露登录态。
- Throttling: Slow 3G 设置不会随窗口关闭重置，DevTools 关掉后限速仍在（部分版本），后续所有测试都会莫名变慢。
- Edit as HTML 的改动是临时的：页面一刷新就消失。误改正式 DOM 后别以为已经「修好了」，真正修复必须落到源码文件。
- Clear site data 会清空本地与会话存储、Cookie 和缓存：调试中途执行会丢掉已登录状态和写进 localStorage 的测试数据，之前复现的现场全部作废。
- Force Element State（:hover/:active）只是视觉模拟，不触发真实的 JS 事件；靠它判断点击逻辑是否生效会得出错误结论。
提示
- Console 里 $0 是当前选中的 DOM 元素，可以直接操作。
- Network 面板右键 Copy as cURL 可以复制请求命令到终端重放。
- Performance 面板录制时避免同时开其他标签页，影响准确性。
常见问题
Console 里 $0、$(...) 和 $$(...) 各是什么，怎么配合 Elements 面板用？
在 Elements 面板选中一个节点后，Console 中的 $0 就指向该元素，可直接操作它，如 $0.style.color = "red" 或 $0.remove()；$("selector") 等价于 querySelector，返回单个匹配，$$("selector") 等价于 querySelectorAll，返回 NodeList，可再 .forEach 操作。要把选中的复杂元素传出来，用 Store as global variable 存成全局变量，或 console.dir(element) 打印 DOM 对象属性，而不是 console.log 只打印 "[object HTMLDivElement]" 这种摘要。
怎样用 Console 计时来定位一段代码慢在哪里？
成对使用 console.time("label") 与 console.timeEnd("label")，标签相同即配对，重复开始会告警、缺少配对则不输出。重点是分段包住怀疑的环节，例如 console.time("parse") 包解析、console.time("render") 包渲染，最后在 Console 里看两段各自耗时；耗时长的那段再往下细分。配套还有 console.count("label") 统计调用次数（用来发现循环里多余的调用）、console.group / console.groupEnd 折叠日志、console.assert(condition, "error") 断言不变量。
Network 面板里怎么只留下真正出问题的那几条请求？
过滤框支持多种条件组合：按类型筛 Doc、JS、CSS、Img、XHR 可快速排除静态资源噪声；-domain:example.com 排除某个域的请求；status-code:404 直接锁定所有 404；is:from-cache 专看走缓存的请求。再配合 Disable cache 重新加载，确认问题是否由缓存掩盖；Throttling: Slow 3G 模拟弱网看加载表现；Block request URL 主动拦截某请求验证降级逻辑。定位到目标请求后右键 Copy as cURL，可粘到终端原样重放。
要复现一个只在移动端出现的问题，该怎么设置？
Cmd + Shift + M 切换设备模拟，选定机型后 Elements 面板可以直接改 HTML、Force Element State 可强制 :hover / :active 等状态以便调试交互样式，Cmd+Shift+C 选择元素模式则在真实页面元素上点选。调试存储问题时转到 Application 面板看 Local Storage、Session Storage、Cookies、IndexedDB 和 Cache Storage，并用 Clear site data 清干净再复现，排除旧状态干扰；Service Workers 与 Manifest 面板用于排查 PWA 相关问题。
Performance 面板录出来的火焰图该怎么读？
先点 Record 录制（录制期间避免操作其它标签页，否则会污染数据），再用 Screenshots 截取关键帧定位卡顿时刻。Bottom-Up 视图按 Self Time 从高到低排，直接告诉你最耗 CPU 的函数；Call Tree 视图按调用栈展开，用来定位是谁调用了这段慢代码。Summary 给出各阶段的时间分布，Memory 面板配合使用看 JS 堆是否在录制期间持续上涨。整体思路是先在 Summary 找到最长的时间片，再进 Bottom-Up 找元凶。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。