MIDI信息监视器 - 连接设备查看音符/控制
通过Web MIDI API连接键盘,实时显示收到的音符开/关与控制器变化。
UD5工具箱
连接并查看 HID 外设的详细信息、报告结构与实时数据
https:// 或 localhost 访问。
点击上方 "选择 HID 设备" 按钮,在弹出的设备选择器中授权并连接您的 HID 外设。
支持的设备包括:游戏手柄、键盘、鼠标、传感器、自定义 HID 设备等。
sendFeatureReport 和 receiveFeatureReport 方法操作,不参与常规数据流。requestDevice();productName) 来自操作系统提供的设备描述符。并非所有操作系统或设备都会填充此字段。如果显示为"—",说明操作系统未提供该字符串描述符。这不影响设备的功能和通信,您仍然可以通过 VID/PID 识别设备。您也可以在设备管理器中查看设备属性获取更多信息。通过Web MIDI API连接键盘,实时显示收到的音符开/关与控制器变化。
输入 URL,通过前端代理或 CORS 配置获取并显示完整的响应头信息。
在线颜色选择器,支持从色盘取色、HEX/RGB/HSL颜色值转换,提供调色板功能,方便前端设计取色。
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
设定物理页框数,输入页引用串,动画展示不同页面置换算法的缺页率。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
搜索CSS属性和选择器,展示在主流浏览器的支持版本和全局使用率百分比。
在后台 Worker 中计算大范围内的质数,主线程实时绘制进度条,展示多线程优势。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
快速检测系统是否支持特定的URL Scheme(如mailto:、tel:、tg:)。
监测页面加载过程中的布局偏移,定时截图并合成 GIF,直观展示视觉稳定性问题。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
添加、列出和删除内容索引中的条目,展示离线可用内容。
从一个基色或图片提取的颜色,自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
使用新的迭代器辅助方法链式处理数据,查看懒求值效果。
向指定 Webhook URL 发送自定义 JSON 负载,查看响应状态码和内容,记录发送历史。
检测浏览器是否支持特定自定义协议(如mailto:, tg:),并尝试调用。
编写带有伪类的选择器,实时高亮匹配的HTML元素,探索现代CSS选择器的能力。
在开发环境中模拟 periodicSync 事件,触发后查看 SW 中的处理逻辑和网络请求。
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
设计振动时长与停顿数组,点击试振,复制代码在移动端触发自定义触感反馈。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
打开多个同源页面,通过Broadcast Channel API实时同步消息或状态变化。
可视化选择操作(访问、点击、断言等),自动生成 Cypress 测试代码。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性,实时观察布局变化,理解弹性盒子。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
应用 contain 的各种值(layout, paint, size),直观对比开启前后渲染和布局的变化。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。