浏览器 DevTools

1. 面板总览

常用面板速览

面板	用途	打开方式
Elements	DOM 结构查看/编辑、CSS 样式调试（盒模型/伪类/Computed）	默认 / `Cmd+Shift+C`
Console	执行 JS、查看日志/错误/警告、交互式调试	`Cmd+Option+J` / Escape 键从任意面板呼出
Sources	JS 断点调试、文件编辑、Watch/Call Stack/Scope	`Cmd+Option+I` → Sources 标签
Network	网络请求详情、瀑布图、请求阻塞/节流模拟	`Cmd+Option+I` → Network 标签
Performance	帧率/CPU/内存/主线程火焰图录制与分析	`Cmd+Option+I` → Performance 标签
Memory	堆快照、分配时间线、分配采样	`Cmd+Option+I` → Memory 标签
Application	Local Storage / Session Storage / IndexedDB / Cookies / Cache Storage / Service Workers	`Cmd+Option+I` → Application 标签
Lighthouse	性能/可访问性/SEO/PWA 审计评分与改进建议	`Cmd+Option+I` → Lighthouse 标签
Recorder	录制用户操作流程回放测试、导出 Puppeteer/Playwright 脚本	`Cmd+Option+I` → Recorder 标签
Coverage	统计 JS/CSS 文件实际执行/使用比例，定位无用代码	`Cmd+Shift+P` → 输入 `Coverage`
Rendering	强制调色模式、Paint flashing、布局偏移高亮、帧率/GPU 指标	`Cmd+Shift+P` → 输入 `Rendering`
Animations	CSS 动画/Transition 时间线、调速、逐帧检查	`Cmd+Shift+P` → 输入 `Animations`

自定义

Command Menu: Cmd+Shift+P — 快速打开任意面板/功能（输入面板名、设置项、实验性 flag）
Dock side: 右键 DevTools 左上角 dock 按钮切换（左/下/右/分离窗口）
Settings: Cmd+, 或右上角齿轮
- Preferences: 主题（Dark/Light/System）、字体大小、缩进等
- Experiments: 开启实验性功能（Performance insights panel、Recorder 扩展等）
Shortcuts: Settings → Shortcuts 查看/自定义全部快捷键

2. Network 面板（重点）

请求列表各列含义

列	含义
Name	请求 URL 的路径部分（鼠标悬停显示完整 URL）
Status	HTTP 状态码，灰色 = 304（缓存）、红色 = 4xx/5xx
Type	资源类型（document / xhr / fetch / script / stylesheet / font / img / media / websocket / manifest / preflight / ping 等）
Initiator	请求发起来源：Parser（HTML 解析器触发的请求，如 `<img>` `<link>`）、Script（JS 发起的 fetch/XHR）、Redirect（302 跳转）、Other
Size	响应体大小 + 头部开销。两行值：上方为传输大小（gzip/brotli 压缩后）、下方括号内为解压后实际大小。`(memory cache)` / `(disk cache)` 表示命中缓存
Time	总耗时（从请求排队到收到完整响应），包含排队/连接/SSL/请求/响应各阶段
Waterfall	可视化各请求的时序图，并行请求水平排列，串行依赖链可观察阻塞关系

提示: 右键列标题可增删列（Protocol、Priority、Connection ID、Remote Address 等）

请求详情

Headers 面板

General: 请求 URL、Method、Status Code、Remote Address、Referrer Policy
Response Headers: 服务端返回的头部（content-type、cache-control、content-encoding、set-cookie 等）
Request Headers: 客户端发送的头部（user-agent、accept、cookie、authorization 等）
双击头部值可直接编辑并重放请求（右键 → Replay XHR 或 Replay 按钮）

Preview / Response

Preview: 自动格式化 JSON / 图片 / 字体 / HTML 预览（JSON 可展开/折叠）
Response: 原始响应体文本（JSON 字符串/HTML 源码/二进制 Base64）

Timing 分阶段耗时

打开任意请求 → Timing 标签，拆解为以下阶段：

阶段	含义	常见瓶颈
Queueing	请求排队 — 浏览器等待空闲连接（HTTP/1.1 最多 6 并发连接/域名 / 高优先级请求插队）	HTTP/1.1 队头阻塞优化 → 升级 HTTP/2、域名分片、提高优先级
Stalled	连接池中等待可复用连接 / 代理协商	检查代理设置、升级 HTTP/2 减少连接数
DNS Lookup	DNS 解析域名到 IP	DNS 缓存、使用 CDN + 预解析 `<link rel="dns-prefetch">`
Initial Connection	TCP 三次握手	启用 HTTP/2 + 连接复用、升级到 HTTP/3 (QUIC) 减少握手开销
SSL	TLS 握手（协商加密 + 证书验证）	OCSP Stapling、TLS 1.3（1-RTT vs 0-RTT）、HSTS Preload
TTFB	Time To First Byte — 从请求发出到收到第一个响应字节	服务端性能瓶颈（数据库查询/渲染/缓存命中）、CDN 回源延迟
Content Download	接收响应体数据	文件体积过大（启用压缩/分块加载）、网络带宽不足

关键 TTFB 判断标准：

TTFB < 200ms：良好
TTFB 200ms ~ 500ms：需关注
TTFB > 500ms：服务端性能存在明显问题

Initiator 调用栈

鼠标悬停 Initiator 列，显示发起请求的调用栈（函数名 + 文件行号）
点击可直接跳转到 Sources 面板对应源码行
XHR/Fetch 请求的 Initiator → 右键可进入调用栈回溯

瀑布图解读

并行请求：同一时间线上重叠的条形图 — 浏览器同域名并发限制（HTTP/1.1 通常 6 个，HTTP/2 可并行 100+）
串行依赖链：请求 A 完成才发起请求 B（如 CSS 加载完成后才请求引用的字体文件）。右键 → Show dependency chain 可高亮瀑布图中的依赖链路
资源优先级：右键列标题启用 Priority 列
- Highest：HTML 主文档、CSS（关键渲染路径）、<head> 中的阻塞脚本
- High：<body> 中有 async/defer 的脚本、图片（在视口内）
- Medium：非视口图片、预加载资源 <link rel="preload">
- Low：<link rel="prefetch">、懒加载图片 loading="lazy"
- Lowest：没有紧急性的资源
HTTP/1.1 队头阻塞 vs HTTP/2 多路复用：
- HTTP/1.1：一个连接同一时间只能处理一个请求，后续请求等待前一个完成（瀑布图中请求串行排队，灰色虚线 = 等待）
- HTTP/2：单个连接上多路复用多个流，无关请求可并行处理（但 TCP 层仍然存在队头阻塞 — HTTP/3 + QUIC 解决此问题）

过滤与排序

按类型过滤：顶端工具栏按钮（All / XHR / JS / CSS / Font / Img / Media / WS / Manifest / Other）
按域名过滤：domain:api.example.com 只显示该域名请求；-domain:google-analytics.com 排除
正则过滤：输入 /\.(png|jpg)$/ 过滤图片
搜索：Cmd+F 在请求 URL 和响应内容中搜索
属性过滤：status-code:404、method:POST、mime-type:application/json、larger-than:500k、has-overhead:1mb（响应头开销超过 1MB）
Preserve log：✅ 勾选后跨页面跳转保留请求日志（SPA 中路由跳转通常不需要，MPA 调试时需要）
Disable cache：✅ 勾选后禁用浏览器缓存（DevTools 打开时默认生效，关闭后恢复）

Throttling

工具栏下拉选框（Online 旁边）：
- Slow 3G：~100 kbps upload、~400 kbps download、RTT 400ms
- Fast 3G：~750 kbps upload、~1.6 Mbps download、RTT 150ms
- Slow 4G：~2 Mbps upload、~4 Mbps download、RTT 100ms
- Custom：Add... 自定义速率（上传/下载带宽、延迟、丢包率）
CPU Throttling：Performance 面板录制时可同时设置 4x/6x CPU 降速（模拟低端设备）

Blocking

右键任意请求 → Block request URL，下次页面加载该 URL 被屏蔽（Status 显示 (blocked)）
Request blocking 面板（Cmd+Shift+P → 输入 Request blocking）管理所有被阻止的 URL 规则（支持正则）
典型场景：测试第三方 SDK（分析/广告）加载失败时页面降级行为、验证关键字体/图片 fallback

性能分析

DOMContentLoaded：蓝色竖线标记 — HTML 解析完成，DOM 树就绪（无需等待样式/图片/脚本执行完毕）
Load：红色竖线标记 — 页面完全加载（图片、样式、脚本全部加载完成）
关键请求路径：从 Load 线向左回溯 → 找到最后一个阻塞 DCL 的请求 → 分析它的 Initiator → 确认加载依赖链
大请求标记：Size 列 > 1MB 的请求会显示红色警告三角形，点击查看详情
重定向链：Status 列 302/301 请求可展开查看完整的重定向链路

3. Performance 面板（核心）

录制流程

Cmd+Option+I → Performance 标签
点击录制按钮（圆形红色，左上角）开始录制
操作页面（鼠标点击/滚动/切换路由/交互等）
点击停止（Stop，红色方块）
等待约 500ms ~ 2s 分析生成性能报告

快捷模式：Cmd+Shift+E 快速开始/停止录制

结果解读

FPS 图（帧率）

上方第一行绿色柱状条，柱状高度 = 实时帧率
绿色长条：高帧率（接近 60fps），红色标记：出现掉帧（低于 30fps 甚至个位数卡顿）
没有绿色柱状的区域 = 页面没有交互或动画（帧率为 0 正常）
鼠标悬停红色区域可查看具体帧率和超时情况

CPU 图

条形图，各阶段颜色对应不同处理类型：
- 黄色（Loading）：HTML 解析 + 请求处理（Parse HTML、Resource loading）
- 紫色（Scripting）：JavaScript 执行（Evaluate Script、Function Call、GC Event）
- 绿色（Rendering）：样式计算 + 布局 + 渲染树更新（Style、Layout、Recalculate Style）
- 深绿色（Painting）：绘制操作（Paint、Composite Layers）
- 灰色（Other）：浏览器内部后台任务（Idle、Task）
提示：鼠标框选 CPU 高峰期间隔 → 主线程瀑布自动缩放到该时间段

Network 行

请求时序条形图（与 CPU 图同一时间轴对齐）
深色条：高优先级请求；浅色条：低优先级
虚线：请求在排队等待中（可结合 Network 面板 Timing 分析）
鼠标悬停显示 URL 和耗时

Frames 行

每个方形代表一帧（单位 ms）
绿色方块：帧耗时 < 16ms（正常 60fps）
黄色方块：帧耗时 16ms ~ 30ms（轻微掉帧，可能轻微卡顿）
红色方块：帧耗时 > 50ms（长时间卡顿，用户可感知）
点击方块 → 底部 Event Log 显示该帧内的所有事件

Main 线程瀑布（核心）

逐函数火焰图：层次嵌套，上宽下窄 = 调用深度，每个矩形显示函数名 + 耗时
长任务标记：右上角红色三角标记 > 50ms 的 long task（连续占用主线程超过 50ms 的任务，用户感觉卡顿）
交互操作：
- 点击函数块 → Event Log 显示详细调用信息 + 源码位置（app.js:123）
- Cmd+F 搜索函数名快速定位
- 双击函数块进入 Bottom-Up 视图，聚焦该函数及其子调用耗时
- 右键函数 → Show in Sources 面板跳转到源码行
典型瓶颈图形：
- 超宽紫色块 = 长 JS 执行（大循环/复杂计算/序列化/重排大量 DOM）
- 绿色块密集窄条 = 频繁强制重排（Layout Thrashing → 读写 DOM 未批量）
- 黄色块和紫色块交替 = 资源加载阻塞脚本执行

其他线程解读

Raster 线程：光栅化位图工作（绿色块），大量光栅任务表明有过多合成层/大图
GPU 线程：GPU 合成处理（紫色或灰色），GPU 卡顿可能指复合层过于复杂或页面上大量 will-change、3D transform 触发独立合成层
Compositor 线程：合成显示帧准备（绿色块），如果持续繁忙提示 transform/opacity 动画可能导致了过多复合层更新

Timings 标记（关键时间点）

FP（First Paint）：首次像素绘制，白色背景变化为第一个像素
FCP（First Contentful Paint）：首次内容绘制 — 文本/图片首次出现
LCP（Largest Contentful Paint）：最大内容元素（首屏最大图片/标题）渲染完成
DCL（DOMContentLoaded）：HTML 解析完毕
L（Load）：页面完全加载
FMP（First Meaningful Paint）：首次有意义绘制（已弃用但部分版本仍显示）

鼠标悬停各标记查看精确时间点

Summary 面板（耗时占比）

录制完成后默认显示的饼图/柱状图：

类别	含义	颜色
Loading	HTML 解析 + 资源加载	黄色
Scripting	JS 执行（解析/编译/执行/GC）	紫色
Rendering	样式计算 + 布局（Style + Layout）	绿色
Painting	绘制 + 合成（Paint + Composite）	深绿
System	浏览器内部系统任务（垃圾回收/事件分发）	灰色
Idle	空闲时间	白色/无

分析原则：

如果 Scripting > 30% → JS 执行占主线程太长，需代码拆分或 Web Worker
如果 Rendering + Painting 占比高 → 有频繁重排重绘，减少触发布局的操作（批量读写 DOM、使用 transform 代替 top/left）
如果 Loading 占比高 → 资源加载阻塞渲染评估

三种分析视图

视图	用途	切换时机
Bottom-Up	按最底层叶子函数聚合耗时 — 找到"哪个函数占用了最多 CPU 时间"	已定位性能瓶颈区域，想确认耗时最大的具体函数
Call Tree	按调用堆栈展开耗时 — 查看"哪个调用链路最耗时"	想理解性能瓶颈的调用路径（进入路径和子函数分布）
Event Log	时间线所有事件列表 — 按时间顺序列出所有任务	想查看具体事件顺序和耗时细节，或搜索特定事件

三个视图的数据来源相同，展示角度不同，在一个视图中找到入口后可切换到另一个深入
选中某函数后，按 Cmd+Shift+B 切换 Bottom-Up/Call Tree

实战场景：诊断掉帧

录制出现卡顿的操作（滚动/动画/点击）→ 停止录制
Frames 行 找到红色方块 → 点击选中该帧
Main 线程瀑布 查看该帧内耗时任务 → 找到右上角红色三角的 long task
展开 long task 下层子调用 → 找到耗时最长的函数块（宽度最大）
鼠标悬停查看函数名 + 源码位置（componentDidUpdate @ app.js:456）
点击函数块 → 下方 Call Tree / Bottom-Up 视图定位精确耗时代码行
点击函数右键 → Show in Sources panel → 在 Sources 查看具体代码逻辑
分析常见原因：
- 强制同步布局（读取 offsetHeight 后修改样式 → 浏览器强制重新计算布局）
- 大数组遍历/嵌套循环（可拆分到 requestAnimationFrame 或 Web Worker）
- DOM 操作太过频繁（使用 DocumentFragment 批量插入）
- 事件处理器执行时间过长（debounce 高频事件）

4. Lighthouse

审计项与指标

Performance（性能）

指标	中文	权重	含义
FCP	First Contentful Paint	10%	首屏首次出现文本或图片
LCP	Largest Contentful Paint	25%	最大内容元素渲染完成
TBT	Total Blocking Time	30%	FCP 到可交互之间所有 long task 阻塞时间总和
CLS	Cumulative Layout Shift	15%	累积布局偏移量
SI	Speed Index	10%	页面内容可见速度 —— 可视化进度
TTI	Time to Interactive	10%	页面完全可交互时间

其他审计维度

Accessibility（可访问性）：颜色对比度、ARIA 属性、语义化标签、键盘导航
Best Practices（最佳实践）：HTTPS 强制、控制台错误、图片尺寸合适、No document.write()
SEO（搜索引擎优化）：<meta name="description">、<title>、<html lang>、robots.txt、canonical、可索引性
PWA（渐进式 Web 应用）：Service Worker、manifest.json、离线模式、启动屏幕

使用方式

DevTools 内运行

Lighthouse 面板 → 点击 Analyze page load
模式选择：
- Navigation（导航模式）：全新页面加载审计，最常用
- Timespan（时间段模式）：模拟用户操作一段时间（30s ~ 60s）后分析该时段内性能行为，适合分析交互响应
- Snapshot（快照模式）：对当前页面状态快照做一次审计，适合分析特定 UI 状态

Node CLI

npx lighthouse <url> --view        # 运行后自动打开 HTML 报告
npx lighthouse <url> --output=json # JSON 格式输出，适合 CI 解析
npx lighthouse <url> --preset=desktop # 模拟桌面（默认移动端）
npx lighthouse <url> --chrome-flags="--headless" # 无头模式
npx lighthouse <url> --budget=budget.json # 配合性能预算

CI 集成

GitHub Actions / GitLab CI / Jenkins 集成 lighthouse-ci 包
可在 PR 中自动运行并生成分数对比报告
设置分数阈值的性能门禁（如 LCP < 2.5s、Performance 分数 > 90）

报告解读

分数区域：红色（0~49）、橙色（50~89）、绿色（90~100）
Opportunities（优化机会）：按改善幅度排序的项（例如"将图片转为 WebP 可以省约 X KB"）
Diagnostics（诊断）：更多细节（长任务过多、未压缩的资源、预加载机会等）
Passed audits（已通过的审计项）：绿色勾，表明这些检查项已达标
View Original Trace：点击可跳转到 Performance 面板查看该次审计的原始火焰图

局限性

单机环境：结果受机器性能 / 网络状况 / 后台进程影响，同页面多次运行分数可能有 ±10% 浮动
插件干扰：浏览器扩展（广告拦截器/密码管理器/CrxMouse 等）可能修改页面行为 → 审计前清空无痕模式测试
模拟环境 ≠ 真实用户：Lighthouse 使用模拟网络和设备（Moto G4、Slow 4G），不能替代 RUM（Real User Monitoring）
补充方式：RUM 工具（Google Analytics / Datadog RUM / Sentry / New Relic / Web Vitals Library）采集真实用户数据
建议实践：Lighthouse 用于实验室测试（开发阶段定位瓶颈），RUM 用于生产环境监控（用户体验真实数据）

5. Memory 面板

Heap Snapshot（堆快照）

点击 Take snapshot 拍摄当前堆快照
三种视图模式：

视图	作用
Summary	按构造函数分组（`Array`、`Object`、`HTMLElement`、`Closure` 等），列出每组对象数量、Shallow Size、Retained Size
Comparison	对比当前快照与上一个快照 → Delta 列显示差异，找出新增/释放的对象，排查泄漏最常用
Containment	按 GC 引用树组织查看（从 `window` → `global` → 对象层级展开），理解对象引用链路

关键概念：

Shallow Size：对象本身占用的内存大小（不包含其引用对象）
Retained Size：对象本身 + 所有被其引用且无法被 GC 的对象总大小（对象被删除后实际释放的内存量）
分析优先级：按 Retained Size 列降序排序 → 最大的通常是候选泄漏对象

Comparison 对比排查泄漏步骤：

在可能泄漏前拍第一个快照（Baseline）
执行疑似泄漏的操作 N 次（打开/关闭弹窗、进出某个页面路由）
再拍第二个快照
切换到 Comparison 视图，选择对比第一个快照
筛选 Delta 为正数的对象 → 按 New 数量排序 → 查看哪些对象数量异常增长
选中可疑对象 → 查看 Retainers 列表 → 找到引用了它的外层作用域（泄漏源头）

Allocation instrumentation on timeline（分配时间线）

选择该模式 → 点击开始录制 → 正常操作页面 → 停止录制
时间线显示实时内存分配柱状图
- 蓝色柱子：新分配的对象在当前时刻仍存活
- 灰色柱子：新分配的对象在后续被 GC 回收
筛选：勾选 Record allocation stacks 可记录每次分配的调用栈
框选特定时间段的柱子 → 下方显示该时间段内分配的对象列表（按 Retained Size 排序）
典型表现：如果操作后蓝色柱子持续不减 → 分配的对象未被回收 → 内存泄漏

Allocation sampling（分配采样）

低开销模式（适合长时间运行时开启），基于采样估算分配热点
按函数维度统计分配量和分配次数
用途：精确定位哪些函数分配了最多内存 — 而不是哪些对象占用最多内存
结果列出 Function name、Bytes（分配字节）、Count（分配次数）
点击函数行跳转到 Sources 面板查看源码

常见泄漏排查

泄漏类型	现象	排查方法
Detached DOM 节点	节点从 DOM 树移除，但 JS 变量仍持有引用	Heap Snapshot → 搜索 `Detached`（黄色标记）→ 查看 Retainers
闭包持有大对象	函数作用域闭包引用了外部大数组/对象，虽函数已执行完毕但引用未释放	在 Summary 视图中搜索 `Closure`，展开查看内层变量
事件监听未移除	组件销毁时 Event Target 仍挂载着未被 removeEventListener	搜索 `detached` 元素或 `EventListener`，检查 Retainers 中 retain 的监听器
全局变量堆积	`window` 全局对象上的引用逐渐积累	Containment 视图 → `window` → 按 Retained Size 检查属性

规律：如果操作 N 次后 Retained Size 增长是 N 的线性倍数 → 大概率泄漏。若增长呈平台形状（增长后稳定）→ 可能是缓存策略正常。

6. Sources 面板（调试必用）

断点类型

断点类型	添加方式	用途
行断点	点击行号栏（左侧）	最常用，执行到该行暂停
条件断点	右键行号栏 → `Add conditional breakpoint` → 输入表达式	特定条件满足时才暂停（如 `item.id === 42`）
Logpoint	右键行号栏 → `Add logpoint` → 输入表达式	只打印日志不打断点，适合高频调试又不希望反复断下的场景
DOM 断点	Elements 面板 → 右键元素 → `Break on`	三种：`Subtree modifications`（子节点增删）、`Attribute modifications`（属性修改）、`Node removal`（节点移除）
XHR 断点	Sources → XHR/fetch Breakpoints	按 URL 片段匹配拦截 XHR/fetch 请求（输入 `api/user` 即可拦截含该路径的请求）
Event Listener 断点	Sources → Event Listener Breakpoints	按事件类型（click / keyup / resize / scroll 等）暂停
异常断点	Sources 右侧面板	`Pause on caught exceptions`（在捕获异常处暂停） / `Pause on uncaught exceptions`（在未捕获异常处暂停）

调试操作

操作	快捷键	含义
Continue	`F8` / `Cmd+\`	继续执行到下一个断点
Step Over	`F10` / `Cmd+'`	执行当前行，不进入函数内部
Step Into	`F11` / `Cmd+;`	进入当前行调用的函数内部
Step Out	`Shift+F11` / `Shift+Cmd+;`	跳出当前函数，返回到调用方
Step	`F9`	自动选择：当有断点时 Step Over，否则 Continue

右侧调试面板

Call Stack：调用栈回溯列表（从当前暂停的函数向上回溯到入口）。右键 → Copy stack trace 粘贴到 Issue
Scope：当前作用域的变量值
- Local：函数局部变量（this、参数、let/const/var）
- Closure：闭包捕获的外部变量
- Global：window 对象属性
- 双击变量值可直接编辑修改变量（实时生效）
Watch：自定义表达式（如 JSON.stringify(data.items)），实时显示值，表达式可编辑
Blackbox：右键 Sources 面板中的第三方脚本文件 → Blackbox script。调试时自动跳过，不进入其内部、不触发其断点

Snippets（代码片段）

Sources → Snippets 子面板 → + New Snippet 创建
编写可重复运行的 JS 脚本片段，可右键 Run 或通过 Command Menu（输入 !）运行
实用片段示例：

// 打印页面所有事件监听器
monitorEvents(document.body, 'click');

// 监控特定函数调用
const orig = fetch;
window.fetch = function(...args) {
  console.log('fetch called:', args[0]);
  return orig.apply(this, args);
};

7. 其他实用面板

Application

功能	操作	说明
Local Storage / Session Storage	查看和编辑键值对，双击修改/新增/删除	常见：模拟登录态、修改 token、清空缓存数据
IndexedDB	查看数据库名/表/记录、按 Key 搜索、删除数据库	调试使用 IndexedDB 的离线功能
Cookies	查看/编辑/删除所有 Cookie，支持按域名过滤	查看过期时间、Secure/HttpOnly 标记
Cache Storage	查看 Cache API 缓存（Service Worker 使用的缓存）	`Clear site data` 清空全部存储
Back/Forward Cache (bfcache)	测试页面从导航缓存恢复时的性能	面板可查看哪些页面被缓存、被原因排除缓存（如 `unload` 事件阻止 bfcache）
Service Workers	查看已注册的 SW（状态/作用域/版本）、`Update` / `Unregister` / `Push` 模拟通知、`Bypass for network` 跳过 SW 直接走网络	调试 PWA 离线策略
Frames	列出所有 iframe 及子页面上下文 → 选择 iframe 的 Document 查看其 HTML	用于跨域 iframe 内容调试

Coverage

Cmd+Shift+P → 输入 Coverage → 打开 Coverage 面板
点击圆点按钮开始录制（Start instrumenting coverage）
操作页面（尽量覆盖所有功能和路由）
停止录制，列表显示每个 JS/CSS 文件的覆盖率

颜色	含义
红色	未执行的代码行（可 tree-shaking、按需加载或移除）
蓝色	已执行的代码行

点击某文件 → Sources 中高亮显示各行的使用情况（左侧彩色标记）
实战指导：
- JS 大面积红色：考虑 Code Splitting 或 Tree Shaking（检查 Webpack/Rollup 配置）
- CSS 大面积红色：考虑 CSS 按需提取（如 Tailwind 的 purgeCSS 或 unused-css-loader）
- 在等待页面无操作时绿色覆盖率过低 → 主包过大需要拆分

Rendering

功能	用途
Paint Flashing	绿色闪烁的区域就是页面每次重绘的范围 — 检查是否出现了预期之外的重绘（如滚动时全页面重绘）
Layout Shift Regions	蓝色矩形高亮显示发生了 CLS（布局偏移）的区域 — 检查哪些元素偏移导致页面抖动
Layer borders	橙色边框 = 合成层边界，紫色网格 = 子层 — 检查页面是否创建了过多合成层（造成 GPU 内存压力）
Frame Rendering Stats	实时显示 FPS（帧率） + GPU 内存使用 + 帧持续时间（dev 环境性能调优）
Emulate CSS media type / prefers-color-scheme	模拟 `print` / `screen` / `dark` / `light` 模式

Animations

自动捕获页面上的 CSS 动画和 Transition
每条动画的时间线可操作：
- 暂停/播放、拖动滑块查看某一帧的状态
- 调速：25%/50%/100%/200% 速度播放
- 点击动画方块查看其当前样式属性值
适合检查复杂动画序列和过渡时序是否按预期执行

Security

Overview：HTTPS 证书有效性、颁发机构、有效期
Mixed Content：HTTP 资源被 HTTPS 页面引入时的警告列表（阻止的可修复项和已降级的项）
Source：该页面的原始安全策略（CSP 有效、HSTS 是否启用等）

Console 实用技巧

// 格式化输出表格
console.table(users);  // 自动按对象属性列成表格

// 分组输出（可嵌套）
console.group('User Info');
console.log('name:', name);
console.log('age:', age);
console.groupEnd();

// 计时
console.time('api call');
await fetch('/api/data');
console.timeEnd('api call');

// $ 快捷引用
$0              // 当前 Elements 面板选中的 DOM 元素
$1 $2 $3 $4     // 之前选中的历史元素（栈式回溯）
$$('div')       // document.querySelectorAll 缩写（返回数组）
$x('//div')     // XPath 查询

// 监控函数调用
monitor(fetch);          // fetch 被调用时自动 console.log 参数
unmonitor(fetch);        // 停止监控

// 实时表达式
// 点击 Console 最底部 👁（Create Live Expression）
// 输入表达式（如 document.activeElement），实时更新显示值

8. 实战工作流

性能诊断流程

Lighthouse 发现问题                    →          诊断定位               →         修复验证
┌─────────────────────┐         ┌──────────────────────────┐        ┌────────────────────┐
│ Performance 分数低    │         │ Performance 面板          │        │ 重新跑 Performance │
│ TBT 长 / LCP 慢      │ ──────→ │ Main 线程定位长任务函数    │ ─────→ │ 录制验证修复效果     │
│ Opportunities 提示    │         │ Network 瀑布图分析瓶颈     │        │ Lighthouse 重新评分  │
└─────────────────────┘         │ Coverage 找出无用代码      │        └────────────────────┘
                                └──────────────────────────┘

完整流程：

Lighthouse 扫描：获取性能 Baseline（P80 分数），记录 Opportunities（前 5 改善项）
Performance 录制：使用 Cmd+Shift+E 录制 5~10 秒操作，框选性能最差的时间段
Main 线程分析：搜索耗时函数（Cmd+F），右键跳转 Sources；评估是否可 Web Worker / 拆分 / 缓存
网络优化：Network 查看压缩/缓存/CDN 是否生效、资源优先级设置是否合理
Coverage 清理：Red 代码判断是否可移除、动态 import、tree-shaking
复测验证：再次 Lighthouse 评分确认提升，记录优化前后的指标对比

内存泄漏排查流程

Memory 面板录制备份                     →          确认泄漏             →          修复验证
┌──────────────────────┐         ┌──────────────────────┐        ┌────────────────────┐
│ Allocation timeline   │         │ 对比两个 Snapshot     │        │ 再次拍快照确认       │
│ 执行 N 次操作后停止    │ ──────→ │ 找 Detached DOM      │ ─────→ │ Delta 归零 /         │
│ 或两次 Snapshot 对比   │         │ 查 Retainers 泄漏根源  │        │ 蓝色柱子不再增长      │
└──────────────────────┘         │ 确认线性增长规律       │        └────────────────────┘
                                └──────────────────────┘

完整流程：

打开 Memory → 选择 Allocation instrumentation on timeline → 开始录制
执行可能泄漏的操作（打开关闭弹窗 5 次、切路由 5 次）
停止录制 → 观察蓝色柱子是否随操作次数线性增长、不降下去
框选最后一段蓝色柱子 → 按 Retained Size 降序 → 查看哪些对象数量异常
切换到 Heap Snapshot → 连续拍 3 个快照（操作前 → 操作中 → 操作后）→ Comparison 视图
筛选 Detached 节点 → 找到黄色标记的 detached DOM tree → 展开 Retainers 找到持有引用的 JS 代码
修复后再次录制 → 确认蓝色柱子会下降（表明 GC 正常回收）

线上问题调试流程

发现问题                  →           定位              →          修复
┌────────────────┐         ┌──────────────────────┐        ┌────────────────┐
│ 用户反馈/报警    │         │ Network 看接口返回      │        │ Sources 修改重试  │
│ 复现操作步骤     │ ──────→ │ Sources 设置断点调试    │ ─────→ │ Application 清   │
│ 打开 DevTools    │         │ Console 检查变量       │        │ 缓存复现验证      │
└────────────────┘         │ Application 查存储     │        └────────────────┘
                            └──────────────────────┘

完整流程：

复现：确认操作路径 → DevTools 选 Preserve log → Network 面板查看关键 API 响应码和返回值
接口排查：API 返回 500 → 查看 Payload 是否缺少必要字段；返回空数据 → 检查 Request 参数
断点调试：定位到对应的处理函数（Initiator 列）→ Sources 设置条件断点 → 单步跟踪变量
存储检查：Application → Local Storage / Cookies 清理或修改特定项以改变用户状态
Console 验证：使用 $0 引用元素、调用相关函数观察返回值
修复验证：改代码 / 清缓存 / 重刷新 → 确认问题消失、无新异常