UD5工具箱
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
布局网格覆盖层 - 可拖调栅格参考线
布局网格覆盖层
0条参考线
覆盖层
网格参数
显示标尺
吸附网格
快速预设
提示：拖动参考线移动位置，双击参考线可快速删除。按 G 键快速切换覆盖层显示。
覆盖层使用 pointer-events: none，不会干扰页面正常交互（参考线把手除外）。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
寻路算法可视化 - BFS/DFS/A*网格动画
在网格上设置起点/终点和障碍，动态演示广度优先、深度优先、A*等搜索过程。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表，支持删除已选项，键盘可全控。
CSS Flexbox交互演示 - 在线弹性布局学习
拖拽调节Flex容器和子项属性，即时可视化响应效果，同时显示CSS代码，边学边用。
Web Locks API 探索器 - 跨标签页资源协调
获取和释放命名锁，观察多个标签页如何排队等待资源访问。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
文本换行优化器 - 标题漂亮折行预览
输入标题文本，尝试不同容器宽度，手动插入<br>或使用text-wrap:balance显示效果。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
SVG背景图案集 - 点线/网格/波纹等
提供数十种精致SVG背景纹理，可调颜色，生成CSS背景代码或下载SVG。
网络连接信息详情 - effectiveType与带宽估计
展示Navigator.connection提供的网络类型、下行速度、RTT等实时信息，辅助自适应加载。
互补色实时生成器 - 选一色得全套方案
选择任意基色，自动计算互补色、分裂互补及三分色，提供十六进制代码，一键复制。
gRPC-Web 一元调用测试器 - 发送请求并查看序列化
输入 gRPC 服务地址和方法，构造 JSON 请求体，观察转为二进制帧并接收响应解码。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
迷宫自动走解器 - DFS/BFS寻路动画
绘制或生成迷宫墙，选择DFS或BFS算法自动寻找出口，动画展示探索过程。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。