如何在谷歌浏览器中查看网页中所有过期的静态资源?

浅磊君_5986

浅磊君_5986

2026-09-07

962人浏览

原创

要快速定位过期仍被加载的静态资源,需在Network面板启用Size和Cache-Control列,筛选Status为200、Size为disk cache且Cache-Control含max-age=0的条目,并结合date/expires头与当前时间比对确认真实过期。

如何在谷歌浏览器中查看网页中所有过期的静态资源?

要快速定位网页中已过期却仍被浏览器加载的静态资源(比如图片、CSS、JS),必须绕过常规的“Network”标签页默认过滤逻辑,直接筛选出缓存失效但未被重新请求的文件。

打开开发者工具并启用缓存调试模式

按 F12 打开开发者工具 → 切换到 Network 标签页 → 右键点击顶部字段栏(如 Name、Status、Type)→ 勾选 Size 和 Cache-Control 两列。

这一步必须做,否则无法看到每项资源的缓存策略和实际缓存状态。缺了 Cache-Control 列,你根本分不清哪个是强制过期、哪个是启发式缓存。

刷新页面并筛选出“过期但仍在用”的资源

按 Ctrl+R(Windows/Linux)或 Cmd+R(macOS)硬性刷新页面,确保所有资源重新走一遍缓存判断流程。

在 Network 表格中点击 Size 列标题两次,让数据按大小倒序排列 → 滚动查看所有显示 disk cache 或 memory cache 且 Cache-Control 值为空、或含 max-age=0、或含 no-cache 的条目。

【关键识别点】:如果某资源的 Status 显示 200(而非 304),同时 Size 列写的是 disk cache,但 Cache-Control 栏明确写着 max-age=0,说明该资源已过期,浏览器本应发条件请求验证,却因服务端未返回 ETag 或 Last-Modified 而直接复用本地副本——这就是你要找的“过期但仍在用”的静态资源。

使用控制台命令辅助验证过期资源

方法一:在 Console 标签页中粘贴执行以下代码:

performance.getEntriesByType('resource').filter(r => r.transferSize === 0 && r.encodedBodySize > 0)

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

该命令会列出所有未发起网络传输(transferSize === 0)、但仍有内容体(encodedBodySize > 0)的资源,即纯缓存命中项;再结合上一步筛选出的 max-age=0 条目交叉比对,即可确认是否为过期复用。

方法二:执行 chrome.devtools.network.getHAR()(需先在设置中启用 HAR 导出支持)→ 复制返回对象 → 在编辑器中搜索 "cache":.*?"status": "200" 并排除含 "fromDiskCache" 为 false 的项。

注意:方法二仅在 DevTools 设置 → Preferences → Network 中勾选了 Save as HAR with content 后才有效,否则 getHAR() 返回的响应体为空。

定位具体过期资源的原始请求路径

第一步:在 Network 表格中找到一个疑似过期的资源(例如某 CSS 文件,Status 是 200,Size 是 disk cache,Cache-Control 是 max-age=0)→ 单击选中它。

第二步:右侧切换到 Headers 子标签 → 向下滚动到 Response Headers 区域 → 查看 date 和 expires 字段值。

第三步:用系统当前时间(2026年8月27日)减去 date 值,若差值超过 max-age 指定秒数,或 expires 时间早于当前时间,则该资源确属过期。

这一步不能跳过。很多开发者误以为 max-age=0 就等于“立刻过期”,其实它只表示“必须验证”,而验证失败时浏览器仍可能降级复用——只有比对 date 与 expires 才能确认真实过期状态。

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Tailwind CSS 响应式布局怎么写
Tailwind CSS 响应式布局怎么写

Tailwind CSS 响应式布局通常从移动端样式写起,再用 sm、md、lg 等前缀调整不同屏幕宽度下的网格、间距和导航。本专题整理断点配置、Grid 与 Flex 自适应布局及常见溢出问题,帮助你逐步完成多设备适配。

2026.11.03

0

19

Tailwind CSS 常用类名怎么记
Tailwind CSS 常用类名怎么记

Tailwind CSS 类名很多,先按布局、间距、文字、颜色和状态分组记忆,再通过官方文档检索具体写法。本专题结合类名排序、动态拼接失效、自定义实用类等问题,帮助你建立常用类名的速查方法。

2026.11.03

0

12

码上飞入口地址合集
码上飞入口地址合集

本专题汇总了码上飞(CodeFlying)的官方入口地址合集,涵盖官网主站及网页版在线使用入口,支持注册登录后直接在线体验零代码AI应用生成。同时整理了APP端下载渠道与小程序入口,助你快速访问平台,通过自然语言描述需求即可生成应用、小程序或网站。

2026.11.03

0

10

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

2026.11.02

20

14

Uvicorn使用教程
Uvicorn使用教程

本专题汇总了Uvicorn使用教程与启动运行指南,涵盖其作为Python ASGI服务器的定位与特点,以及命令行启动(uvicorn main:app --reload)、参数配置(host/port/workers)、程序内嵌运行与Gunicorn结合部署等核心用法。同时整理了热重载调试、日志配置与生产环境部署优化等技巧,助你快速掌握Uvicorn的运行与配置。

2026.11.02

20

17

Uvicorn安装配置教程
Uvicorn安装配置教程

本专题汇总了Uvicorn的安装配置教程与部署指南,涵盖通过pip安装Uvicorn、启动FastAPI/Starlette应用、开发模式热重载(--reload)及多进程工作模式配置等核心操作。同时整理了结合Gunicorn的生产部署方案、HTTPS与反向代理配置及性能调优技巧,助你快速完成Uvicorn服务的安装与上线部署。

2026.11.02

20

17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

120

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

100

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

300

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程