必须用chrome network面板实时捕获http请求，包括地址、方法、状态码和耗时；需先打开开发者工具、切换至network标签、确保录制按钮为红色，再刷新或交互触发请求，最后通过类型筛选、关键词搜索或语法过滤定位目标请求并查看headers、response等详情。
要分析网页与服务器之间实际发送了哪些HTTP请求、每个请求的地址、方法、状态码和耗时，必须用Chrome内置的Network面板实时捕获并逐条查看——不能靠肉眼观察URL或猜接口行为，否则会漏掉AJAX、fetch、预加载等隐藏请求。
打开并激活Network面板
先确保开发者工具处于可用状态，再进入网络监控界面。这一步没做对，后续所有请求都捕获不到。
在目标网页任意空白处右键 → 选择“检查”，或直接按 【Ctrl + Shift + I（Windows/Linux）】 / 【Cmd + Option + I（macOS）】 快捷键打开开发者工具。
点击顶部标签栏中的“Network”选项卡，进入网络请求监控界面。
确认左上角圆形录制按钮为红色；若显示灰色，必须点击一次才能开始捕获——很多用户卡在这步，误以为面板已自动工作。
捕获真实请求流
Network面板不会自动记录历史请求，必须主动触发页面行为才能生成数据。刷新是最基础、最可靠的捕获方式。
点击左上角红色圆点确保录制已开启 → 按 Ctrl + R（Windows/Linux）或 Cmd + R（macOS）刷新当前页面。
页面重新加载后，左侧列表将逐行显示所有发出的请求：HTML主文档、CSS、JS、图片、字体、XHR、Fetch等。每条记录包含Name、Method、Status、Type、Size、Time六列关键信息。
若想捕获用户点击后的请求（比如登录、搜索、翻页），不要提前刷新——先勾选左上角“Preserve log”，再执行操作，否则跳转后历史记录会被清空。
快速定位目标请求
面对几十上百条请求，靠滚动查找效率极低。必须用过滤组合缩小范围，聚焦到真正关心的那一条。
方法一：按资源类型筛选
点击上方预设按钮，如 XHR（仅显示XMLHttpRequest）、Fetch（仅显示fetch API调用）、JS、CSS、Img等。API调试优先点 XHR 或 Fetch。
方法二：用关键词搜索
在顶部过滤框中输入接口路径片段，例如 /api/login、/v3/user、.json，系统实时匹配Name列内容。
方法三：用语法精确过滤
输入 【method:POST】 只看提交类请求；输入 【status-code:401】 查未授权错误；输入 【domain:example.com】 锁定某域名下的全部请求。
查看请求详情
点击左侧任一请求条目，右侧展开Headers、Preview、Response、Timing等子标签页。这是分析问题的核心环节。
第一步：确认请求是否发往预期地址
在Headers标签页顶部，核对Request URL和Request Method是否与你预期一致——URL拼错、method写成GET却该用POST，是前端最常见的两类硬伤。
第二步：检查请求头是否携带必要凭证
向下滚动至Request Headers区域，重点看Authorization、Cookie、X-Token、Content-Type字段是否存在且格式正确。缺少Authorization头导致401，Content-Type写成text/plain却发JSON，都会让后端拒绝处理。
第三步：验证响应内容是否符合业务逻辑
切换到Response标签页，查看原始返回体；若为JSON，可切到Preview标签页看格式化结构——这里能一眼发现字段名拼错、嵌套层级异常、空数组而非空对象等典型问题。
