UD5工具箱
Web 认证流程交互演示 - OAuth2/OIDC 步骤可视化
逐步展示授权码流程、隐式流程等，配合序列图帮助理解各角色间的交互。
全部工具
共 999+ 款工具View Transition 模拟页面切换 - 使用 startViewTransition
在两个视图间切换并调用 document.startViewTransition，观察浏览器默认过渡动画。
<details> 折叠面板生成器 - 多级手风琴效果
搭建嵌套的 details/summary 结构，生成纯 HTML 折叠面板，支持自定义图标和开放状态。
指针锁定 API 演示 - 鼠标消失与无限移动
点击区域锁定鼠标指针，获取相对位移量，适用于 3D 视角或游戏控制。
NPM 包版本差异对比 - 查看两个版本间文件变化
输入包名和两个版本号，在线展示文件变更差异，了解升级带来的影响。
前端打包体积在线分析 - 可视化 Bundle 各模块占比
上传或粘贴 webpack 等工具的 stats.json 文件，生成交互式树状图，直观查看各模块大小与占比。
@property 规则演示 - 自定义属性类型与动画
注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。
CSS Anchor Positioning 演示 - 定位元素相对于锚点
设置 anchor-name 并让弹出元素使用 anchor() 函数定位，预览新式锚定布局。
datalist 自动建议测试 - 自定义输入提示列表
创建 input + datalist 组合，动态添加选项并测试过滤行为和兼容性。
颜色主题切换演示 - 明/暗模式独立样式测试
编写分别用于 light 和 dark 的 CSS，通过模拟 prefers-color-scheme 立即预览两种主题。
HTTP/2 Server Push 分析器 - 检查推送资源与缓存
模拟服务器推送资源，展示推送的资源和缓存行为，帮助优化 HTTP/2 策略。
强制颜色模式测试器 - Windows 高对比度预览
激活 forced-colors: active 模拟，观察页面在系统高对比度主题下的渲染效果。
prefers-contrast 模拟器 - 强制增加/减少对比度
模拟 prefers-contrast: more/less 媒体特性，预览页面在高对比度模式下的视觉效果。
自定义滚动条交互演示 - 模拟滚动事件处理
构建自定义滚动条控件，与原生滚动关联，展示 wheel、scroll 事件的细节。
Selection API 浏览器 - 获取选中文本与位置信息
选中页面文字后，显示选区的起止偏移、矩形边界、包含节点等详细信息。
Blob URL 创建与预览 - 内存中生成可下载链接
输入文本或拖入文件，生成 Blob URL 并在新标签页预览或触发下载，理解对象 URL 机制。
Image Capture API 演示 - 拍照并获取原始帧
使用 ImageCapture.takePhoto() 拍摄高分辨率照片，或抓取实时帧并下载。
Biquad 滤波器测试器 - 低通/高通/带通实时调节
加载音频流并通过 BiquadFilterNode 应用不同类型的滤波，实时调节频率和 Q 值。
AudioContext 基础演示 - 生成波形与声音播放
使用 Web Audio API 创建简单的振荡器、增益节点，播放并可视化声波。
Unicode 正规化测试器 - NFC/NFD/NFKC/NFKD 对比
输入字符串并选择正规化形式，展示转换结果和码点序列，理解等价字符处理。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema（或模拟类型权重），计算请求的代价分，辅助限流策略。
MediaRecorder API 多媒体录制 - 摄像头+音频捕获
获取摄像头和麦克风，录制视频片段并回放或下载，展示 API 基本用法。
图片懒加载测试器 - loading=lazy 效果对比
放置大量图片并开启懒加载，通过滚动观察网络请求的发起，验证原生延迟加载。
资源提示构建器 - 预连接/预加载/预提取标签生成
选择资源类型并填入 URL，生成 <link rel> 预加载、预连接等标签，优化页面加载。
布局偏移录制器 - 捕捉 CLS 变化并生成动图
监测页面加载过程中的布局偏移，定时截图并合成 GIF，直观展示视觉稳定性问题。
目录上传与文件树展示 - 保留结构上传
选择文件夹并上传，保留相对路径，以树形结构展示所有文件并读取内容。
文件系统访问 API 沙盒 - 读写本地文件
使用 showOpenFilePicker 或 showSaveFilePicker 选择文件并读取/写入内容，体会原生文件交互。
Canvas 视频特效处理 - 实时绿幕/灰度/反转
将视频绘制到 Canvas 上，逐帧应用像素处理（灰度、反色、绿幕替换），展示效果。
Web 字体加载策略演示 - FOIT/FOUT 对比
使用不同 font-display 值加载自定义字体，展示未字体下载时的文字显示行为。
content-visibility 性能演示 - 跳过渲染不可见区域
对长列表应用 content-visibility:auto，对比启用前后渲染时间和内存占用。
OpenAPI 请求验证器 - 根据 Schema 检查参数是否正确
输入 OpenAPI 规范片段和模拟请求数据，验证路径、方法、参数是否符合定义。
Shadow DOM 插槽演示 - slot 内容投影可视化
构建带具名插槽的 Shadow DOM，改变宿主内容观察插槽分配，学习组件组合。
WebTransport API 演示 - 基于 QUIC 的数据报发送
模拟创建 WebTransport 连接（需服务端配合），发送和接收数据报，体验低延迟通信。
Markdown 语音朗读器 - 使用 SpeechSynthesis 朗读文档
输入 Markdown 文本，过滤符号后调用语音合成 API 朗读内容，可调节语速和音调。
Server-Sent Events 代码片断生成 - 客户端与服务端模板
配置事件类型和重试间隔，生成用于接收 SSE 的前端 EventSource 代码和后端流示例。
REST 与 GraphQL 响应格式对比器 - 结构差异可视化
输入同一数据源的两种 API 响应，并排展示结构差异，理解两种风格的数据组织。
Lit 组件快速实验场 - 在线编写 Lit 模板与反应式属性
编写 Lit 组件模板和属性，实时渲染并观察响应式更新，无需构建环境。
CSS ::part 选择器演示 - 穿透 Shadow DOM 定制样式
创建带 part 属性的自定义元素，通过外部 CSS ::part 修改其内部样式，查看效果。
Reflect API 使用浏览器 - 对象操作方法速查与测试
列出所有 Reflect 静态方法，提供参数输入并执行，查看返回值和副作用。
Proxy 对象拦截测试 - 查看 get/set 钩子触发
创建一个 Proxy，定义各种陷阱函数，操作对象时实时显示被拦截的属性和行为。
柯里化函数构造器 - 将多参数函数转为序列调用
输入一个多参数函数，自动生成柯里化版本并演示逐步传参调用的过程。
记忆化（Memoization）函数演示 - 缓存结果对比
对一个耗时函数应用记忆化，展示相同输入下第二次调用速度的提升和缓存命中。
异步瀑布流模拟器 - 顺序执行异步任务演示
添加一系列异步任务并观察其按顺序执行的过程，对比并行与串行效果。
CSS 背面可见性演示 - 卡片翻转效果调试
制作一张 3D 翻转卡片，切换 backface-visibility 属性观察背面隐藏与否。
Generator 与迭代器演示 - 暂停/恢复执行过程
编写 generator 函数，逐步 next() 并显示每次 yield 的值和状态，理解惰性求值。
防抖与节流可视化对比 - 事件触发频率演示
模拟高频事件流，分别应用防抖和节流策略，用时间轴展示处理函数实际被调用的时机。
原型链浏览器 - 查看对象继承关系
输入一个对象构造器名称，以树状图显示其原型链，帮助理解 JS 继承机制。
JavaScript this 上下文测试器 - 不同调用方式下的指向
编写函数并选择调用方式（普通、方法、call、apply、箭头等），输出 this 的值。
:has() 选择器测试场 - 父元素根据子元素动态样式
使用 :has() 伪类编写规则，实时查看父元素如何根据子元素状态改变自身样式。
CSS 容器查询演示 - @container 根据父元素响应
设置容器宽度阈值，改变容器大小观察组件内部样式的变化，学习容器查询用法。
浏览器存储配额估算器 - 检查剩余可用空间
调用 StorageManager API 获取当前源的总配额和使用量，显示剩余可用空间。
Cookie 属性详解与测试 - SameSite/Secure/HttpOnly 可视化
设置不同属性的 Cookie 并展示其跨站行为，帮助理解现代 Cookie 安全策略。
PWA 审核评分计算器 - 根据清单离线能力等评估
填写 Manifest、Service Worker、HTTPS 等实施情况，计算 PWA 完备度分数并给出改进建议。
JavaScript 闭包可视化 - 作用域链与环境记录
编写嵌套函数并单步执行，直观展示每个函数的作用域和闭包变量。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
Trusted Web Activity 辅助工具 - 验证数字资产链接
粘贴 assetlinks.json 内容，检查是否符合 TWA 打包要求，帮助将 PWA 上架应用商店。
未使用 CSS 扫描器 - 根据 HTML 检测多余样式
提供 HTML 和 CSS，分析哪些选择器在当前页面中未被使用，提供清理建议。
跳过导航链接生成器 - 无障碍跳至主内容链接
生成符合最佳实践的“跳至主内容”链接的 HTML 和 CSS 代码，提升键盘导航体验。
CSS shape-outside 环绕效果演示 - 文字绕图排列
上传浮动图片并选择圆形、椭圆或多边形 shape-outside 值，观察文字环绕效果。
IndexedDB 模型设计器 - 可视化创建对象仓库与索引
定义对象仓库、主键和索引，生成创建数据库的 JavaScript 代码，方便前端数据持久化。