UD5工具箱
使用教程
本教程将详细介绍如何使用 Chrome DevTools Protocol 命令构建器，从选择 CDP 域到生成可直接使用的命令，每一步都有清晰的指引。
第一步：选择 CDP 域（Domain）
打开工具页面后，首先在域选择区域找到您需要的 CDP 域。常用的域包括：
- Page - 页面导航、截图、打印、生命周期事件等操作
- Network - 网络请求监控、拦截和修改
- Runtime - JavaScript 执行、表达式求值、内存分析
- DOM - DOM 树查询和操作
- Debugger - 断点设置、代码暂停、步进调试
- Emulation - 设备模拟、屏幕尺寸和环境仿真
- Input - 模拟用户输入事件
- Target - 浏览器标签页和 iframe 管理
点击域名称后，右侧方法列表会自动更新为该域下的所有可用方法。选择正确的域是构建 CDP 命令的第一步，也是最关键的一步。
第二步：选择具体方法（Method）
在选定域后，从方法列表中选择您需要执行的具体操作。每个方法名称都标注了简要说明，帮助您快速理解其功能。例如选择 Page 域后，可以看到 navigate、captureScreenshot、reload 等方法。
方法选择后，下方的参数编辑区会自动加载该方法所需的参数字段。必填参数会用醒目标记显示，可选参数则相对低调。仔细阅读每个参数的说明，确保正确理解其含义和格式要求。
第三步：设置命令 ID
为命令分配一个唯一 ID。工具默认使用自动递增功能，您也可以手动输入自定义 ID。命令 ID 必须为整数，用于在 WebSocket 通信中匹配请求与响应。
如果您是初次使用，建议保持自动递增设置，让工具自动管理 ID。只有在需要特殊 ID 规则时才手动设置。
第四步：填写命令参数
根据所选方法，填写相应的参数。工具会为每个参数提供清晰的标签和输入框。对于简单参数（如字符串、数字、布尔值），直接在输入框中填写；对于复杂对象参数，使用 JSON 编辑器输入。
参数编辑器支持格式化功能，点击「格式化」按钮可自动美化 JSON 结构，提高可读性；点击「清空」按钮可一键清除所有参数值，快速重置表单。填写参数时请注意数据类型匹配，例如数字类型不应加引号，字符串类型需要加引号。
对于不熟悉的参数，建议先查看 CDP 官方文档了解其含义和取值范围，避免填写错误的参数值导致命令执行失败。
第五步：查看生成的 CDP 命令
完成参数填写后，页面底部会实时显示生成的 CDP JSON 命令。预览区域会格式化显示完整的命令结构，包含 id、method 和 params 三个必要字段。
仔细检查命令格式是否正确，确认无误后点击「复制」按钮，命令将被复制到剪贴板。此时您可以将命令粘贴到 WebSocket 客户端（如 wscat、Postman WebSocket）或直接集成到代码中使用。
预览区域同时提供格式化和压缩两种视图，格式化视图便于检查，压缩视图适合直接使用。根据您的需求选择合适的显示模式。
第六步：使用 Puppeteer 示例代码
在 CDP 命令预览下方，工具同时提供 Puppeteer 调用示例代码。示例代码展示了如何在 Puppeteer 中创建 CDP 会话、发送命令并处理响应的完整流程。
您可以直接复制示例代码到项目中使用。示例代码包含完整的错误处理逻辑和响应解析代码，遵循 Puppeteer 最佳实践。对于需要在自动化测试中使用 CDP 的开发者，这大大简化了集成过程，减少了从零开始编写集成代码的时间。
示例代码中的关键步骤包括：通过 browser.createBrowserContext() 创建上下文，page.createCDPSession() 创建 CDP 会话，然后使用 session.send() 发送生成的命令。每个步骤都附有注释说明。
第七步：结合快捷预设提升效率
对于频繁使用的 CDP 操作，可以利用快捷预设功能。预设会自动填充域、方法和常用参数，一键生成完整命令。您还可以根据团队需求自定义预设，将常用命令模板保存下来以便反复使用。
使用预设时，只需从预设列表中选择，工具会自动配置所有选项。您可以在此基础上微调参数，快速生成定制化的 CDP 命令，极大提升开发效率。
预设功能特别适合以下场景：日常开发中的快速截图和性能分析、自动化测试中的环境模拟和数据收集、线上问题排查中的实时调试和监控。合理利用预设可以将调试时间缩短一半以上。