DEVTOOLS · Chrome DevTools / 效率 / 排错

浏览器调试速查

Chrome DevTools 是前端开发者的瑞士军刀。掌握这些调试技巧，让你在排查问题时快人一步，从 Console 到 Memory 全面精通。

8大调试面板 60+条实用技巧 6个线上问题排查配方

Console 不仅限于 console.log。以下是每个开发者都应该掌握的控制台调试方法。

console.log / warn / error

基础输出方法。支持格式化占位符：%s（字符串）、%d（数字）、%o（对象）、%c（CSS 样式）。

console.log('Hello %s, you are %d years old', 'Alice', 25); console.log('%cStyled text', 'color: #5d9743; font-size: 16px; font-weight: bold'); console.warn('This is a warning'); console.error('This is an error');
console.table

以表格形式展示数组或对象，清晰直观。支持指定显示的列。

const users = [ { id: 1, name: 'Alice', role: 'admin' }, { id: 2, name: 'Bob', role: 'user' } ]; console.table(users); console.table(users, ['name', 'role']); // 只显示指定列
console.group / groupCollapsed

将相关日志分组显示，可折叠，适合组织复杂调试信息。

console.group('User Details'); console.log('Name: Alice'); console.log('Age: 25'); console.group('Address'); console.log('City: Beijing'); console.log('Zip: 100000'); console.groupEnd(); console.groupEnd();
console.time / timeEnd

精确测量代码执行时间，比 Date.now() 更准确。

console.time('fetchUsers'); await fetch('/api/users'); console.timeEnd('fetchUsers'); // 输出: fetchUsers: 235.5 ms
console.trace

打印调用栈追踪，帮助理解函数的调用链。

function foo() { bar(); } function bar() { console.trace('Trace:'); } foo(); // 显示完整调用栈: foo -> bar
console.count / countReset

统计某个标签被调用的次数，适合追踪事件触发频率。

function handleClick() { console.count('Click count'); } // 每次点击输出: Click count: 1, 2, 3...
console.assert

条件性输出错误日志，只有断言为 false 时才打印。

const value = 10; console.assert(value > 100, 'Value should be > 100'); // Assertion failed: Value should be > 100

Network 面板是分析和优化网络请求的核心工具。以下功能可以大幅提升调试效率。

请求过滤与搜索

按类型（XHR/Fetch/JS/CSS/Img）、状态码、域名过滤。使用 Ctrl+F 在全部请求中搜索内容。

filter: -has-response-header:set-cookie // 隐藏带 Set-Cookie 的请求 status-code: 404 // 只显示 404 请求 larger-than: 100k // 只显示大于 100KB 的请求 method: POST // 只显示 POST 请求
请求时序分析

查看每个阶段的耗时（Queueing/Stalled/DNS/Lookup/SSL/Connect/Send/Wait/Receive），定位瓶颈。

// 各阶段含义 Queueing: 请求排队时间（优先级/并行限制） Stalled: 阻塞时间（代理协商） DNS Lookup: DNS 解析时间（首次访问） Initial Connection: TCP 建立时间 SSL: TLS 握手时间 TTFB: 首字节时间（服务端响应） Content Download: 内容下载时间
Copy as cURL

右键请求 → Copy → Copy as cURL。在终端直接重放请求，方便调试和分享。

curl 'https://api.example.com/users' \ -H 'Authorization: Bearer token...' \ -H 'Content-Type: application/json' \ --data-raw '{"name":"Alice"}'
请求拦截与屏蔽

右键请求 → Block request URL 可以屏蔽特定请求模拟失败场景。Network conditions 可模拟慢速网络。

// 模拟场景 - Offline（离线模式） - Slow 3G / Fast 3G（慢速网络） - Custom（自定义延迟和带宽） - User-Agent 覆盖（测试移动端）

Elements 面板是调试 DOM 和 CSS 的主战场，理解其功能可以极大提升样式调试效率。

Styles 面板

实时编辑 CSS 并预览效果。支持：添加/删除/禁用样式、切换伪类（:hover/:focus）、查看继承链、颜色选择器。

// 实用技巧 - 点击颜色方块打开取色器（支持吸管） - 点击元素右侧的 .cls 按钮添加/切换 class - 点击 :hov 按钮切换元素伪类状态 - 按住 Ctrl+点击属性值步进调整数值
Computed 面板

显示元素最终计算后的样式，点击属性可跳转到定义位置。

// 使用场景 - 检查盒模型尺寸（content / padding / border / margin） - 查看实际渲染的字体、颜色、行高 - 追踪 CSS 变量最终值 - 排查样式覆盖问题（被划掉的属性）
Event Listeners

查看元素上绑定的所有事件监听器，支持定位到源码位置和移除监听。

// 使用技巧 - 勾选 Ancestors 查看祖先元素事件 - 点击源码链接跳转到 JS 定义位置 - 右键 Remove 临时移除事件监听 - 查看事件捕获/冒泡阶段设置
DOM Breakpoints

在 DOM 树节点上设置断点，当子节点变化、属性修改或节点被移除时触发。

// 三种断点类型 1. Subtree Modifications: 子节点增删/移动时触发 2. Attribute Modifications: 属性修改时触发 3. Node Removal: 节点被移除时触发

Sources 面板是 JavaScript 调试的核心区域，提供完整的断点调试能力。

条件断点

右键行号 → Add conditional breakpoint。只会在条件满足时暂停，减少不必要的中断。

// 条件断点示例 // 只在用户 ID 为 100 时暂停 user.id === 100 // 只在第 10 次调用时暂停 count > 10 // 只在特定字符串匹配时暂停 url.includes('/api/v2')
Watch 表达式

添加需要持续监控的表达式，断点暂停时自动计算并显示值。

// 常用 Watch 表达式 this document.querySelector('.active') items.filter(i => i.completed).length JSON.stringify(formData, null, 2)
Call Stack 与 Scope

暂停时查看调用栈（Call Stack）和变量作用域（Scope），理解代码执行流程。

// Call Stack 使用技巧 - 点击栈帧跳转到对应调用位置 - 右键 Restart Frame 重新执行当前函数 - Blackbox Script 忽略第三方库代码 // Scope 面板 - Local: 当前函数局部变量 - Closure: 闭包变量 - Global: 全局变量（window）
Snippet 代码片段

在 Sources 面板创建和保存 JS 代码片段，随时执行，适合测试和自动化。

// 常用 Snippet 示例 // 检查页面所有图片是否加载成功 document.querySelectorAll('img').forEach(img => { console.log(img.src, img.complete ? '✅' : '❌'); }); // 导出页面所有链接 console.table([...document.querySelectorAll('a')] .map(a => ({ text: a.textContent.trim(), href: a.href })));

Performance 面板用于分析页面运行时性能，找出卡顿和帧率问题的根源。

性能录制

点击 Record 按钮开始录制，执行需要分析的操作后停止。火焰图展示主线程活动。

// 分析重点 1. FPS 帧率条：绿色表示流畅，红色表示卡顿 2. CPU 占用：查看各阶段的 CPU 使用情况 3. 火焰图：每个任务在时间轴上的分布 4. Long Tasks：超过 50ms 的任务（红色标记） 5. Layout & Paint：检查强制回流和重绘
Long Tasks 检测

超过 50ms 的任务会阻塞主线程，导致页面响应延迟。Performance 面板用红色标记这些任务。

// 常见 Long Tasks 原因 - 复杂 DOM 操作（循环插入节点） - 大量样式计算（选择器性能问题） - 同步 XHR 请求 - 复杂的 JS 计算（数据排序/处理） - 强制同步回流（读写 offsetTop 等）
摘要与详情

录制完成后查看 Summary（各活动耗时占比）和 Bottom-Up（按函数聚合耗时）面板。

// 优化策略 - 如果 Scripting 占比较高：优化 JS 算法 - 如果 Rendering 占比较高：减少 DOM 操作 - 如果 Painting 占比较高：使用 transform/opacity - 如果 Loading 占比较高：优化资源加载策略

Lighthouse 是 Google 开发的自动化审计工具，从多个维度评估网页质量并给出优化建议。

五大审计维度
Performance（性能）: - FCP / LCP / TBT / CLS / SI 核心指标 - 评分权重：FCP 10%, SI 10%, LCP 25%, TBT 30%, CLS 25% Accessibility（可访问性）: - ARIA 属性、颜色对比度、语义化标签 - 键盘导航、屏幕阅读器支持 Best Practices（最佳实践）: - HTTPS、无控制台错误 - 图片格式、字体策略 SEO（搜索引擎优化）: - Meta 标签、结构化数据、移动端适配 - robots.txt、sitemap Progressive Web App（PWA）: - Service Worker、manifest 配置 - 离线支持、可安装性
审计模式

Lighthouse 支持多种运行模式，适应不同场景。

// 三种模式 1. Navigation（默认）：模拟页面全新加载 2. Timespan：模拟用户操作间隔（如点击/滚动） 3. Snapshot：对当前页面状态进行快照审计 // CLI 使用 npx lighthouse https://example.com --view npx lighthouse https://example.com --output=json --output-path=./report.json

Application 面板集中管理浏览器存储和 PWA 相关功能，是调试本地数据和缓存的首选。

Storage 管理

查看和管理 Local Storage、Session Storage、IndexedDB、Cookies、Cache Storage。

// 存储操作技巧 - Local Storage: 右键 → Clear 清除所有 - IndexedDB: 查看/编辑/删除数据库记录 - Cache Storage: 查看 Service Worker 缓存 - Clear site data: 一键清除所有存储 - Cookies: 编辑/删除/添加 Cookie
Service Workers

调试 PWA 的 Service Worker 生命周期。支持更新、卸载、模拟离线。

// 调试功能 - Update: 触发 Service Worker 更新 - Unregister: 注销当前 Service Worker - Push: 模拟推送通知 - Sync: 模拟后台同步 - Offline: 模拟离线状态 - Bypass for network: 跳过缓存从网络加载
Manifest & PWA

查看 Web App Manifest 配置，测试 PWA 安装流程。

// Manifest 检查项 - name/short_name: 应用名称 - icons: 图标配置（192x192, 512x512） - start_url: 启动页面 - display: standalone/fullscreen/minimal-ui - theme_color: 主题色 - 检查 PWA 可安装性条件

Memory 面板用于检测内存泄漏、分析堆快照和监控内存使用趋势。

Heap Snapshot 堆快照

捕获当前 JavaScript 堆的快照，分析对象引用关系，找出内存泄漏。

// 使用步骤 1. 先执行一次操作（如打开页面） 2. Take Snapshot 记录基准 3. 执行可疑操作（如打开/关闭弹窗） 4. Take Snapshot 再次记录 5. 对比两次快照差异 // 分析技巧 - 按 Retained Size 排序，找到占用最大的对象 - 查看 Detached DOM 节点（从 DOM 树移除但仍有 JS 引用的节点） - 检查 closure 变量是否意外持有引用 - 重点关注 Strings / Objects / Arrays 类型
Allocation Timeline

实时记录内存分配情况，在时间轴上查看哪些操作分配了内存。

// 排查步骤 1. Start Recording 开始记录 2. 执行需要监控的操作（如点击按钮） 3. Stop Recording 停止 4. 查看蓝色竖条表示新分配的内存 5. 点击竖条查看分配详情 // 常见内存泄漏模式 - 未清理的定时器（setInterval） - 闭包意外持有大对象 - 未移除的事件监听器 - DOM 节点被 JS 引用但已从 DOM 树移除 - 全局变量/缓存无限增长
Performance Monitor

实时监控 CPU 使用率、JS 堆大小、DOM 节点数、事件监听器数量。

// 监控指标 - CPU usage: CPU 占用百分比 - JS heap size: JS 堆大小（持续增长可能泄漏） - DOM Nodes: DOM 节点数（异常增长可能泄漏） - JS Event Listeners: 事件监听器数量 - Documents: 文档数量 - Frames: 帧率
⭐ 更多调试快捷键 & 技巧
Ctrl+Shift+I 打开 DevTools
Ctrl+Shift+C 检查元素模式
Ctrl+Shift+J 打开 Console 面板
Ctrl+/ 在 Sources 中注释/取消
Ctrl+D 选择下一个相同词
Ctrl+P 按文件名搜索
Ctrl+Shift+F 在所有文件中搜索
Ctrl+] / Ctrl+[ 缩进/取消缩进
Alt+点击 展开所有子节点
F8 恢复脚本执行
F10 单步跳过
F11 单步进入
问题驱动

常见线上问题怎么查

页面白屏

  1. Console 看首个错误。
  2. Network 检查 JS/CSS 是否 404。
  3. Sources 确认 source map 和入口文件。

接口 401 / 403

  1. 检查 Cookie/Token 是否携带。
  2. 查看 CORS 预检。
  3. Copy as cURL 复现。

页面卡顿

  1. Performance 录制交互。
  2. 定位 Long Task。
  3. 看 Layout/Recalculate Style。

内存泄漏

  1. Memory 连续快照。
  2. 看 Detached DOM。
  3. 检查定时器和事件监听。

样式不生效

  1. Elements 看样式被谁覆盖。
  2. 检查选择器优先级。
  3. 确认 media query 是否命中。

移动端错乱

  1. Device Mode 切换 DPR。
  2. 检查 viewport meta。
  3. 排查 fixed + overflow 父级。

Network 深入

Timing 中 DNS/Connect/TTFB 分别对应解析、建连和后端首字节；缓存命中看 Size 与 Status；右键请求可 Copy as cURL。

Console 高级

console.table(users)
console.group('auth')
console.time('render')
monitorEvents($0, 'click')

移动端调试

Android 使用 Chrome Remote Debugging；iOS 使用 Safari Web Inspector。真机调试优先于模拟器。

面板速查

🧰 DevTools 面板速查

Elements 高频操作

  • Styles 面板 :hov 按钮强制 :hover / :focus / :active 伪类。
  • .cls 按钮临时增删 class，方向键步进调节数值。
  • 按 H 隐藏元素、Delete 删除节点，快速验证布局猜想。
  • 选中元素后 $0 可在 Console 中直接引用。

Console 常用 API

  • $0：当前选中元素；$$('a')：querySelectorAll 简写。
  • copy(obj)：复制对象到剪贴板；table(data)：表格化展示。
  • dir(obj)：展开对象属性树；inspect(el)：跳转 Elements。
  • monitorEvents($0, 'click')：监听元素事件触发。

Sources 断点技巧

  • Logpoint 日志断点：右键行号不暂停只打日志，免改代码。
  • 条件断点：填表达式命中才暂停，如 user.id === 100。
  • Blackbox 黑盒脚本：忽略第三方库，调试不被库代码打断。
  • XHR / fetch 断点：URL 匹配即暂停，定位请求发起方。
网络面板

🌐 网络面板进阶

瀑布图关键列

  • Waterfall 颜色条：浅灰排队、深灰阻塞、绿色等待（TTFB）、蓝色下载。
  • Size 列对比传输与解压体积，验证 gzip / br 压缩是否生效。
  • Priority 列检查请求优先级，关键资源是否被低优请求挤占。

过滤与重放

  • 过滤指令：status-code:404、domain:api、method:POST、larger-than:100k。
  • 右键请求 → Copy → Copy as fetch，在 Console 修改参数后直接重放。
  • Replay XHR：右键一键重发请求，快速复现接口问题。

弱网模拟与请求屏蔽

  • Throttling 选 Slow 3G / Fast 3G，或自定义上下行带宽与延迟。
  • 右键请求 → Block request URL 屏蔽请求，模拟资源加载失败。
  • Network conditions 覆盖 User-Agent，配合测试移动端降级逻辑。
性能与存储

⚡ 性能与存储

Performance 录制解读

  • 主线程火焰图：优先看红色三角 Long Task（超过 50ms）。
  • Summary：Scripting / Rendering / Painting 占比指向优化方向。
  • Timings 轨道标记 DCL / LCP / FP，对照交互发生时间。
  • Layout 事件密集说明存在读写交替的强制回流。

Lighthouse 核心指标

  • FCP 首次内容绘制：首屏出现首个内容的时间。
  • LCP 最大内容绘制：主内容加载完成，目标 ≤ 2.5s。
  • CLS 累积布局偏移：页面稳定性，目标 < 0.1。
  • INP 交互到下次绘制：交互响应性，目标 < 200ms。

Application 存储管理

  • Cookies：双击 Value 可编辑，右键删除，排查登录态问题。
  • Local Storage：键值双击即改，快速验证持久化逻辑。
  • Clear site data：一键清空站点全部存储，模拟首次访问。
  • Storage 配额视图定位异常增长的缓存与数据库。
排错路线

🐾 症状 → 第一现场路线图

🕳️ 白屏

Console + Network → 首个红色报错与第一个失败的 Doc/JS 请求就是第一现场，多半是入口脚本 404 或顶层 JS 异常。

🔌 接口报错

Network → 点开请求先看状态码再看 Payload / Response：4xx 查前端参数与鉴权头，5xx 拿着请求体去找后端日志。

🎨 样式不生效

Elements + Computed → 在 Computed 搜目标属性，看被划掉的声明与来源文件，优先级和继承关系一目了然。

🖱️ 事件不触发

Event Listeners + DOM 断点 → 确认监听器挂在哪个祖先、是否被 stopPropagation 拦截，再用 Subtree Modifications 断点抓删节点的凶手。

🫧 内存持续涨

Memory → 可疑操作前后各拍一张 Heap Snapshot 对比，重点看 Detached DOM 与持续增长的闭包引用。

🐢 首屏慢

Performance + Lighthouse → 录一次加载看 Long Task 与瀑布图找瓶颈，再跑 Lighthouse 按 LCP / CLS 建议逐项修。