必须打开浏览器开发者工具Network面板并启用录制，才能捕获完整HTTP请求与响应原始数据；需检查录制按钮是否红色、筛选请求类型、查看Headers和Preview响应、导出HAR文件分析、启用持久日志追踪跨页行为。
要精准定位网页加载慢、接口返回异常或资源未加载的原因，必须直接查看每个HTTP请求的完整发出过程和服务器返回的原始数据，而不是依赖控制台报错或肉眼观察页面表现。
打开Network面板并开始捕获
按下 Ctrl + Shift + E（Windows/Linux）或 Cmd + Option + E（macOS），在目标网页处于焦点状态下执行该快捷键，开发者工具将直接打开并切换至 Network 面板。
检查左上角的圆形录制按钮是否为红色高亮状态；若为灰色，点击一次启用监听——【未点亮则所有请求都不会被捕获】。
这一步操作起来很简单，直接按组合键就行，但很多人会忽略录制按钮状态，导致以为没抓到请求，其实是根本没开启监听。
触发请求并筛选目标条目
刷新当前页面（F5 或 Ctrl+R），或手动执行触发网络行为的操作（如点击“提交”按钮、滚动到底部加载更多）。
在顶部过滤框中输入关键词快速缩小范围：输入 xhr 只显示异步接口请求，输入 api 匹配含 api 路径的请求，输入 .js 查看 JavaScript 资源。
右键点击请求列表顶部的列标题 → 勾选“Protocol”“Transferred”“Time”等字段，让关键信息一目了然。
找到目标请求后，单击选中它，右侧将自动展开详情视图。
查看请求头与响应内容
在右侧的 Headers 标签页中，向下滚动展开 “Request Headers” 和 “Response Headers”，这里能看到浏览器实际发了什么（如 Authorization、Cookie）、服务端回了什么（如 Content-Type、Set-Cookie、X-RateLimit-Remaining）。
Response 标签页会根据返回内容类型智能渲染：JSON 自动格式化并支持折叠/展开，HTML 显示可读结构，图片/PDF 则以十六进制或 Base64 形式呈现原始字节流。
若响应是 JSON 但显示为乱码或空白，先确认 Response 标签页右上角是否显示“Preview”而非“Response”——点击“Preview”才能看到解析后的结构化视图。
导出全部请求供离线分析
右键请求列表空白处 → 选择 “Save all as HAR” → 指定保存路径并确认。
生成的 .har 文件本质是 JSON，可用 VS Code 打开，全文搜索任意字段，例如 "Set-Cookie"、"Authorization" 或某个特定参数名，一次性扫描所有请求头与响应体。
注意：.har 文件包含完整响应内容（包括敏感 token 或用户数据），导出后请勿上传至不可信平台或共享给无关人员。
启用持久日志避免跨页丢失记录
第一步：右键请求列表空白区域 → 勾选 “Enable persistent log”。
第二步：执行页面跳转、单页应用路由切换或刷新操作，此前捕获的请求仍保留在列表中。
第三步：在新页面中继续操作，所有历史请求与新请求统一排列，便于追踪多步骤业务流程（如登录→跳转→拉取用户数据→加载权限菜单）。
默认情况下刷新即清空记录，不启用此选项就无法复现跨页问题。
