Chrome DevTools Network面板状态丢失是因为其按页面实例隔离，每次刷新或跨origin跳转（含端口变化）均重置筛选、折叠等交互态；可通过chrome://inspect复用调试进程、localStorage手动存取或代理统一入口解决。
Chrome DevTools 里切换服务器时 Network 面板状态为什么会丢？
因为 devtools 默认按「页面实例」隔离状态，每次刷新或跳转到新域名（哪怕只是换了个端口如 localhost:3000 → localhost:3001），就视为全新页面，network 面板的筛选条件、保留的请求、折叠状态全被重置。
- 这不是 bug，是设计使然：不同 origin 的调试上下文天然隔离
- 即使你用
window.open()打开同域新页，只要 URL 不完全一致（比如 query 参数不同），DevTools 也可能不复用旧面板 -
Preserve log开关只保请求列表，不保筛选器、排序、高亮、展开/折叠等交互态
用 chrome://inspect + 多标签页手动同步调试入口
绕过页面级隔离，把调试目标从「某个 URL」变成「某个 renderer 进程」，状态就能跨页面延续——前提是这些页面跑在同一个 Chrome 实例里。
- 所有目标服务器页面都用同一 Chrome 窗口打开（不要新开窗口）
- 确保它们都是普通 tab，不是隐身模式或独立 app 窗口（后者进程隔离更严格）
- 访问
chrome://inspect，点开Configure...，添加你的本地开发地址（如localhost:*），这样多个localhost:xxx页面会统一出现在这里 - 点击任一页面的
inspect，DevTools 会复用已打开的窗口（而非新建），此时Network面板的筛选条件、保留请求等状态大概率还在
localStorage + 自定义脚本手动存取 Network 关键状态
DevTools 本身不开放 API 读写面板状态，但你可以用注入脚本捕获用户操作，存在 localStorage 里，再在新页面加载时还原。适用于高频切换且状态简单的场景（比如固定几个筛选关键词）。
- 监听
Network面板的筛选输入框变化（需用document.querySelector('[aria-label="Filter"]')定位） - 把当前值存进
localStorage.setItem('network-filter', value) - 页面加载后，用 content script 读取并触发一次输入事件模拟粘贴（注意要等 DevTools 面板 ready，可用
setTimeout或 MutationObserver 监听 DOM） - ⚠️ 限制明显：无法还原请求详情展开状态、时间轴缩放比例、响应体查看位置等深层状态
真正稳定的方案：用代理层统一入口，避免物理切换
与其在多个服务器间跳来跳去，不如让前端始终只连一个地址（如 localhost:8080），背后用代理把不同路径转发到对应服务。这样 URL 不变，DevTools 状态自然不丢。
- Webpack Dev Server：配置
proxy对象，如{ '/api/v1': { target: 'http://localhost:3000' } } - Vite：用
server.proxy，语法类似 - 单独起个
http-proxy-middleware服务，把/backend-1/*转给http://localhost:4000，/backend-2/*转给http://localhost:4001 - 关键点：前端发请求时用相对路径（
fetch('/backend-1/users')），而不是拼完整 URL，否则代理不生效
复杂点在于代理规则得和后端路由对齐，而且某些跨域调试场景（比如联调第三方服务）没法绕过真实域名切换——这时候只能接受状态丢失，或提前把关键请求导出为 cURL 备份。
