UD5工具箱
DOM事件监控器 - 实时录制显示触发事件
记录页面交互触发的所有DOM事件及其目标、冒泡阶段，以日志和瀑布形式展示。
DOM样式实时编辑
沙箱预览 · 安全隔离 · 不修改任何实际内容
0 字符
🔍 实时预览
就绪
×
纯CSS模态弹窗生成 - 无JS弹出层
利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。
HTML 输出测试器 - 即时预览代码片段
输入 HTML/CSS/JS 代码，在隔离沙箱中即时渲染，支持控制台捕获。
DOM元素截图工具 - 指定区域导出图片
选中页面上的某个HTML元素，利用html2canvas将其渲染为PNG图片下载。
开关切换按钮生成器 - iOS/Android风格
生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode，调节尺寸颜色立即查看效果。
DOM 变更性能分析器 - 记录并统计重排重绘
开启监听后操作页面，统计 DOM 变化次数和频率，帮助定位布局抖动。
图片背景预览器 - 不同UI背景效果模拟
上传图片并在白色、黑色、透明等背景上预览效果，辅助电商首图或UI元素设计。
Emmet 缩写语法浏览器 - 编写并预览展开
输入 Emmet 缩写，实时显示展开后的 HTML 结构，学习高级 Emmet 技巧。
Reflect API 使用浏览器 - 对象操作方法速查与测试
列出所有 Reflect 静态方法，提供参数输入并执行，查看返回值和副作用。
控制台日志样式生成 - %c美化输出
配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。
形状过渡分割线生成 - 页面区块曲线背景
生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。
ES 私有字段演示 - # 语法与封装
创建带 # 私有字段的类，尝试外部访问观察语法错误，理解封装。
DOM 重排/重绘触发器测试 - 性能影响可视化
执行各种属性修改，可视化显示哪些操作触发回流或重绘，帮助编写高性能代码。
CSS3渐变色库 - 预设精美渐变代码速查
浏览数百款精选CSS渐变背景，点击即可复制线性渐变或径向渐变代码，快速美化页面。
分页组件生成器 - 自定义样式与按钮
设置总页数与当前页，生成数字式或省略式分页导航条。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子，提供代码复制。
滚动条样式预览 - Webkit滚动条美化与代码
交互式调整滚动条宽度、滑块颜色、圆角等，预览容器滚动效果，复制::-webkit-scrollbar代码。
视频动态缩略图生成器 - 提取片段生成 GIF
选择视频的一个片段，生成几秒钟的 GIF 动图作为预览缩略图，可设置尺寸和帧率。
单选框/复选框美化器 - CSS自定义样式
打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。
SRT 字幕时间调整器 - 整体偏移/伸缩
上传 SRT 字幕文件，整体提前或延迟所有时间戳，或按比例拉伸压缩以匹配视频。
CSS 运动路径构建器 - offset-path 动画设计
绘制 SVG 路径，将动画元素绑定到路径上，生成 offset-path 动画代码。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果，自定义进场/出场动画，体验View Transitions API丝滑切换。
排版比例预览器 - 模块化比例尺生成
选择基数大小与比例（如黄金比例），预览标题到正文字号层叠样式序列。
渐变边框生成器 - 使用 border-image 或 background-clip
生成带有渐变颜色的边框效果，支持 border-image 和 background-clip 两种实现方式。
GIF分解精灵图导出 - 提取单帧和CSS定位
上传GIF并自动水平平铺提取各帧，生成对应的CSS精灵图定位代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。