浏览器扩展样板代码生成器 - 定制 manifest 与脚本
选择扩展类型(弹出、内容脚本、后台),生成完整的项目文件和 manifest.json。
表单验证规则测试 - Constraint API
设置不同验证属性和自定义消息,测试HTML5表单验证触发效果。
内置Web组件演示 - 原生自定义元素
展示一些常用内置HTML元素和自定义元素例子,提供代码复制。
排序算法可视化 - 冒泡/快排/归并动画
选择算法并随机生成数组,以彩色条动画展示排序过程,帮助理解算法。
View Transition API 演练场 - 页面切换动画配置
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
数图/逻辑绘图求解器 - 自动解Nonogram
输入行与列的线索数字,自动求解逻辑绘图谜题并显示像素图。
Server-Sent Events 代码片断生成 - 客户端与服务端模板
配置事件类型和重试间隔,生成用于接收 SSE 的前端 EventSource 代码和后端流示例。
Import Map 演示 - 浏览器端模块映射实验
编写 HTML 和 import map,在浏览器中直接导入裸标识符模块并执行。
Reflect API 使用浏览器 - 对象操作方法速查与测试
列出所有 Reflect 静态方法,提供参数输入并执行,查看返回值和副作用。
Symbol 原始值探索 - 创建与使用唯一标识符
创建 Symbol,查看其描述与唯一性,理解如何作为对象属性键使用。
图标字体实时预览 - 输入码点测试大小
粘贴自定义图标字体的Unicode,调节尺寸颜色立即查看效果。
流体排版 CSS 生成器 - clamp() 函数计算
输入最小/最大字体大小和视口范围,生成精确的 clamp() 值及回退方案。
排版比例预览器 - 模块化比例尺生成
选择基数大小与比例(如黄金比例),预览标题到正文字号层叠样式序列。
表单验证演练场 - HTML5 Constraint API 演示
展示各种 HTML5 验证属性(required, pattern, min, max 等)和自定义验证消息的效果。
浏览器标签页预览模拟 - 切换主题
设置浏览器标题和图标,模拟在暗色/亮色主题下标签栏的样子。
ES 私有字段演示 - # 语法与封装
创建带 # 私有字段的类,尝试外部访问观察语法错误,理解封装。
ES Module 与普通脚本对比演示 - 作用域与加载
对比 ES Module 和经典脚本的变量作用域、严格模式以及执行时机。
结构化克隆演示 - 深拷贝支持类型
选择各种数据类型演示structuredClone的深拷贝能力,对比JSON.parse的限制。
二叉树遍历可视化 - 前序/中序/后序动画
构建二叉树节点,动态演示三种深度优先遍历顺序及逐层遍历。
Image Capture API 演示 - 拍照并获取原始帧
使用 ImageCapture.takePhoto() 拍摄高分辨率照片,或抓取实时帧并下载。
Chrome DevTools Protocol 命令构建器 - 生成调试命令
浏览 Chrome DevTools Protocol 域和方法,填充参数生成 JSON 命令,用于远程调试。
二叉树遍历动画 - 前/中/后/层序可视化
构建或随机生成二叉树,逐步动画展示前序、中序、后序和层序遍历的路径。
线段树区间查询演示 - 构建/更新/查询
可视化线段树的构建、单点更新和区间求和查询过程,理解树状结构。
数组操作方法性能对比 - map/filter/reduce/for 循环
在同一数据上运行多种数组遍历方式,测量并比较它们的执行时间,辅助性能优化决策。
代码竞速计分板 - 字符数统计
输入代码并自动去除无意义空格,统计有效字符数,用于Code Golf比赛。
Server-Sent Events 模拟器 - 单向实时数据流演示
在前端创建模拟 SSE 连接,接收服务器推送的消息流并实时渲染到页面。
API响应模拟器 - JSON延迟/错误自定义
定义端点、JSON响应体和延迟毫秒,模拟后端API供前端本地开发调试。
嵌入式Logo二维码设计器 - 自定义颜色与中心图
输入链接,上传Logo嵌入中心,选择颜色与模板,生成个性化高容错艺术码。
交互式线性回归 - 拖拽数据点修拟合线
在散点图上拖拽数据点,实时更新最小二乘回归线,显示斜率和截距。
分页组件生成器 - 自定义样式与按钮
设置总页数与当前页,生成数字式或省略式分页导航条。
UD5工具箱