UD5工具箱
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
测试覆盖率可视化器
上传 LCOV (.info) 文件，直观查看行覆盖详情
拖拽 LCOV 文件到此处，或点击上传
支持 .info / .lcov / .txt 格式，文件内容需符合 LCOV 规范
尚未上传 LCOV 文件
上传文件或点击"加载示例"开始体验
常见问题
LCOV 是 GCC 覆盖率测试工具 gcov 的图形化前端。.info 文件是其标准输出格式，记录了每个源文件的行覆盖数据（行号 + 执行次数）。广泛用于 C/C++、JavaScript 等项目的测试覆盖率统计。
使用 lcov 工具：
lcov --capture --directory . --output-file coverage.info。对于 JavaScript 项目，可使用 Istanbul/nyc 生成 LCOV 格式：nyc report --reporter=lcov。覆盖率 = 已覆盖行数(LH) ÷ 可执行行总数(LF) × 100%。可执行行指 LCOV 中 DA 记录的行，执行次数 > 0 即为已覆盖。注释、空行等非可执行行不计入统计。
LCOV 只记录可执行代码行。注释、空行、声明语句、预处理指令等通常不会被追踪。如果某行在源代码中存在但不在 DA 记录中，说明该行不可执行或未被编译到。
重点关注未覆盖行（红色标记），编写针对这些代码路径的测试用例。优先覆盖核心业务逻辑、边界条件和错误处理分支。使用本工具识别覆盖盲区，逐步提升覆盖率。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
范围滑块样式生成器 - 自定义input range外观
可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON，并排展示增删改的行级差异，辅助接口变动追踪。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式，在文本中用不同颜色高亮整个匹配和每个捕获组。
Periodic Sync 事件模拟器 - 手动触发并查看结果
在开发环境中模拟 periodicSync 事件，触发后查看 SW 中的处理逻辑和网络请求。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
多分辨率 Favicon 检查器 - 查看网站图标在各尺寸的显示
输入网站 URL，提取所有 favicon 声明并模拟不同分辨率下的渲染效果。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
HTML5 视频字幕同步辅助工具 - 在线调整 WebVTT
加载视频和 VTT 字幕文件，允许全局偏移时间轴或逐条修改，实时预览同步效果。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
Lorem Ipsum 占位文本生成器 - 在线假文生成
快速生成指定段落数或字数的 Lorem Ipsum 占位文本，适用于 UI 设计、排版测试和原型填充。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
定期后台同步测试器 - 模拟周期性后台更新
注册一个周期性后台同步，模拟触发并显示更新数据。