UD5工具箱
核心功能特性
本工具提供全方位的 CDP 命令构建功能，从域选择到命令生成，每一步都经过精心设计，确保开发者获得最佳使用体验。
完整 CDP 域导航
支持 Chrome DevTools Protocol 全部域（Domain），包括 Page、Network、Runtime、DOM、Debugger、Input、Emulation、Target 等数十个域。每个域下包含该域支持的所有方法，按字母顺序排列，方便快速查找。域和方法的分类采用层级结构，开发者可以直观地浏览和定位所需的 CDP 命令。无需翻阅冗长的官方文档，所有域和方法一目了然，极大降低了 CDP 的使用门槛。
可视化参数编辑器
当选择具体方法后，工具会动态展示该方法所需的参数表单。每个参数字段都标注了参数名称、类型和是否必填，开发者只需填写相应值即可生成完整的命令。对于复杂嵌套参数，提供 JSON 格式化编辑器，支持语法高亮和格式化功能。参数编辑器还会自动验证输入格式，当检测到 JSON 格式错误时给出明确提示，避免生成无效命令。
快捷预设功能
内置多种常用 CDP 操作预设，如页面截图、性能分析、网络监控、设备模拟等。选择预设后自动填充域、方法和参数，一键生成完整命令。预设功能特别适合不熟悉 CDP 的新手开发者，快速完成常见调试任务。同时支持自定义预设保存，方便团队共享常用命令模板，统一调试流程。
JSON 命令实时预览
实时预览生成的 CDP JSON 命令，格式清晰、结构完整。预览区域支持语法高亮显示，方便开发者检查和验证命令格式。提供一键复制功能，可直接将命令复制到剪贴板，粘贴到 WebSocket 客户端或代码编辑器中使用。支持命令格式化和压缩两种显示模式，满足不同场景的使用需求，让命令的检查和使用变得前所未有的便捷。
Puppeteer 示例代码生成
除了原始 JSON 命令外，还自动生成 Puppeteer 调用示例代码。示例代码展示如何在 Puppeteer 中通过 CDPSession 发送原始 CDP 命令，包含完整的错误处理和响应处理逻辑。开发者可以直接复制示例代码到项目中使用，大幅减少集成 CDP 的开发时间。示例代码遵循 Puppeteer 最佳实践，代码风格规范、注释清晰。
命令 ID 管理
支持自定义命令 ID，工具提供自动递增功能，确保同一连接中每个命令的 ID 唯一。开发者可以手动设置 ID 值，也可以使用自动生成功能。命令 ID 在异步通信中至关重要，正确管理 ID 可以有效匹配请求与响应，避免调试过程中的混淆和错误。
格式化与清空工具
参数编辑器提供格式化功能，自动美化 JSON 参数结构，提高可读性。清空功能一键清除所有参数值，快速重置表单。这些小工具看似简单，但在频繁调试过程中能显著提升工作效率，避免手动删除大量参数的繁琐操作。格式化功能特别适合处理复杂的嵌套参数，让参数结构一目了然。
响应式界面设计
采用 Bootstrap 5 响应式框架，完美适配桌面端和移动端。在不同屏幕尺寸下都能获得良好的使用体验，开发者可以在任何设备上快速构建 CDP 命令。界面设计简洁直观，无需阅读使用说明即可上手操作，降低工具使用门槛。整体布局清晰合理，左侧选择域和方法，右侧编辑参数和预览结果，操作流程自然流畅。