AionUi 如何开启 CDP 远程调试并用 MCP 的 chrome-devtools 操控应用页面？

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 up｜Star if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi

如果你想让 IDE 里的 AI 助手（Cursor、VS Code、Claude Desktop 等）直接驱动 AionUi 应用内的页面——打开网址、点击元素、填写输入框、读取页面结构——需要做两件事：开启 AionUi 的 CDP（Chrome DevTools Protocol）远程调试通道，再把 IDE 的 MCP 配置指向这个通道。项目自带的 CDP 开发指南 给出了从开启、配置到验证的完整路径。适用于 AionUi 桌面端；如果你是用just dev从源码运行的开发环境，CDP 默认已在端口 9230 启用，可以直接跳到 MCP 配置一节。

开启 CDP 远程调试通道

生产安装的版本需要手动开启：

1. 打开 AionUi 设置 → 系统 → 开发者调试；
2. 启用“启用远程调试 (CDP)”；
3. 重启应用。这个开关在运行中不会立即生效，改动后必须重启。

如果你是用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.md）：

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@0.16.0", "--browser-url=http://127.0.0.1:9230"] } } }

其中chrome-devtools-mcp@0.16.0是文档固定的包版本；--browser-url里的端口就是上一步开启的 CDP 端口，如果设置页显示的不是 9230，把9230替换成实际端口即可。直接复制设置页提供的 MCP 配置可以省去这次手动替换。

验证通道是否可用

文档给了两种用 Chrome 直接验证的方式：

1. 在 Chrome 中打开http://127.0.0.1:9230/json（端口替换为实际端口），点击返回的页面链接即可用 DevTools 检查对应页面；
2. 或者进入 Chrome 的chrome://inspect→ Configure → 添加127.0.0.1:9230，之后就能在 inspect 列表里看到 AionUi 的页面。

能列出页面并点开检查，说明 CDP 通道本身是通的，MCP 走的是同一条通道。

用 MCP 工具操控页面

配置生效后，IDE 的 MCP 客户端就能用这些工具与 AionUi 交互（工具清单来自 cdp.md）：

• list_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 MCP（"@playwright/mcp@latest"）列为 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 up｜Star if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi