Service Worker缓存查看与调试 - 列出缓存条目
枚举当前作用域下的所有Cache Storage,查看资源条目和所占空间,支持手动清理。
UD5工具箱
暂无已注册的 Service Worker
点击"刷新"或注册一个新的 SW暂无缓存数据
点击"添加测试"创建演示缓存,或点击"刷新"检测向当前控制页面的 Service Worker 发送消息,测试 postMessage 通信。
需要已注册的 Service Worker 才能检测推送订阅状态。
检测 Background Sync API 支持情况。
将以下代码保存为 sw.js 并放置到网站根目录,即可使用本工具进行测试。
// sw.js - Service Worker 示例
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js'
];
// 安装事件
self.addEventListener('install', event => {
console.log('[SW] 安装中...');
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
.then(() => self.skipWaiting())
);
});
// 激活事件
self.addEventListener('activate', event => {
console.log('[SW] 激活中...');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== CACHE_NAME)
.map(k => caches.delete(k)))
).then(() => self.clients.claim())
);
});
// 拦截请求
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(resp => resp || fetch(event.request))
);
});
// 接收消息
self.addEventListener('message', event => {
console.log('[SW] 收到消息:', event.data);
if (event.data.action === 'ping') {
event.ports[0]?.postMessage({ action: 'pong', time: Date.now() });
}
if (event.ports[0]) {
event.ports[0].postMessage({
echo: event.data,
swVersion: '1.0.0',
timestamp: Date.now()
});
}
});
text/javascript 或 application/javascript MIME 类型。
registration.update() 手动触发更新检查,或在 SW 中使用 self.skipWaiting() 让新版本立即激活。
skipWaiting() 和 clients.claim() 可以加速这一过程。
chrome://serviceworker-internals/ 可以查看更详细的内部信息。在 Firefox 中,使用 about:debugging#/runtime/this-firefox 进行调试。本工具也提供了便捷的检测和管理界面。
navigator.serviceWorker.controller.postMessage() 向 SW 发送消息,SW 通过 self.addEventListener('message', ...) 接收。SW 可以通过 event.ports[0].postMessage() 回复。注意:① 传递的数据必须是可序列化的(不支持函数、DOM 元素等);② 可以使用 MessageChannel 实现双向通信;③ SW 也可以使用 self.clients.matchAll() 向所有控制的页面广播消息。
枚举当前作用域下的所有Cache Storage,查看资源条目和所占空间,支持手动清理。
显示当前注册的 Service Worker 所管理的 Cache Storage,查看缓存文件列表及大小。
估算当前源的所有存储类型(localStorage, IndexedDB, Cache)占用和配额。
粘贴带有 source map 的错误堆栈,解析出原始源代码位置,便于定位问题。
生成一个小书签,点击后浮层显示当前浏览器窗口的宽度和高度。
生成指向动态倒计时图片的链接,用于添加到Email签名中,提醒活动截止。
上传JPEG照片,读取快门、光圈、ISO、拍摄日期及GPS位置等EXIF元数据,保护隐私本地解析。
将长文本按指定字符数强制插入换行符,保留单词完整性选项,用于纯文本排版。
输入总秒数或毫秒数,转换为“3天5小时20分”这样易读的时长描述。
选择文件,设定切片大小,将文件切成多个Blob下载;也可选择多个切片合并还原。
上传 PNG 文件,列出所有数据块(IHDR、IDAT、tEXt 等),提取隐藏的文本或时间信息。
输入公开网站URL,抓取并展示其使用的CSS自定义属性(颜色)调色板,设计灵感源泉。
输入两个二进制数,按补码加法计算并显示进位、零标志、溢出标志等状态。
演示UTF-32编码与字符串的互转,展示每个字符对应的4字节十六进制值。
输入起止日期,计算之间的日历天、工作日数及年月描述。
输入国际号码,自动提取国家代码、地区码和本地号码,并可尝试格式化为E.164等标准。
获取用户浏览器的实时地理位置(经纬度、海拔、精度),在地图上标记点并显示地址。
解析照片并将全部EXIF/IPTC/XMP摄影信息以结构化的JSON树展示。
按国家或货币名称查询对应的ISO 4217货币代码和符号(如¥、€)。
输入图书ISBN或论文DOI,通过开放API获取并显示标题、作者等元数据。
输入包名,生成包含最新版本、许可证、周下载量和依赖数的美观名片,用于README。
扫描指定CSS中的所有媒体查询,生成带断点标记的视口标尺和交互式覆盖图。
将CSV或TSV格式的数据转换为HTML表格,支持自定义分隔符、表头,并预览表格效果。
计算两个日期之间的间隔天数,或给定日期前后第N天的日期,支持包含/排除周末的设定。
根据天体质量和半径,计算环绕、逃逸和脱离星系所需的速度。
对时间进行加、减运算(如2h30m + 1h45m),直接显示总秒数和格式化的时间结果。
输入数字,按指定货币、小数位数和千分位分隔符格式化显示,复制结果。
清理文本中过多、重复的 `<br>` 标签,或根据自然段自动插入合适的标签。
输入药片上的字母数字、颜色及形状,从常用药品库中匹配可能品种,辅助用药安全。
选择色环颜色,计算电阻阻值、容差和温度系数,也可输入阻值反查色环。