Chrome DevTools Network 如何保留跨页面请求

页面一跳转，Network 面板里的请求就只剩新页面的几行，通常不是请求消失，而是没有打开 Preserve log。在 Chrome DevTools 中进入 Network，勾选 Preserve log 后，再执行链接跳转或刷新，旧页面和新页面的请求会继续留在同一份请求表里。先确认 Record network log 仍在记录，再用 Name、Status、Type 和 Initiator 定位目标请求。

官方地址：https://developer.chrome.com/docs/devtools/

打开 Network 面板并确认记录状态

先打开目标页面的 DevTools，在顶部工具栏选择 Network。如果看不到它，可以按 Command + Shift + P（macOS）或 Control + Shift + P（Windows、Linux、ChromeOS）打开 Command 菜单，输入 Network，再选择 Show Network panel。

进入后先看工具栏左侧的录制按钮。红色记录状态表示 Network 正在收集请求；如果按钮是停止状态，先点击它恢复记录。此时刷新一次页面，Requests 表至少应出现 document 或脚本请求。

勾选 Preserve log 保留跨页面请求

在 Network 面板的操作栏找到 Preserve log，点击复选框使其保持选中。它解决的是“页面发生新的完整加载后，旧请求是否仍留在列表”这个问题；它不会替代录制按钮，也不会让 DevTools 关闭后继续采集。

如果当前列表已经混有多次调试记录，先点击 Clear 清空，再保持 Preserve log 选中。这样更容易区分跳转前后的请求，也避免把上一轮的 404 或接口重试误认为本次结果。

跨页面导航后核对请求是否还在

保持 Preserve log 选中，先记住当前页面的 document 请求，然后点击一个会触发完整导航的链接，或直接刷新。回到 Network 表后，按 Name 查看旧页面与新页面的 document；按 Status 关注 200、3xx、4xx 等状态，按 Type 区分 document、fetch、xhr 和 script，最后通过 Initiator 判断请求是页面解析、脚本还是重定向触发的。

看到两次导航的请求同时存在，就说明保留开关已生效。若只看到新页面，先不要改接口代码：检查 Preserve log 是否真的选中、Record network log 是否在录制，以及是否在跳转后误点了 Clear。过滤框里残留的关键词也可能把旧请求隐藏，清空过滤条件后再判断。

空列表和误判的回退处理

排查时可以按“录制—保留—过滤—重现”的顺序回退：

1. 确认录制按钮处于工作状态；停止录制时，后续刷新不会产生新记录。
2. 确认 Preserve log 仍被勾选；它只影响页面加载之间的保留，不负责补回已经清掉的历史。
3. 清空 Name、Status、Type 等过滤条件，并展开隐藏的筛选栏，避免请求被筛掉。
4. 点击 Clear 后重新加载一次，再执行同样的跳转，观察 Requests 表从 document 到接口请求的变化。

单页应用内部的路由切换可能没有完整刷新，日志保留现象会和传统页面跳转不同。此时仍应以 Requests 表里实际出现的 fetch、xhr 或 document 请求为准，不要因为地址栏变化就假设一定产生了新的 document 请求。

常见问题

Preserve log 和 Record network log 是同一个开关吗？

不是。Record network log 决定是否继续记录，Preserve log 决定发生页面加载后是否保留已有记录，排查跨页问题时通常需要同时确认。

勾选后为什么列表仍然看不到旧请求？

常见原因是勾选发生在跳转之后、Record network log 已停止、过滤条件隐藏了请求，或中途点击了 Clear。清空筛选并重新从一次刷新开始重现最稳妥。

刷新后看到两个 document 就代表接口成功了吗？

不代表。它只能说明两次页面加载被保留下来；接口是否成功还要结合 Status、Type、Initiator，以及请求详情中的响应内容判断。