UD5工具箱
WebGPU 网格着色器演示 - 新一代渲染管线
展示 WebGPU 的网格和任务着色器如何代替传统顶点处理管线。
开发者工具箱 - 常用开发辅助工具集合
共 99+ 款工具Animation Worklet 演示 - 基于工作线程的高性能动画
创建并运行动画工作线程，展示不受主线程影响的平滑动画效果。
Storage Buckets API 演示 - 分离存储空间与策略
创建多个存储桶并设置不同的持久化策略，管理数据生命周期。
定期后台同步测试器 - 模拟周期性后台更新
注册一个周期性后台同步，模拟触发并显示更新数据。
Idle Detection API 沙盒 - 检测用户是否离开
请求权限并使用 Idle Detection API，根据用户空闲或锁屏状态触发行为。
URL 协议处理演示 - 将 PWA 注册为 URL 处理器
配置 manifest 中的 url_handlers，演示 PWA 如何打开特定格式的链接。
Launch Handler 演示 - 控制 PWA 启动行为
设置 launch_handler 并模拟不同启动方式，体验单窗口与多窗口模式。
Web Share Target 演示 - 将 PWA 注册为分享目标
配置 manifest 中的 share_target 字段，模拟接收来自其他应用的分享数据。
Web Bluetooth 电池服务演示 - 读取蓝牙设备电量
连接附近的蓝牙设备，读取其电池电量服务特征值并显示。
屏幕唤醒锁高级演示 - 锁定、释放与事件监听
应用屏幕唤醒锁并监听其释放事件，展示前后台切换时的状态变化。
顶级 await 演示 - 在模块顶层使用异步
在 ES 模块中直接使用顶层 await，观察执行顺序和依赖加载。
CSS caret-color 实验场 - 自定义文本光标颜色
选择颜色，实时观察输入框中文本光标的颜色变化，同时支持调整粗细。
structuredClone 可转移对象演示 - 高性能深拷贝
对比结构化克隆与传统深拷贝，演示 ArrayBuffer 等可转移对象如何提升性能。
TypedArray 在线探索器 - 创建并操作二进制缓冲区
创建 ArrayBuffer，用不同 TypedArray 视图读写，观察字节布局和大小端差异。
CSS accent-color 预览器 - 统一表单控件强调色
调整 accent-color 值，实时查看单选框、复选框、进度条等原生控件的主题变化。
CSS overscroll-behavior 演示 - 控制滚动链接效果
切换 overscroll-behavior 属性值，观察嵌套滚动容器到达边界时的不同行为。
CSS Subgrid 布局生成器 - 可视化创建子网格
拖拽嵌套网格项，预览并生成使用 CSS Subgrid 对齐父子网格的代码。
Babel 插件在线测试器 - 开发并验证自定义插件
编写 Babel 插件代码，输入源代码，实时查看转换后的结果，加速插件开发。
模块联邦在线演示 - 微前端共享模块
模拟两个独立应用通过 Module Federation 共享组件，展示运行时加载过程。
观察者模式实验室 - 交互式学习设计模式
实现观察者模式，添加被观察者和观察者，观察状态变化时的通知流程。
ES 私有字段演示 - # 语法与封装
创建带 # 私有字段的类，尝试外部访问观察语法错误，理解封装。
Iterator Helpers 演示 - map/filter/take 在迭代器上的应用
使用新的迭代器辅助方法链式处理数据，查看懒求值效果。
Symbol 原始值探索 - 创建与使用唯一标识符
创建 Symbol，查看其描述与唯一性，理解如何作为对象属性键使用。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
Jest 快照差异查看器 - 比较两个快照文件
上传或粘贴两个快照内容，并排显示差异，高亮变更部分。
Rollup 插件开发沙盒 - 编写并测试插件效果
提供模块图，编写 Rollup 插件并观察其对打包过程的影响。
依赖注入容器演示 - 理解 IoC 原理
构建一个简单的 DI 容器，注册和解析依赖，展示控制反转的好处。
CSS object-fit 与 object-position 演示 - 图片填充对比
上传图片并选择不同的 object-fit 和 object-position 值，查看填充效果差异。
设计令牌导出器 - 从 JSON 生成 SCSS/JS 变量
定义颜色、间距等令牌，导出为 SCSS、CSS 自定义属性或 JavaScript 模块。
Monorepo 依赖图生成器 - 可视化包间关系
上传或输入 lerna.json / workspace 配置，生成交互式依赖关系图。
形状检测 API 综合演示 - 人脸/条形码/文本检测
调用 BarcodeDetector、FaceDetector 和 TextDetector，处理摄像头或图片。
Temporal API 演练场 - 现代日期时间处理实验
使用 Temporal 提案中的对象（PlainDate, ZonedDateTime 等）进行日期运算和格式化。
WeakMap/WeakSet 内存回收演示 - 弱引用可视化
创建带弱引用的集合，观察对象被垃圾回收后条目自动消失的行为。
BigInt 在线计算器 - 任意大整数运算与进制转换
输入超大整数，执行加减乘除、取模及 2~36 进制互转，安全处理超 Number 范围的值。
CSS 滚动时间线生成器 - 可视化创建 scroll-timeline 动画
拖拽设置滚动时间线的触发范围与动画关键帧，自动生成 @scroll-timeline 及 animation-timeline CSS 代码。
WebDriver 脚本录制器 - 记录操作生成测试代码
在页面中进行点击、输入等操作，自动生成 WebDriverIO 或 Selenium 测试脚本。
Webpack Loader 测试器 - 模拟文件转换过程
编写一个简单的 loader 函数，输入文件内容，查看经过 loader 处理后的输出。
自定义 ESLint 规则测试器 - 编写并验证规则
编写 ESLint 规则代码，输入测试用例，立即查看是否通过及报错信息。
Import Map 演示 - 浏览器端模块映射实验
编写 HTML 和 import map，在浏览器中直接导入裸标识符模块并执行。
Selection API 浏览器 - 获取选中文本与位置信息
选中页面文字后，显示选区的起止偏移、矩形边界、包含节点等详细信息。
<details> 折叠面板生成器 - 多级手风琴效果
搭建嵌套的 details/summary 结构，生成纯 HTML 折叠面板，支持自定义图标和开放状态。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema（或模拟类型权重），计算请求的代价分，辅助限流策略。
Blob URL 创建与预览 - 内存中生成可下载链接
输入文本或拖入文件，生成 Blob URL 并在新标签页预览或触发下载，理解对象 URL 机制。
CSS 背面可见性演示 - 卡片翻转效果调试
制作一张 3D 翻转卡片，切换 backface-visibility 属性观察背面隐藏与否。
跳过导航链接生成器 - 无障碍跳至主内容链接
生成符合最佳实践的“跳至主内容”链接的 HTML 和 CSS 代码，提升键盘导航体验。
Shadow DOM 插槽演示 - slot 内容投影可视化
构建带具名插槽的 Shadow DOM，改变宿主内容观察插槽分配，学习组件组合。
防抖与节流可视化对比 - 事件触发频率演示
模拟高频事件流，分别应用防抖和节流策略，用时间轴展示处理函数实际被调用的时机。
:has() 选择器测试场 - 父元素根据子元素动态样式
使用 :has() 伪类编写规则，实时查看父元素如何根据子元素状态改变自身样式。
CSS 容器查询演示 - @container 根据父元素响应
设置容器宽度阈值，改变容器大小观察组件内部样式的变化，学习容器查询用法。
lit-html 模板测试器 - 在线编写并渲染 Lit 模板
编写 lit-html 模板和数据，即时渲染结果，帮助学习 Lit 框架。
Web 认证流程交互演示 - OAuth2/OIDC 步骤可视化
逐步展示授权码流程、隐式流程等，配合序列图帮助理解各角色间的交互。
Server-Sent Events 代码片断生成 - 客户端与服务端模板
配置事件类型和重试间隔，生成用于接收 SSE 的前端 EventSource 代码和后端流示例。
Lit 组件快速实验场 - 在线编写 Lit 模板与反应式属性
编写 Lit 组件模板和属性，实时渲染并观察响应式更新，无需构建环境。
Generator 与迭代器演示 - 暂停/恢复执行过程
编写 generator 函数，逐步 next() 并显示每次 yield 的值和状态，理解惰性求值。
触摸压力可视化演示 - 3D Touch/Force
在支持设备上检测触摸事件的force属性，实时展示压力大小与半径，辅助触觉交互开发。
自定义滚动条交互演示 - 模拟滚动事件处理
构建自定义滚动条控件，与原生滚动关联，展示 wheel、scroll 事件的细节。
柯里化函数构造器 - 将多参数函数转为序列调用
输入一个多参数函数，自动生成柯里化版本并演示逐步传参调用的过程。
浏览器存储配额估算器 - 检查剩余可用空间
调用 StorageManager API 获取当前源的总配额和使用量，显示剩余可用空间。
OpenAPI 请求验证器 - 根据 Schema 检查参数是否正确
输入 OpenAPI 规范片段和模拟请求数据，验证路径、方法、参数是否符合定义。
JavaScript this 上下文测试器 - 不同调用方式下的指向
编写函数并选择调用方式（普通、方法、call、apply、箭头等），输出 this 的值。