返回知识库

调试与质量 · 定位工具

网络面板Network Inspector

用网络面板把界面症状拆成可观察的请求事实(方法、URL、状态码、载荷摘要、耗时),并连到下一步行动。

先触发操作,再读网络列表

完成第 0 步后,点模拟站点的登录/刷新等动作:看 Network 列表物件如何冒出新行,再用过滤器聚焦失败请求,选中后复制脱敏证据。

第 0 步 · 先打开网络面板没打开面板时,下面的请求列表没有真实对照物。按这三步打开,再触发一次操作。

  1. 打开开发者工具

    Chrome / Edge:按 F12,或 macOS ⌘⌥I(Windows 也可用 Ctrl+Shift+I)。

  2. 点开 Network / 网络

    在顶部标签里找到「Network」或「网络」。还没看到请求时,先别急着下结论。

  3. 让问题再出现一次

    刷新页面,或再点一次出问题的按钮,列表才会出现新请求。若仍是空的,检查过滤条件是否把请求藏起来了。

模拟站点点按钮复现问题
Network0 / 0 requests
请求列表

尚无请求。点左侧动作后,新行会出现在这里。

门控未达成:先过滤到「仅失败」,选中一条 4xx 或 5xx 请求,列表不能为空。
证据区空:未复制任何请求材料。

网络列表现在是空的。先完成第 0 步,再点左侧动作——看列表物件如何冒出新行。

写进问题报告时,这里读到的方法、路径、状态码和脱敏后的错误摘要,就是「网络证据」的来源——和问题报告、控制台日志一起用。

面板里刚读到的字段,怎么接到下一步

上面每条记录的「恢复方向」和「下一步」就是知识点:4xx 回到输入或会话,5xx 保留意图并重试,未见请求先查前端触发。不要把业务校验和服务端宕机混成一句「接口坏了」。

  • 未见请求:确认按钮是否触发、前端是否拦截、过滤条件是否藏住了请求。
  • 4xx:检查请求内容、字段校验与登录会话是否过期;失败时保留已填内容。
  • 5xx:保留列表筛选、表单草稿等意图,提供重试;可用 aria-live 说明「服务暂时不可用」。
  • 复制排查材料时先脱敏登录凭证、Cookie 和个人数据;只分享方法、路径、状态码与错误结构。
  • 同时看 Request、Response、Timing:确认请求已发出,再判断是返回错了还是前端没渲染。

什么时候该用网络面板

适合怀疑数据交换出错时;不适合纯样式或纯前端状态问题。

适合

按钮点了没变化、列表突然变空、登录失败却无提示——先确认请求有没有发出、状态码是什么。

不适合单独依赖

纯 CSS 错位、本地校验未提交、或已确认请求 200 且内容正确时,应改查渲染与状态管理。

同一登录失败:正例与反例

正确做法是用面板证据对齐界面;错误做法是假装成功,或把敏感信息原样外传。

正例对照 422 与字段错误

登录无反馈时打开 Network:看到 POST /api/login → 422,响应写明 password is required。对照请求内容确认密码为空,在表单标出错误并保留邮箱。

差异:状态码、发出内容、界面提示三者一致。
反例把失败当成功,或把登录凭证原样外传

收到 503 却清空订单列表显示「暂无数据」;或把完整登录凭证贴到工单。前者误导用户,后者泄露会话。分享时只保留脱敏后的方法、路径和错误结构。

差异:只改了一处——忽略失败语义,或跳过脱敏。

快速自测

看到 422 时,第一步更应该做什么?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。