DevTools 请求与响应检查
在 Network 面板中检查请求方法、Header、Payload、响应体和 Initiator，是接口排障的第一动作。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / 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 面板