Storage Buckets API 实验室 - 分区存储策略
创建多个存储桶,分别设置持久化与配额策略,管理不同业务数据的存储优先级与驱逐顺序。
Lorem Pixel 占位图生成器 - 指定尺寸类别
生成指定宽度和高度的占位图片,可选择类别(自然、人物、抽象)和灰度。
Service Worker生成器 - 基础缓存策略配置
选择缓存策略(Network First, Cache First等),填写预缓存文件列表,生成sw.js文件。
多设备同步预览框架 - iframe并排
输入URL,在同一个页面上并排显示手机/平板/桌面三种尺寸的实时预览。
CheerLights全球情绪灯 - 实时跟随世界情绪变化
连接CheerLights API,显示全球此刻统一的情绪颜色,加入同步。
Webpack 配置向导 - 问答式生成配置文件
通过交互式问答选择入口、输出、Loaders 和 Plugins,生成 webpack.config.js。
Cache API 浏览器 - 查看与删除Service Worker缓存
枚举当前域下所有Cache Storage,查看条目详情,手动删除缓存,辅助PWA开发调试。
语义版本范围测试器 - 检查版本是否满足约束
输入目标版本和范围表达式(如 ^1.2.3),判断是否匹配,帮助理解依赖解析规则。
scheduler.postTask优先级演示 - 用户交互优先
使用scheduler.postTask API安排不同优先级的任务,并观察执行顺序。
平行坐标图生成器 - 多维数据探索
上传或输入CSV多变量数据,绘制平行坐标图,支持刷选高亮模式。
局域网速度估测 - 文件传输时间模拟
根据已知带宽或手动输入,估算传输指定大小文件所需时间。
任务批处理计划表 - 按情境分组
将相似任务拖动到同一批次,安排连续的专注时段批量处理,减少切换成本。
Unicode字符表 - 在线浏览与复制符号
按区块浏览Unicode字符,支持搜索和点击复制,覆盖拉丁、数学符号、箭头等常用区块。
步骤进度指示器生成器 - 多步流程可视化
设置步骤数量和当前步骤,生成带连线的步骤进度条,常用于结账或表单引导。
设备内存 (deviceMemory) 检测器 - 前端按需降级
显示navigator.deviceMemory数值,并给出基于内存的代码分割与功能降级建议。
IndexedDB 模型设计器 - 可视化创建对象仓库与索引
定义对象仓库、主键和索引,生成创建数据库的 JavaScript 代码,方便前端数据持久化。
无障碍名称计算演示 - 元素的可访问名称来源
选择一个元素,展示浏览器如何根据 ARIA 属性、内容、label 等计算其可访问名称。
语音识别转文字演示 - Web Speech API
利用浏览器语音识别 API,将说话内容实时转换为文字并显示,支持多语言。
多屏幕窗口放置演示 - 扩展桌面布局
检测并列举所有显示器,将网页窗口精确定位到指定屏幕的特定位置,适合多屏办公场景。
Navigation API 演示 - 现代前端路由导航
使用新的 Navigation API 拦截导航、管理历史条目,构建类 SPA 体验。
内容索引 API 查看器 - 管理离线可用内容列表
添加、列出和删除内容索引中的条目,展示离线可用内容。
Web NFC 写入演示 - 向 NFC 标签写数据
使用 NDEF 格式向 NFC 标签写入文本、URL 或自定义记录。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
加密媒体扩展演示 - EME 播放 DRM 内容示意
模拟 Encrypted Media Extensions 流程,展示如何请求许可证并播放受保护视频。
书本密码编码器 - 基于文本坐标的加密
指定一本书的一段文字,将消息编码为页码-行-词坐标。
情绪坐标日记 - 横轴愉悦纵轴激动度
每日点在情感坐标上,连续多日形成情绪轨迹图。
视错觉库 - 交互体验著名错觉
收录多幅动态与静态视错觉,可调节参数观察效果,附科学解释。
地图方位角量算 - 两点坐标求方位与距离
输入两个经纬度,计算两点间的方位角与大圆距离。
海战棋棋盘版 - 双人轮流输入坐标攻击
两人各自布置舰船,轮流猜测对方坐标,击中全部舰船获胜。
Web Share API 实践器 - 调用系统分享对话框
触发系统原生分享,支持分享文本、链接与文件,检查浏览器兼容性与支持级别。
UD5工具箱