调试前端项目时，最让人头疼的莫过于：几十个接口发得正欢，开发者工具的 Network 面板却一条记录都刷不出来。

问题肉眼可见，但面板却空空如也——接口地址无从查起，响应状态看不到，加载耗时更是无从分析。

这种情况，通常不是什么玄学，而是几个容易被忽略的开关被“误关”了。

确认 Network 录制是否已启动

Network 面板默认打开时并不会自动开始监听，它更像一个空壳。想要捕获请求，必须先手动激活录制按钮。

面板左上角有一个红色圆点图标，它是录制开关。请确认该按钮处于高亮红色状态——如果显示为灰色或没有填充，单击一次就能开启实时捕获。

必须开启录制，否则所有请求都不会被记录，这一点最容易被忽视。

检查并重置过滤器设置

过滤功能可能是“隐形杀手”。请依次完成以下三步：

• 点击左上角的漏斗图标，删除 Filter 输入框中所有字符，按回车确认。
• 在漏斗下方的请求类型标签栏中，直接点击 “All”，避免被过滤到只显示 XHR、JS 或 Img 等子类。
• 取消勾选 “Has blocked cookies”“3rd-party”和“Blocked” 这三项复选框。它们一旦启用，会静默过滤掉大量合法请求。

启用关键调试开关

调试开关有两个必须要启用：

• “Preserve log”：位于录制按钮右侧。勾选后，页面跳转或刷新时不会清空历史请求记录，对调试多页流程或 Pjax 导航场景尤其有用。
• “Disable cache”：强缓存命中时，浏览器根本不发送请求，面板自然就空了。启用此开关可强制走真实网络链路，让所有资源重新拉取。

操作完成后，按 Ctrl+R（Windows）或 Cmd+R（Mac） 刷新页面。此时应当立即看到 HTML 文档请求出现在列表顶部。

排除扩展与隐私模式干扰

广告拦截器、隐私保护类扩展经常劫持或屏蔽 fetch/XHR 调用，导致 Network 面板收不到原始请求信号。

此时，可以打开无痕窗口（Ctrl+Shift+P → 新建无痕窗口），访问同一网页，按 Ctrl+Shift+E 唤出开发者工具，切换到 Network 面板，然后刷新。

如果无痕模式下正常显示，说明问题出在某个已安装扩展上，需要逐个禁用排查。

验证 Service Worker 是否静默接手请求

如果页面注册了 Service Worker，它可能在后台拦截所有 fetch 请求并返回缓存，导致 Network 面板只能看到 “from ServiceWorker”，而看不到真实的网络交互细节。

解决方法有两种：

• 按下 Ctrl+Shift+A 打开“附加组件管理器”，暂时禁用所有与 PWA、离线缓存相关的扩展或脚本。
• 在 Network 面板的任意空白处右键，选择 “Disable Service Workers”，然后刷新页面。

这样就能还原出真实的网络请求路径。

《夸克》非常好用的免费AI浏览器

下载APP查看