UD5工具箱
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
测试覆盖率可视化器
上传 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气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
范围滑块样式生成器 - 自定义input range外观
可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON，并排展示增删改的行级差异，辅助接口变动追踪。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
PDF 页面提取器 - 选择范围另存新PDF
上传PDF，选择需要保留的页码（如1,3-5），生成仅含这些页面的新文档。
颜色对比度实时分析器 - 多标准WCAG AA/AAA检测
支持任意格式颜色输入，计算对比度并显示WCAG 2.1各级别通过情况，含颜色建议。
图片暗角效果工具 - 在线添加Vignette晕影
为照片四周添加纯色或渐变暗角，调整强度与羽化程度，营造复古或突出中心效果。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光，实时预览毛玻璃面板并复制CSS代码。
视力自查E字表 - 屏幕校准距离测量
基于屏幕物理尺寸校准后显示标准对数视力表，粗测裸眼视力。