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