Edge开发者工具:保留日志与禁用缓存详解

Microsoft Edge 浏览器 (或基于 Chromium 的浏览器,如 Chrome)中,"保留日志""禁用缓存" 是开发者工具(DevTools)中的两个非常实用的功能,主要用于调试网页加载、网络请求和性能问题。下面详细介绍这两个功能的用途与用法。


🧩 一、"保留日志"(Preserve Log)

✅ 功能说明:
  • 当你刷新页面时,默认情况下,Network 面板中的日志会被清空
  • 启用"保留日志"后,即使刷新页面,之前的网络请求记录也不会被清除,可以连续查看多个页面加载过程中的所有请求。
🔧 使用方法:
  1. 打开 Edge 浏览器 → 按 F12 或右键点击页面选择「检查」打开 开发者工具
  2. 切换到 "网络"(Network) 标签页。
  3. 在顶部工具栏中,找到并勾选:
    "保留日志" (通常是一个小方框图标,旁边写着"保留日志"或英文 "Preserve log")
    (如图中红色框标注位置)

⚠️ 注意:这个选项在某些版本中可能显示为"Keep log"或中文"保留日志"。

💡 使用场景:
  • 调试多步操作(如登录 → 跳转 → 提交表单)时的完整请求链。
  • 分析页面刷新前后的请求差异。
  • 追踪跨页面的 API 请求是否正常。

🧩 二、"禁用缓存"(Disable Cache)

✅ 功能说明:
  • 浏览器会缓存静态资源(如 JS、CSS、图片等),以提升加载速度。
  • 启用"禁用缓存"后,浏览器将强制重新从服务器获取资源,不使用本地缓存。
🔧 使用方法:
  1. 打开开发者工具 → 进入 "网络"(Network) 标签页。
  2. 勾选:
    "禁用缓存"(通常是一个小图标,像一个禁止符号,旁边写"禁用缓存"或英文 "Disable cache")

⚠️ 注意:此功能只对当前 DevTools 会话生效,关闭后自动失效。

💡 使用场景:
  • 开发阶段测试最新代码是否生效(例如修改了 JS 文件但未更新)。
  • 排查因缓存导致的页面异常(如样式未更新、脚本报错等)。
  • 确保每次请求都发送到服务器,便于调试接口响应。

✅ 组合使用建议:

表格

场景 推荐设置
调试页面加载流程 ✅ 保留日志 + ✅ 禁用缓存
查看接口返回错误 ✅ 保留日志 + ✅ 禁用缓存
测试缓存机制 ❌ 不启用禁用缓存
快速排查资源加载失败 ✅ 保留日志

📌 小贴士

  • "禁用缓存"不会影响 Cookie、Session 等认证信息,仅影响静态资源缓存。
  • 如果你希望永久禁用缓存(比如开发环境),可以在浏览器设置中开启"开发者模式"或使用 --disable-cache 启动参数(高级用户)。
  • 在 Network 面板中,还可以结合 过滤器(如只看 XHR、JS、CSS)来更精准地分析请求。
相关推荐
云烟成雨TD20 小时前
Spring AI Alibaba 1.x 系列【6】ReactAgent 同步执行 & 流式执行
java·人工智能·spring
Csvn20 小时前
🌟 LangChain 30 天保姆级教程 · Day 13|OutputParser 进阶!让 AI 输出自动转为结构化对象,并支持自动重试!
python·langchain
于慨20 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz20 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
swg32132120 小时前
Spring Boot 3.X Oauth2 认证服务与资源服务
java·spring boot·后端
从前慢丶20 小时前
前端交互规范(Web 端)
前端
gelald20 小时前
SpringBoot - 自动配置原理
java·spring boot·后端
@yanyu66620 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
殷紫川20 小时前
深入理解 AQS:从架构到实现,解锁 Java 并发编程的核心密钥
java
一轮弯弯的明月20 小时前
贝尔数求集合划分方案总数
java·笔记·蓝桥杯·学习心得