Chrome DevTools 高级调试技巧：让前端调试效率提升 10 倍的实用指南

不止于 console.log

Chrome DevTools 是前端开发者最强大的武器。但大多数开发者只用到了 10% 的功能。掌握这些高级技巧，调试效率能提升一个数量级。

1. Sources 调试技巧

// 条件断点：右键断点 → Edit breakpoint
// 只在 userId === 123 时暂停
function processUser(user) {
    // 条件：user.id === 123
    const result = heavyComputation(user);
    return result;
}

// Logpoint：不暂停执行，只打印
// 等同于 console.log，但不修改代码

// XHR/Fetch 断点
// Sources → XHR Breakpoints → 添加 URL 匹配规则

2. Performance 面板

// 性能分析流程
// 1. 点击 Record（或 Ctrl+E）
// 2. 执行需要分析的操作
// 3. 停止录制，分析结果

// 重点关注：
// - Main 线程的 Long Tasks（>50ms 标红）
// - Frames：检查是否有掉帧
// - Summary：自底向上查看占用最高的函数
// - 启用 CPU throttling（6x slowdown）模拟低端设备

3. Network 优化

// 请求链分析：Initiator 列
// 查看是否有请求瀑布（前一个完成才能发下一个）

// 资源优先级
// Priority 列：High/Medium/Low
// 关键资源设置高优先级：
<link rel="preload" href="critical.css" as="style" />

// 瀑布流优化检查项
// ✓ 关键资源是否在 HTML 前 100 行引用
// ✓ 是否有阻塞渲染的同步 JS
// ✓ DNS-Prefetch / Preconnect 是否设置
// ✓ 静态资源是否带 hash 实现长缓存

4. Memory 泄露排查

// 内存泄露排查流程
// 1. Memory → Heap snapshot → 拍快照
// 2. 执行可疑操作
// 3. 再拍快照
// 4. Comparison（对比视图）→ 查看新增对象

// 常见泄露模式
// EventListener 未移除
// setInterval 未清除
// 闭包引用 DOM 节点
// Detached DOM 节点

5. 生产力命令速查

Ctrl+Shift+P → 命令面板
  "Capture full size screenshot" → 全页面截图
  "Coverage" → 代码覆盖率检测
  "Rendering" → 显示 FPS、Paint flashing、Layout Shift
  "Layers" → 3D 图层分析
  "Sensors" → 模拟地理位置、设备方向

Ctrl+Shift+M → 设备模拟
$0 → Console 中访问当前选中的元素
$_ → 上一次 Console 求值结果
monitor(funcName) → 监听函数调用

总结

Chrome DevTools 是一个强大的调试平台。越熟练使用这些高级功能，排查问题的速度就越快，开发效率就越高。