1. 打开浏览器开发者工具按下F12键或右键点击网页选择“检查”即可打开开发者工具。主流的浏览器Chrome、Firefox、Edge均内置此功能。打开后界面通常会显示多个面板如 Elements、Console、Network 等。2. 定位并进入 Network 面板在开发者工具顶部或侧边栏找到“Network”标签并点击。该面板专门用于监控和分析页面加载过程中产生的所有网络请求。3. 捕获并筛选 API 请求开始记录确保面板左上角的红色录制按钮⏺️处于激活状态通常默认开启。如果显示为灰色点击一下即可开始记录。触发请求在网页上进行操作如点击按钮、提交表单、滚动页面相关的 API 请求会自动出现在下方的请求列表中。筛选请求在筛选器Filter输入框中可以输入关键词如接口路径的一部分来快速定位。点击“XHR”或“Fetch”按钮可以只显示由 JavaScript 发起的 API 请求过滤掉图片、CSS 等静态资源。4. 查看具体的请求详情在请求列表中找到目标请求通常通过Name或Path识别点击该行右侧会展开详细信息面板主要包含以下关键标签页标签页核心作用与查看内容应用场景举例Headers查看请求方法GET/POST、URL、状态码Status、请求头Request Headers和响应头Response Headers。确认接口地址、请求方式GET/POST/PUT/DELETE、身份验证令牌Authorization头、内容类型Content-Type等。Payload查看前端发送给后端的具体参数。这是分析传参的核心区域。分析 POST 请求提交的表单数据Form Data或 JSON 结构体Request Payload。Response查看服务器返回的原始数据通常是 JSON 格式。获取接口返回的结果用于验证功能或排查错误。Preview以友好、可折叠的树形结构展示 Response 数据便于阅读复杂嵌套的 JSON。快速查看返回的用户信息列表、文章详情等结构化数据。Timing分析请求各阶段的耗时用于性能优化。定位是网络延迟TTFB 时间长还是下载慢Content Download 时间长导致接口慢。5. 重点分析请求参数PayloadPayload标签页是查看前端传递参数的关键根据请求类型和Content-Type的不同主要有以下三种形式参数类型在 Network 面板中的显示典型Content-Type示例与说明Query String参数会直接拼接在URL的?之后在Headers标签页的Request URL中可见。通常无特定头或为application/x-www-form-urlencodedGET /api/users?nameJohnpage1Form Data在Payload标签页中会以Form Data部分展示显示为键值对列表。application/x-www-form-urlencoded或multipart/form-data含文件上传传统的表单提交如usernameadminpassword123456Request Payload在Payload标签页中会以Request Payload部分展示通常是一个JSON 字符串。application/json{username: admin, password: 123456}查看示例代码模拟一个登录请求的分析假设在 Network 面板看到一个名为api/login的 POST 请求点击后查看 Payload 标签。# 在 Headers 标签中可见 Request URL: https://example.com/api/login Request Method: POST Content-Type: application/json # 在 Payload 标签中可见 (Request Payload) { username: zhangsan, password: encrypted_abc123 }解读这表明前端通过 POST 方法以 JSON 格式向/api/login接口传递了用户名和密码参数。6. 常见问题与调试技巧请求未捕获确保在触发操作前已打开 Network 面板并开启录制。可勾选“Preserve log”选项防止页面跳转时清空记录。请求失败如状态码4xx/5xx4xx客户端错误检查 Payload 参数格式、必填项是否缺失、权限令牌如 Authorization是否有效。5xx服务器错误需后端检查服务器日志可能为代码异常或数据库连接问题。跨域问题CORS如果请求状态为(blocked:cors)或控制台报 CORS 错误需要后端在响应头中配置Access-Control-Allow-Origin等字段。复制请求在请求上右键选择“Copy”-“Copy as cURL”或“Copy as fetch”可直接在命令行或代码中复现该请求用于进一步测试。参考来源详细教程如何从前端查看调用接口、传参及返回结果附带图片案例详细教程如何从前端查看调用接口、传参及返回结果附带图片案例网络调试的艺术利用浏览器Network工具优化你的网站RexUniNLU Web界面调试技巧Chrome开发者工具查看API请求与响应从浏览器Network面板看懂POST请求Query、Form Data、Payload三者的实战区别与选择谷歌浏览器开发者工具监听Fun-ASR请求