文本换行优化器 - 标题漂亮折行预览
输入标题文本,尝试不同容器宽度,手动插入<br>或使用text-wrap:balance显示效果。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签,转变为独立CSS规则,辅助样式重构。
正则表达式在线测试工具 - JavaScript正则校验
在线正则表达式测试工具,支持JavaScript正则匹配、替换、提取等操作,即时显示匹配结果和高亮。
代码审查清单动态生成 - 按语言和项目定制
选择编程语言和关注领域(安全、性能、可读性),生成定制化的代码审查核对表。
URL参数可视化提取 - 分层解析查询串
粘贴带参数的URL,以表格形式列出所有Query参数与值。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style,智能合并相同样式生成 class,并替换为类名以减小体积。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作(访问、点击、断言等),自动生成 Cypress 测试代码。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容,合并生成单独CSS文件。
文章大纲自动提取器 - 基于标题生成目录
抓取网页或粘贴HTML,提炼h1-h6标题层级,生成可折叠文章大纲,辅助长文浏览。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
智能字符实体替换器 - HTML敏感符号一键转换
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON,并排展示增删改的行级差异,辅助接口变动追踪。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值(layout, paint, size),直观对比开启前后渲染和布局的变化。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
结构化数据测试 - 粘贴代码实时预览
粘贴结构化数据代码,模拟Google结构化数据测试,检查错误与丰富结果。
Proxy 对象拦截测试 - 查看 get/set 钩子触发
创建一个 Proxy,定义各种陷阱函数,操作对象时实时显示被拦截的属性和行为。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示,点击查看具体效果和代码。
HTTP 响应头获取器 - 查看任意 URL 的 Header 详情
输入 URL,通过前端代理或 CORS 配置获取并显示完整的响应头信息。
XPath选择器测试工具 - 对HTML文档提取
粘贴HTML并编写XPath表达式,高亮显示匹配的节点并提取文本。
gRPC-Web 一元调用测试器 - 发送请求并查看序列化
输入 gRPC 服务地址和方法,构造 JSON 请求体,观察转为二进制帧并接收响应解码。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格,支持嵌套展开、列排序和搜索。
PDF 页面提取器 - 选择范围另存新PDF
上传PDF,选择需要保留的页码(如1,3-5),生成仅含这些页面的新文档。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
Kruskal 最小生成树动画 - 按边排序并查集
动画展示 Kruskal 算法选择边和合并集合的过程,高亮生成树边。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
无障碍多选下拉框生成器 - 复选框风格
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
反馈表单构造器 - 打分/文本/多选一键生成
拖拽题型构建客户或员工反馈表,支持NPS、星级评分,导出填写链接或二维码。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称,辅助布局开发和调试。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
UD5工具箱