DevTools Network 面板
Network 面板用于查看请求、响应、Header、Timing、Initiator、缓存命中和资源加载链路。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: 浏览器开发者工具 MOC, DevTools Network MOC, HTTP 与前端网络请求
- 前置概念: HTTP, 浏览器缓存体系, [[http-cache-storage|浏览器内部缓存存储]]
- 并列概念: Application 面板, Security / Issues 面板, Performance 面板
- 易混淆概念: Console 面板
- 关系笔记: 浏览器开发者工具
DevTools Network 面板
一句话定义
Network 面板是前端排查请求、资源加载、缓存和链路耗时的证据中心。
核心内容
它最适合回答什么问题
- 请求有没有真的发出去
- 发给了谁、带了什么参数和头
- 响应内容、状态码、重定向链路是什么
- 是走网络、内存缓存、磁盘缓存，还是 Service Worker
- 加载慢是卡在连接、等待、下载还是主线程处理
重点看哪些信息
- Name / Type / Status：资源类别和结果
- Headers：请求头、响应头、Cookie、缓存语义
- Payload：请求体
- Preview / Response：返回内容
- Initiator：是谁触发了请求
- Timing / Waterfall：耗时分布
常见使用场景
- 接口 401 / 403 / 500
- 请求参数错、Header 漏带、Cookie 不生效
- 缓存不符合预期
- SSE / WebSocket / 流式请求异常
- 页面首屏加载慢
常用操作
- 开
Preserve log保留跳转前后的请求 - 开
Disable cache排除本地缓存干扰 - 用过滤器只看
fetch/xhr、doc、img等类型 - 结合
Initiator看是谁触发资源加载
继续往下拆
边界与易混淆点
- Network 看到的是请求证据，不直接解释 JS 逻辑为什么发出了这个请求
- 如果请求正确但页面结果不对，下一步常要去 Sources 面板 或 Elements 面板
- 缓存、Cookie、Service Worker 问题经常要和 Application 面板 联动看