AionUi 如何开启 CDP 远程调试并用 MCP 的 chrome-devtools 操控应用页面【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi如果你想让 IDE 里的 AI 助手Cursor、VS Code、Claude Desktop 等直接驱动 AionUi 应用内的页面——打开网址、点击元素、填写输入框、读取页面结构——需要做两件事开启 AionUi 的 CDPChrome DevTools Protocol远程调试通道再把 IDE 的 MCP 配置指向这个通道。项目自带的 CDP 开发指南 给出了从开启、配置到验证的完整路径。适用于 AionUi 桌面端如果你是用just dev从源码运行的开发环境CDP 默认已在端口 9230 启用可以直接跳到 MCP 配置一节。开启 CDP 远程调试通道生产安装的版本需要手动开启打开 AionUi 设置 → 系统 → 开发者调试启用“启用远程调试 (CDP)”重启应用。这个开关在运行中不会立即生效改动后必须重启。如果你是用just dev跑源码的开发环境对应 justfile 中的dev配方CDP 默认在端口 9230 启用不需要走上面的开关流程。重启后到设置的 CDP 区域确认状态该面板会显示当前 CDP 端口形如http://127.0.0.1:port、/json地址的打开按钮以及 chrome-devtools MCP 配置的一键复制实现见 DevSettings.tsx。有一点需要留意文档以 9230 作为端口基准但源码说明旧的固定 9230–9250 端口预留已移除、实际监听端口在应用启动时确定后回显到设置页见 configureChromium.ts 的注释。因此如果设置页显示的端口不是 9230后续所有地址都以设置页显示的为准。在 IDE 中配置 chrome-devtools MCP把以下配置添加到你的 IDE 的 MCP 配置文件位置取决于你使用的 IDE来自 cdp.mdIDE配置路径Cursor~/.cursor/mcp.jsonVS Code~/.vscode/mcp.jsonClaude DesktopmacOS~/Library/Application Support/Claude/claude_desktop_config.jsonWindows%APPDATA%\Claude\claude_desktop_config.jsonCodebuddy~/.codebuddy/mcp.json{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcp0.16.0, --browser-urlhttp://127.0.0.1:9230] } } }其中chrome-devtools-mcp0.16.0是文档固定的包版本--browser-url里的端口就是上一步开启的 CDP 端口如果设置页显示的不是 9230把9230替换成实际端口即可。直接复制设置页提供的 MCP 配置可以省去这次手动替换。验证通道是否可用文档给了两种用 Chrome 直接验证的方式在 Chrome 中打开http://127.0.0.1:9230/json端口替换为实际端口点击返回的页面链接即可用 DevTools 检查对应页面或者进入 Chrome 的chrome://inspect→ Configure → 添加127.0.0.1:9230之后就能在 inspect 列表里看到 AionUi 的页面。能列出页面并点开检查说明 CDP 通道本身是通的MCP 走的是同一条通道。用 MCP 工具操控页面配置生效后IDE 的 MCP 客户端就能用这些工具与 AionUi 交互工具清单来自 cdp.mdlist_pages— 列出 AionUi 中所有打开的页面可以最先调用它确认连接已打通take_snapshot— 获取当前页面的可访问性树快照用于查看页面结构click、fill、hover— 与 UI 元素交互navigate_page— 导航到指定 URL。一个可以直接照着试的顺序先list_pages确认能看到 AionUi 里已打开的页面再take_snapshot读取目标页结构然后按需navigate_page跳转、fill填值、click触发操作完再take_snapshot看结果变化。工具名和参数以你接入的 chrome-devtools MCP 实际暴露的为准。限制与排查要点通道地址全部是127.0.0.1回环地址只在本机可用远程机器上的 MCP 客户端连不上这条通道。开启/关闭开关后必须重启应用才生效设置页在配置与运行状态不一致时会给出需要重启的提示。当前 CDP 桥只暴露应用内浏览器这一个页面目标且当目标页面自身还开着 DevTools 时无法附加会给出可读的报错原因而不是原始异常见 cdpBridge.ts。如果你的 MCP 连不上或附加失败先确认没有同时在该页面上开着 DevTools。文档把 Playwright MCPplaywright/mcplatest列为 chrome-devtools 的浏览器自动化替代方案另列有 Puppeteer MCP、Filesystem MCP、Git MCP 等工具本文主路径只用 chrome-devtools这些仅作为可选替代记录。【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
