DevTools 请求与响应检查
用 DevTools Network 面板从请求是否发出、URL/method、Headers、Payload、Response、Initiator 到 Timing 逐层检查一次 HTTP 请求，并形成可复用证据链。
#howto
#growing
#frontend
#browser
#chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Network MOC
- 前置概念: Network 面板, HTTP
- 并列概念: Waterfall 与 Timing
- 关系笔记: Network 面板, 登录态异常排查路线, 流式连接排查路线
DevTools 请求与响应检查
一句话定义
请求与响应检查是指在 Network 面板里把一次请求的关键信息拆开看清楚：发了什么、收到了什么、是谁发的。
核心内容
先看哪几项
- Method / URL / Status
- Request Headers / Response Headers
- Query String / Payload
- Preview / Response
- Initiator
常见问题
- 参数是不是没带对
- Header、Cookie、Token 有没有带上
- 响应体格式是不是和预期不一致
- 这次请求到底是谁触发的
边界与易混淆点
- 看到了错误响应，不代表根因一定在后端
- 看到了正确响应，不代表页面逻辑一定正确
- “是谁发的”通常要结合 Initiator 和 Sources 面板
无提示执行检查
不看正文，在任意真实页面找一条 API 请求并完成：
- 确认请求是否真的发出；
- 写出 method、URL、query、request headers 与 payload；
- 写出 status、response headers 与 body；
- 用 Initiator 找到调用来源；
- 用 Timing 判断慢在连接、等待还是下载；
- 判断是否来自 HTTP cache / Service Worker；
- 给出一个只基于这些证据、不猜业务代码的下一步排查结论。
Digital Biome