Firefox 开发者工具如何查看网络请求的响应预览

接口返回 200 不代表响应内容就符合预期。用 Firefox 排查页面问题时，最省时间的做法是先打开 Network Monitor，重载页面并选中目标请求，再到右侧的 Response 面板看实际响应。JSON 会显示成可展开对象，HTML、CSS 和 JS 可以在格式化视图与原始文本之间切换，图片则直接显示预览。

第1步：从 Web 开发者工具打开 Network Monitor

在 Firefox 页面中按 Cmd + Opt + E（macOS）或 Ctrl + Shift + E（Windows/Linux），也可以打开菜单路径“工具 → 浏览器工具 → Web 开发者工具”，再选择 Network。面板通常出现在浏览器窗口底部。

刚打开时列表可能是空的，这是正常状态。刷新页面或重新执行页面操作，Firefox 才会把新的 HTTP 请求记录下来。看到请求行持续出现，说明记录已经开始；如果仍为空，先检查是否误开了其他开发者工具面板。

第2步：选中目标请求并进入 Response

在请求列表中先按 Type、Method 或 URL 片段缩小范围，再单击目标请求行。右侧详情区域会出现 Headers、Request、Response、Cache、Timings 等标签，点击 Response 查看完整响应。

这里要确认的是“请求对应的响应内容”，而不是列表里的状态码。比如状态码是 200，但响应体可能是错误页、登录跳转后的 HTML，或者 JSON 中的业务错误字段。先看 Response，再回到 Headers 核对 Content-Type，定位会更稳。

第3步：按响应类型核对格式化内容与原始文本

JSON：先看可展开对象

当响应是 JSON 时，Response 面板会以可检查的对象展示内容。展开对象后，重点核对业务状态字段、列表长度和关键 ID；如果字段结构和接口约定不一致，再切换 raw view 看原始字符串，排除格式化显示造成的误判。

HTML、CSS、JS 和图片：看预览是否符合请求

HTML、CSS 和 JS 会显示为文本；HTML 响应还可能在 Response 上方显示渲染预览。图片响应则直接呈现图片预览。若格式化内容看起来正常，但页面仍然异常，切换原始视图并同时查看 Headers 中的 Content-Type、缓存信息和响应大小，通常能发现返回类型或缓存命中不对。

常见误区：为什么 Response 看不到想要的内容

• 没有请求行：打开面板后还没有刷新或触发操作，重载页面再观察。
• 选错请求：同一路径可能有预检、重定向和实际请求，优先选方法与响应类型都符合预期的那一行。
• 只看状态码：200 只能说明 HTTP 层成功，业务失败信息仍要从响应体字段判断。
• 缓存干扰：需要复现网络问题时，在 Network Monitor 工具栏中启用禁用缓存选项，再重新加载。

相关问题

Firefox Network Monitor 能查看 JSON 原文吗？

可以。JSON 默认以可展开对象显示，切换 raw view 后会按原始字符串展示，适合核对转义字符和实际文本。

为什么打开 Network 后列表是空的？

面板刚打开时不会自动补齐过去的请求。刷新页面或再次执行触发请求的操作即可开始记录。

Response 和 Headers 应该先看哪个？

排查业务返回时先看 Response，确认内容后再用 Headers 核对类型、缓存和大小；两者结合比只看状态码可靠。

小结

这项排查可以固定成三步：打开 Network Monitor，选中真正的目标请求，进入 Response 按类型核对内容。遇到“接口成功但页面不对”，先把响应体看清楚，再判断是前端解析、缓存还是服务端返回的问题。