PHP数组转JSON - 粘贴print_r输出变JSON
粘贴PHP print_r或var_export输出,智能解析为有效的JSON。
HTML 表格抓取转换 - 粘贴表格 HTML 转 JSON/CSV
粘贴网页上的 HTML 表格代码,自动提取数据并转换为 JSON 或 CSV 格式下载。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON,并排展示增删改的行级差异,辅助接口变动追踪。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象,生成可折叠的树形视图,点击节点复制其键值路径,方便调试。
结构化数据测试 - 粘贴代码实时预览
粘贴结构化数据代码,模拟Google结构化数据测试,检查错误与丰富结果。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
package.json 文件检查器 - 验证字段与依赖规范
粘贴 package.json 内容,检查必填字段、许可证合规、依赖版本格式等常见问题。
JSON 转 TypeScript 接口生成器 - 自动推断类型定义
粘贴 JSON 数据,自动生成对应的 TypeScript interface 或 type 定义,支持嵌套对象和数组。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码,自动处理class→className、行内样式对象化等。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
HTML转JSX/TSX工具 - 替换核心属性
将普通HTML片段一键转为React可用的JSX,处理class→className、style等。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片(或使用占位色),配置标题、副标题和按钮,生成Hero区域代码。
JavaScript循环性能测试 - 比较多种写法
在浏览器中即时测试for、forEach、map、for-of等循环的执行速度,帮助选择最优写法。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style,智能合并相同样式生成 class,并替换为类名以减小体积。
HTML表格转CSV工具 - 在线提取网页表格数据
粘贴HTML表格代码或从网页抓取,自动识别行列并转换为CSV格式,方便导入Excel。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
XPath选择器测试工具 - 对HTML文档提取
粘贴HTML并编写XPath表达式,高亮显示匹配的节点并提取文本。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为,生成现代化、无障碍友好的模态框代码。
<dialog> 元素构建器 - 模态框与表单集成
可视化配置原生 dialog 元素,添加表单并设置方法,生成完整 HTML/CSS/JS 代码。
JSON 循环引用检测器 - 发现对象环状依赖
解析 JSON 字符串或粘贴对象字面量,检测是否存在循环引用并指出路径,辅助调试。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示,点击查看具体效果和代码。
JSON 转 Python 数据类定义 - dict 与 dataclass 生成
将 JSON 结构转换为 Python 字典示例或 dataclass 定义,快速生成可用的 Python 数据模型。
JSON转YAML工具 - 在线配置格式互换
粘贴JSON对象,一键转换为简洁的YAML格式,方便编写配置文件。
Popover弹窗生成器 - 纯HTML声明式弹出层
配置内容和位置,生成使用最新HTML popover属性的轻量弹窗代码,无需JavaScript。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容,合并生成单独CSS文件。
UD5工具箱