UD5工具箱
WebHID设备信息查看 - 连接HID外设
列出已连接的HID设备，获取产品名和供应商ID，并可监听输入报告。
筛选:
| # | 时间 | 设备 | 类型 | 通道 | 数据1 | 数据2 | 描述 |
|---|---|---|---|---|---|---|---|
|
等待MIDI消息... 请连接MIDI设备并发送数据 |
|||||||
0
总消息数
0
音符开
0
音符关
0
控制变更
活跃音符
无
最后消息
--
常见问题与MIDI知识
什么是MIDI？
MIDI（Musical Instrument Digital Interface，乐器数字接口）是一种用于电子乐器、计算机和其他设备之间通信的行业标准协议。它传输的不是音频信号，而是演奏数据——如按下了哪个键、力度多大、弯音轮位置等控制信息。MIDI广泛应用于音乐制作、现场演出和数字音频工作站（DAW）中。
Web MIDI API的浏览器兼容性如何？
Web MIDI API目前在基于Chromium的浏览器中得到良好支持，包括Google Chrome（43+）、Microsoft Edge（79+）和Opera（30+）。Firefox和Safari目前不支持此API。如果您使用的是不支持的浏览器，建议切换到Chrome或Edge来使用本工具。所有操作均在本地完成，不会上传您的MIDI数据。
MIDI通道是什么？有多少个？
MIDI协议支持16个独立的通道（编号1-16，在数据中用0-15表示）。每个通道可以独立传输音符、控制变更等消息，允许一台MIDI控制器同时控制多个不同的音源或乐器。通道10传统上被保留用于打击乐声部。本监视器会清晰显示每条消息所属的通道。
音符编号如何对应音名？
MIDI使用0-127的数字表示音符。中央C（C4）对应编号60。每增加1个半音，编号加1。例如：60=C4, 61=C#4, 62=D4, 64=E4, 67=G4, 69=A4（标准音高440Hz）。八度每变化一个，编号变化12。本工具自动将音符编号转换为音名（如C#4、Gb3等），方便阅读。
什么是CC（控制变更）消息？
CC（Control Change，控制变更）是MIDI中用于传输实时控制数据的消息类型。常见CC包括：CC#1调制轮、CC#7音量、CC#10声像（Pan）、CC#11表情、CC#64延音踏板。CC值范围为0-127。本监视器会自动识别常见CC编号并显示其名称，帮助您理解控制器映射。
弯音（Pitch Bend）消息如何工作？
弯音消息使用两个数据字节组合成14位精度（0-16383），中心位置为8192（无弯音）。低于8192为向下弯音，高于8192为向上弯音。这种高精度设计使得弯音过渡非常平滑。本工具会将原始字节解析为14位数值并显示相对于中心位置的偏移量。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
HTTP 响应头获取器 - 查看任意 URL 的 Header 详情
输入 URL，通过前端代理或 CORS 配置获取并显示完整的响应头信息。
自然音和弦查询 - 某调的和弦级数
选择大调或小调，显示每个音级上构建的自然三和弦和七和弦的组成。
震动模式编辑器 - 自定义设备振动序列
设计振动时长与停顿数组，点击试振，复制代码在移动端触发自定义触感反馈。
JavaScript this 上下文测试器 - 不同调用方式下的指向
编写函数并选择调用方式（普通、方法、call、apply、箭头等），输出 this 的值。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
代码审查清单动态生成 - 按语言和项目定制
选择编程语言和关注领域（安全、性能、可读性），生成定制化的代码审查核对表。
内容索引 API 查看器 - 管理离线可用内容列表
添加、列出和删除内容索引中的条目，展示离线可用内容。
开源许可证匹配器 - 根据需求找协议
回答关于再发布、开源、专利等要求，工具推荐最合适的开源许可证。
Periodic Sync 事件模拟器 - 手动触发并查看结果
在开发环境中模拟 periodicSync 事件，触发后查看 SW 中的处理逻辑和网络请求。
BroadcastChannel同步器 - 同源跨标签页通信
打开多个同源页面，通过Broadcast Channel API实时同步消息或状态变化。
.env 文件对比合并器 - 找出缺失与差异变量
上传两个 .env 文件，高亮仅在其中一个文件中存在的变量，快速同步环境配置。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
JavaScript 闭包可视化 - 作用域链与环境记录
编写嵌套函数并单步执行，直观展示每个函数的作用域和闭包变量。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
网络连接信息详情 - effectiveType与带宽估计
展示Navigator.connection提供的网络类型、下行速度、RTT等实时信息，辅助自适应加载。
gRPC-Web 一元调用测试器 - 发送请求并查看序列化
输入 gRPC 服务地址和方法，构造 JSON 请求体，观察转为二进制帧并接收响应解码。
package.json 文件检查器 - 验证字段与依赖规范
粘贴 package.json 内容，检查必填字段、许可证合规、依赖版本格式等常见问题。
本地HTTPS代理演示 - 请求转发排查
通过Service Worker或本地fetch模拟拦截和转发请求，查看修改后的请求响应。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
URLPattern匹配测试器 - 现代路由规则
输入URL模式字符串（通配符、命名组）和测试URL，验证是否匹配并提取参数。
HTML5 视频字幕同步辅助工具 - 在线调整 WebVTT
加载视频和 VTT 字幕文件，允许全局偏移时间轴或逐条修改，实时预览同步效果。
屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁，并监听释放事件，适用于视频播放或演示场景。
NPM包名可用性查询 - 内置类似名称检查
输入包名，通过NPM Registry API查询是否已被占用，并显示近似的包名建议。
在线颜色选择器 - 拾色器与调色板工具
在线颜色选择器，支持从色盘取色、HEX/RGB/HSL颜色值转换，提供调色板功能，方便前端设计取色。
开源许可证兼容性检查器 - 混合项目合规指南
选择或输入多个开源许可证，查看它们组合在闭源或开源项目中的兼容性矩阵与义务。