跳到主要内容

Chrome DevTools 调试工作流

🔍 DevTools 是前端开发最强大的调试工具。掌握常用面板和技巧，调试效率能提升数倍。

Elements 面板​

常用操作​

操作方法
快速定位元素右键元素→ Inspect
展开全部子节点左键拆展展开箭头
复制 selector右键 → Copy → Copy selector
强制 hover 状态:hov 选项卡→勾选 :hover
辅助莹进云Computed 面板查看最终应用 CSS

CSS 调试​

// 在 Console 中快速查询 CSS
getComputedStyle(document.querySelector('.btn'))

// 查看元素盒模型
// 选中元素 → Computed 面板 → Box Model 图解

Console 面板​

实用命令​

// 获取当前选中元素
$0, $1, $2  // 最近选中的 1/2/3 个元素

// 快速 querySelector
$('.btn')   // document.querySelector('.btn')
$$('.btn')  // document.querySelectorAll('.btn')

// 监听函数调用
monitor(myFunction)   // 函数被调用时输出
unmonitor(myFunction)

// 查看对象拥有的事件
getEventListeners(element)

// 计时
console.time('label')
console.timeEnd('label')

// 表格输出
console.table(array)

Sources 面板与断点​

断点类型​

类型使用场景
普通断点查看某行代码执行时的状态
条件断点只在特定条件下暂停
XHR 断点特定 URL 请求时自动暂停
DOM 断点DOM 变化时暂停
异常断点捆出未捕获异常时暂停

步进操作​

快捷键操作
F8Resume（继续执行）
F10Step Over（不进入函数）
F11Step Into（进入函数）
Shift+F11Step Out（跳出函数）

Network 面板​

关键信息解读​

Name      请求名称/URL
Status    HTTP 状态码
Type      响应类型
Initiator 谁发起的请求
Size      传输大小 / 实际大小
Time      总时间
Waterfall 请求时序展示

常用技巧​

// 在 Network 面板用 Copy → Copy as fetch
// 直接在 Console 重放请求

// 过滤输入不同类型
Fetch/XHR（AJAX请求）/ WS（WebSocket）

Performance 面板​

录制与分析​

1. 点击 Record 按鈕
2. 执行要分析的操作
3. 点击 Stop
4. 分析火焰图：
   - 红色 = 长任务（> 50ms）
   - 紫色 = 渲染
   - 绿色 = 绘制

必要了解的指标​

指标说明
FCP首屏内容绘制
LCP最大内容元素绘制
CLS累积布局偏移
INP交互负责延迟
Long Task底层 JavaScript > 50ms

常见误区​

  • 调试时忽略开启“暂停在未捕获异常处”，丢失异常堆栈信息
  • Network 只看 Status 200 而没有看响应数据结构
  • Performance 录制时没有清除缓存，导致分析结果不准确