开启 Preserve Log 可使 Console 和 Network 日志在刷新、跳转后持续保留：Console 面板勾选左上角“Preserve log”，Network 面板同理，两者独立生效；它保留日志、异常、计时及完整请求记录，但不保留断点状态或未输出日志。

页面刷新后控制台日志清空，是前端调试中常见痛点。开启 Preserve Log（保留日志）功能，就能让 Network 和 Console 中的日志在导航、跳转、刷新甚至跨页面时持续累积，方便追踪完整请求链路和执行流程。

在哪开启 Preserve Log？

该选项位于 Chrome DevTools 的 Console 或 Network 面板右上角，是一个带复选框的标签：

• Console 面板：勾选左上角的 Preserve log
• Network 面板：勾选左上角的 Preserve log

两个面板的开关独立生效——若只查接口，开 Network 的即可；若还需看 JS 执行、报错或 console.log，务必同时打开 Console 的 Preserve log。

它能保留哪些内容？

开启后，以下信息会在刷新/跳转后继续保留在当前 DevTools 中：

• Console 中所有日志（log/warn/error/info）、未捕获异常、console.time 计时结果
• Network 中全部请求记录（含请求头、响应体、状态码、时序、预检、重定向链）
• 但不会保留执行上下文（比如断点暂停状态、作用域变量）、也不会记录页面卸载前未输出的日志

使用时要注意什么？

Preserve Log 很实用，但也容易带来干扰：

• 日志会不断累积，长时间调试后可能变卡或难以定位本次刷新的内容，建议按需开启、及时清空（右键 → Clear console / Clear all）
• SPA 应用中，Vue/React 路由跳转不触发页面刷新，此时即使未开启 Preserve Log，Console 日志通常也不会清空；但 Network 请求仍会被清空，所以 Network 的 Preserve log 对单页应用同样重要
• 某些浏览器扩展（如 React DevTools、Redux DevTools）可能影响日志输出顺序或触发时机，排查问题时可尝试禁用扩展对比

替代方案与补充技巧

当 Preserve Log 不够用时，可结合以下方式增强可观测性：

• 用 console.group() + console.groupEnd() 对每次刷新/路由变化做逻辑分组，视觉上更清晰
• Network 面板开启 Disable cache，避免因缓存导致请求不触发，漏掉关键接口
• 对关键逻辑添加 console.trace()，直接打印调用栈，比单纯 log 更易定位源头
• 后端配合添加唯一 trace-id 并透传到前端日志，便于前后端日志串联