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)来更精准地分析请求。
相关推荐
亓才孓4 分钟前
[Class的应用]获取类的信息
java·开发语言
开开心心就好12 分钟前
AI人声伴奏分离工具,离线提取伴奏K歌用
java·linux·开发语言·网络·人工智能·电脑·blender
爱喝白开水a16 分钟前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
Never_Satisfied16 分钟前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌4116 分钟前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
80530单词突击赢25 分钟前
JavaWeb进阶:SpringBoot核心与Bean管理
java·spring boot·后端
B站_计算机毕业设计之家30 分钟前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
渣渣苏38 分钟前
Langchain实战快速入门
人工智能·python·langchain
爬山算法44 分钟前
Hibernate(87)如何在安全测试中使用Hibernate?
java·后端·hibernate
lili-felicity1 小时前
CANN模型量化详解:从FP32到INT8的精度与性能平衡
人工智能·python