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)来更精准地分析请求。
相关推荐
Zha0Zhun30 分钟前
一个使用ViewBinding封装的Dialog
前端
兆子龙31 分钟前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山31 分钟前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js
时光不负努力33 分钟前
编程常用模式集合
前端·javascript·typescript
大雨还洅下38 分钟前
前端JS: 跨域解决
javascript
恋猫de小郭41 分钟前
Apple 的 ANE 被挖掘,AI 硬件公开,宣传的 38 TOPS 居然是"数字游戏"?
前端·人工智能·ios
小岛前端1 小时前
Node.js 宣布重大调整,运行十年的规则要改了!
前端·node.js
OpenTiny社区1 小时前
OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用
前端·javascript·ai编程
梦想CAD控件1 小时前
在线CAD开发包结构与功能说明
前端·javascript·vue.js
张拭心1 小时前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能