开启 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 并透传到前端日志，便于前后端日志串联
