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)来更精准地分析请求。
相关推荐
一点一木32 分钟前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑1 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川1 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
一直不明飞行2 小时前
Java的equals(),hashCode()应该在什么时候重写
java·开发语言·jvm
REDcker2 小时前
有限状态机与状态模式详解 FSM建模Java状态模式与C++表驱动模板实践
java·c++·状态模式
canonical_entropy2 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香2 小时前
聊聊前端页面的三种长度单位
前端
2301_803934612 小时前
Go语言如何做网络爬虫_Go语言爬虫开发教程【指南】
jvm·数据库·python
WL_Aurora2 小时前
Python爬虫实战(六):新发地蔬菜价格数据采集.
爬虫·python
盲敲代码的阿豪2 小时前
Python 入门基础教程(爬虫前置版)
开发语言·爬虫·python