CORS 预检请求测试器 - 发送 OPTIONS 分析响应
向指定 URL 发送预检请求,分析 Access-Control-* 响应头是否符合预期。
npm 包体积估算器 - 分析依赖对打包产物的影响
选择包名并获取其大小及依赖树,估算引入后对前端打包体积的影响,辅助选型。
二叉树遍历动画 - 前/中/后/层序可视化
构建或随机生成二叉树,逐步动画展示前序、中序、后序和层序遍历的路径。
响应式设计测试工具 - 多分辨率视口预览
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
Terraform 计划预览器 - 资源变更可视化
粘贴terraform plan输出,解析并显示资源的增加、更改与销毁列表,辅助审查。
随机决策小工具 - 快速抛币/选A选B
输入几个选项,随机选出其中一项,包含简单动画,帮您解决晚餐吃啥。
远程办公签到板 - 健康状态与工作状态更新
团队成员每日更新工作状态和身体状态,便于经理远程了解。
前端性能最佳实践自查表 - 交互式检查清单
覆盖加载、渲染、安全、可访问性等领域的自查清单,勾选后生成得分与建议。
二叉树遍历可视化 - 前序/中序/后序动画
构建二叉树节点,动态演示三种深度优先遍历顺序及逐层遍历。
OKR目标设定板 - 目标与关键结果对齐
编写O与对应KR,可视化进度条与完成度,团队或个人目标跟踪的轻量替代。
批处理任务生成器 - 按情境分组效率执行
将同类待办归入电话、外出、电脑等情境,一目了然优化执行顺序。
结构化克隆演示 - 深拷贝支持类型
选择各种数据类型演示structuredClone的深拷贝能力,对比JSON.parse的限制。
NPM 审计结果可视化 - 解析 JSON 报告
粘贴 npm audit --json 的输出,以表格和图表形式展示漏洞级别、影响包和修复建议。
交互式图像分割演示 - 点击分离对象
在图像上点击,利用前端模型将点击范围内的主要物体自动从背景分离。
二维码艺术破坏实验 - 遮盖/涂鸦看容错
在生成的二维码上绘图或遮盖,测试L、M、Q、H不同容错级别的解码成功率。
抗阻训练组间休息计时 - 个性化恢复建议
根据训练目标(力量/增肌/耐力),建议组间休息时长并执行倒计时。
粘贴事件处理演示 - 监听并解析剪贴板内容
捕捉页面粘贴事件,展示文本、HTML 或图片数据,演示如何定制粘贴行为。
键盘布局检测器 - 识别物理按键映射
通过按下键位记录code和key值,推断当前键盘布局(如QWERTY、AZERTY)。
第三方脚本影响评估器 - 分析页面中的外部脚本
输入 URL,列出所有第三方域名的脚本,估算其对加载时间的影响。
CSS缓动效果可视化工具 - 动画速率对比
并排展示ease、ease-in、ease-out等不同CSS缓动函数的动画速率差异,辅助选择合适曲线。
CSV 数据概要分析器 - 列统计与分布可视化
上传CSV文件,自动计算每列的计数、唯一值、缺失率及数值型分布直方图,快速了解数据。
离线页面生成器 - 当无网络时展示
创建当用户离线时展示的简单HTML页面,结合Service Worker使用。
写作灵感提示器 - 情境/角色/冲突随机组合
随机生成包含主角、场景与冲突的写作提示,拯救空白文档,激发创作欲。
四角分区 Shikaku 解谜 - 矩形分割逻辑题
根据数字将网格分割成矩形,使得数字等于矩形面积,拖动创建区域,锻炼几何直觉。
排序算法可视化 - 冒泡/快排/归并动画
选择算法并随机生成数组,以彩色条动画展示排序过程,帮助理解算法。
OffscreenCanvas 性能测试 - 主线程 vs Worker 渲染速度
分别在主线程和 Worker 中使用 Canvas 执行密集绘制,对比 FPS 和主线程阻塞程度。
content-visibility 性能演示 - 跳过渲染不可见区域
对长列表应用 content-visibility:auto,对比启用前后渲染时间和内存占用。
海战棋布局求解辅助 - 根据命中推断
输入你已攻击的位置和结果,工具用逻辑推断最可能的船体位置。
当前页面HTTP头查看 - fetch请求获取响应头
发起请求获取当前URL或任意允许CORS的URL的Response Headers,展示详情。
资源提示标签生成器 - dns-prefetch/preconnect/preload
根据输入的外部域名,生成 dns-prefetch、preconnect 和 preload 标签。
UD5工具箱