Chrome DevTools 实用技巧：前端调试 / 性能分析 / 网络抓包 / 移动端调试 / 自动化

Mon, 15 Jun 2020 00:00:00 +0800

一、为什么写这篇 DevTools 实战

Chrome DevTools（F12）是前端工程师的"瑞士军刀"——调试 DOM / CSS、抓包分析、性能 profiling、移动端调试、自动化脚本、Storage 调试……全在一个面板里。

本文整理 7 大场景 的实战技巧，所有操作都用 DevTools 自身能力，不涉及任何"内容解锁 / 反爬"功能。

范围说明：本文仅讨论 DevTools 用于前端开发、性能优化、网络分析、自动化测试等正当用途。DevTools 是浏览器内置调试工具，与"破解 / 反爬"无关。

二、场景 1：DOM / CSS 调试

2.1 实时改 CSS

1
2
3
4
5
6
7
8


1. 打开任意网页
2. 鼠标右键 → "检查"（或按 F12）
3. Elements 面板左侧是 DOM 树
4. 选中一个元素 → 右侧 "Styles" 面板是它的所有 CSS
5. 任意属性可以：
 - 取消勾选 = 临时禁用
 - 双击值 = 临时改值
 - 加新属性 = 临时添加

实时改的样式只在你本地生效，刷新页面会重置——这是验证 UI 调整的最快方法。

2.2 改完记下来

1
2
3


- 右侧 Styles 面板 → 点击选择器链接
- 跳到 Sources 面板对应 CSS 文件
- 复制修改后的内容到本地项目

2.3 计算样式 / Box Model

1
2
3
4


Elements → Computed 面板：
- 选中元素所有"最终生效"的 CSS（不是源码）
- 包含继承值、用户代理默认值
- Box Model 图：可视化 margin / border / padding / content

2.4 强制伪类（Force Pseudo-class）

1
2
3


Elements 面板 → 选中元素 → :hov 按钮
→ 勾选 :hover / :active / :focus / :visited
→ 即使鼠标不在元素上也能看到 :hover 状态

三、场景 2：Console 调试

3.1 基础 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 格式化输出
console.log('普通');
console.info('信息');
console.warn('警告');
console.error('错误');
console.table([{name:'Alice',age:30},{name:'Bob',age:25}]);
console.group('Group 1');
console.log('inside group');
console.groupEnd();

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

// 断言
console.assert(x > 0, 'x 必须为正');

// 对象展开
console.dir(document.body, {depth: 2});

3.2 引用前一次结果

1
2
3
4
5


$_ // 上一次 console 输出的结果
$0~$4 // Elements 面板最近选中的 5 个元素
$('#id') // document.querySelector 的简写
$$('div') // document.querySelectorAll 的简写
$x('//div') // XPath 选择

3.3 Live Expression（实时表达式）

1
2
3
4


Console 面板 → 点眼睛图标
→ 输入 document.title
→ 顶部实时显示当前 title（不打印）
→ 适合观察"页面是否被 XHR 改了状态"

四、场景 3：断点调试（Sources）

4.1 三种断点

1
2
3


1. 行断点：Sources 面板点击行号
2. 条件断点：右键行号 → "Add conditional breakpoint" → 写表达式
3. 事件断点：Sources → Event Listener Breakpoints → 勾选事件

4.2 调试控制

1
2
3
4
5


F8 / F5 继续执行
F10 / F6 单步跳过（Step Over）
F11 / F7 单步进入（Step Into）
Shift + F11 单步退出（Step Out）
Ctrl + F8 临时禁用所有断点

4.3 黑盒脚本（Blackbox）

1
2
3
4


Settings → Blackboxing → Add pattern
→ 写 /node_modules/.*\.js$
→ 调试时跳过第三方库（jQuery / React 源码）
→ 只调试自己写的代码

4.4 监听 XHR / Fetch

1
2
3


Sources → XHR/fetch Breakpoints → Add pattern
→ 写 /api/
→ 每次请求 /api/xxx 都会自动断点到"发起请求"那一行

五、场景 4：Network 抓包

5.1 基础

1
2
3
4
5


Network 面板：
- All / XHR / JS / CSS / Img / Media / Doc
- 红色 = 失败
- Status / Method / Type / Size / Time / Waterfall
- 右键 → Copy → Copy as cURL（命令行重放）

5.2 限流（Throttling）

1
2
3
4
5
6
7


Network 面板 → Throttling 下拉
- Online（默认）
- Slow 3G
- Fast 3G
- Slow 4G
- Fast 4G
- Add custom...（自定义）

用途：模拟弱网环境，看页面加载逻辑、占位符、loading 状态。

5.3 拦截请求（Block / Override）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Block request URL：
- Network 面板 → 右键请求 → Block request URL
- 输入匹配的 URL pattern（如 /api/track）
- 此后该请求永远 404
- 用于：屏蔽埋点、屏蔽广告追踪、看页面"无脚本"渲染

Override content：
- Sources 面板 → Overrides 子标签 → Select folder for overrides
- 本地文件夹映射到页面
- 改本地文件 → 页面立即生效，**不刷新**（比 Live Reload 还快）

5.4 HAR 导出 / 导入

1
2
3


Network 面板 → 右键 → Save all as HAR with content
→ 同事拿到 HAR → Network 面板 → 右键 → Import HAR file
→ 复现你的网络环境（含响应体）

六、场景 5：Performance 性能分析

6.1 录制

1
2
3
4


1. Performance 面板 → 点录制按钮（或 Cmd/Ctrl + E）
2. 正常操作页面（点击、滚动、加载）
3. 再次点录制按钮停止
4. 自动生成火焰图 + Summary

6.2 看什么

1
2
3
4
5


- FCP（First Contentful Paint） 首次内容绘制
- LCP（Largest Contentful Paint） 最大内容绘制
- TTI（Time to Interactive） 可交互时间
- TBT（Total Blocking Time） 长任务阻塞
- CLS（Cumulative Layout Shift） 布局偏移

6.3 找长任务

1
2
3


Main 线程的黄色/红色块 = 长任务（> 50ms）
→ 点击 → 下方 Summary 看哪个函数耗时
→ 双击跳到 Sources 面板对应代码

6.4 Lighthouse

1
2
3


Lighthouse 面板 → 选择 Performance / Accessibility / Best Practices / SEO
→ Generate report
→ 100 分制报告 + 优化建议

七、场景 6：Application 存储 / 缓存

7.1 存储面板

1
2
3
4
5
6
7


Application 面板：
- Local Storage key-value 持久存储
- Session Storage 关闭标签页清空
- IndexedDB 大容量结构化数据
- Cookies HTTP-only 也能看
- Cache Storage Service Worker 缓存
- Service Workers 注册的 SW

7.2 清空存储

1
2


Application → Storage → Clear site data
- 一次清空 LocalStorage / SessionStorage / Cookies / Cache / IndexedDB / SW

7.3 模拟离线

1
2


Application → Service Workers → Offline 勾选
→ 即使网络正常，页面也走 SW 缓存（验证离线体验）

八、场景 7：移动端调试

8.1 设备模式

1
2
3
4


1. F12 → 点左上角"切换设备"图标（或 Cmd/Ctrl + Shift + M）
2. 选预设设备（iPhone / iPad / Galaxy / Pixel）
3. 或自定义分辨率、DPR
4. 顶部还有 Throttling 滑块（模拟低端机）

8.2 真机调试（USB）

1
2
3
4
5
6
7
8
9


Android：
1. 手机开"开发者选项" + "USB 调试"
2. USB 连电脑
3. Chrome 地址栏 → chrome://inspect → 看到设备
4. 点 inspect → 弹出 DevTools（**调试的是真机上的页面**）

iOS：
1. Mac Safari → Develop → [你的 iPhone] → 选择页面
2. 弹出 Web Inspector（**功能类似 Chrome DevTools**）

8.3 远程调试（真机网页）

1
2
3
4


1. 电脑和手机连同一 Wi-Fi
2. 电脑 DevTools → Settings → Devices → Add custom device
3. 输入手机的 IP + 端口（手机开 Chrome → 设置 → 启用 USB 调试 + 端口转发）
4. 电脑 DevTools 直接看到手机页面

九、场景 8：自动化 / 脚本

9.1 Snippet（代码片段）

1
2
3


Sources 面板 → Snippets 子标签 → New snippet
→ 写 JS 代码 → Ctrl + Enter 执行
→ 代码片段永久保存，下次 F12 还在

示例：批量改 DOM

1
2
3
4
5


// 改所有外部链接为新标签打开
document.querySelectorAll('a[href^="http"]').forEach(a => {
 a.target = '_blank';
 a.rel = 'noopener noreferrer';
});

9.2 Recorder（录制脚本）

1
2
3
4
5
6


DevTools → Recorder 面板（或 Performance → Record → Save as profile）
1. 点 Start recording
2. 手动操作页面（点击、输入、滚动）
3. Stop
4. 自动生成 Playwright / Puppeteer 代码
5. 复用 → CI 自动化

1
2
3
4
5
6
7


Cmd/Ctrl + Shift + P → 调出命令面板
常用：
- "Show Coverage" 代码覆盖率（哪些 JS/CSS 没用到）
- "Capture full size screenshot" 全页截图
- "Capture node screenshot" 选中节点截图
- "Show sensors" 模拟地理位置 / 设备方向
- "Show rendering" 模拟视觉缺陷（色盲 / 视力模糊）

十、调试技巧速查

场景	面板	关键操作
改样式看效果	Elements / Styles	改属性、勾掉属性、:hov
看 JS 错误	Console	console.error 红色 / 点击跳转
调试 JS 逻辑	Sources	断点、单步、Watch
抓包看请求	Network	Filter、Copy as cURL、Throttle
性能分析	Performance / Lighthouse	录制、火焰图、FCP/LCP/CLS
改存储	Application	LocalStorage / Cookies / SW
移动端	Toggle device	选设备、Throttle
自动化	Snippets / Recorder	写代码 / 录操作

十一、Chrome DevTools 隐藏技巧 5 个

Ctrl + Click（Mac Cmd + Click）Sources 文件名 → 在文件树中定位
Console 多行编辑 → 输入 Shift + Enter 换行（不提交）
拖拽 DOM 节点 → Elements 面板的 DOM 节点可以拖动改位置（不持久）
双击 Elements 标签 → 展开/折叠所有子节点
右键图片 → Copy image as data URI → 一键复制 base64（适合做占位图）

十二、常见 5 个坑

改 CSS 不生效 → 用了 !important 优先级覆盖、或选择器错了（用 Computed 面板看"实际生效的样式来源"）
断点不触发 → 异步代码用 await 没断到，可能在 setTimeout / 微任务里（断点放在 Promise 链的 then 里）
Network 没记录到请求 → 过滤框清空、或请求是 sendBeacon（Network 仍会记录，但 Properties 看不到）
Performance 录制很慢 → 关闭其他标签页、Chrome 进程
移动端调试断连 → USB 接触不良 / 手机锁屏（设"充电时不锁屏"）

F12 on Liangweidong's blog