ContextQMD
Back to Aionui

CDP (Chrome DevTools Protocol) for MCP Development

docs/guides/cdp.md

1.9.255.9 KB
Original Source

CDP (Chrome DevTools Protocol) for MCP Development

AionUi supports CDP for external debugging tools integration. In development mode (just dev), CDP is enabled by default on port 9230.

Enable CDP in Production

  1. Open AionUi Settings → System → Developer Debug
  2. Enable "Enable Remote Debugging (CDP)"
  3. Restart the app

Configure MCP chrome-devtools

Add this to your IDE's MCP configuration. The configuration file location depends on your IDE:

IDEConfig Path
Cursor~/.cursor/mcp.json
VS Code~/.vscode/mcp.json
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)
Codebuddy~/.codebuddy/mcp.json
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "[email protected]", "--browser-url=http://127.0.0.1:9230"]
    }
  }
}

Other AI-Friendly Development Tools

AionUi can integrate with other MCP tools for enhanced development experience:

ToolPurposeConfig
Playwright MCPBrowser automation (alternative to chrome-devtools)"@playwright/mcp@latest"
Puppeteer MCPBrowser automation"@puppeteer/mcp@latest"
Filesystem MCPFile operations@modelcontextprotocol/server-filesystem
Git MCPGit repository operations@modelcontextprotocol/server-git

See MCP Servers for more tools.

Usage with MCP

Once configured, you can use MCP tools to interact with AionUi:

  • list_pages — List all open pages in AionUi
  • take_snapshot — Get accessibility tree snapshot of current page
  • click, fill, hover — Interact with UI elements
  • navigate_page — Navigate to URLs

Inspect with Chrome DevTools

  1. Open http://127.0.0.1:9230/json in Chrome
  2. Click on a page to inspect it with DevTools
  3. Or use Chrome's chrome://inspect → Configure → add 127.0.0.1:9230

CDP (Chrome DevTools Protocol) MCP 开发

AionUi 支持 CDP 用于外部调试工具集成。在开发模式 (just dev) 下，CDP 默认在端口 9230 启用。

在生产环境启用 CDP

  1. 打开 AionUi 设置 → 系统 → 开发者调试
  2. 启用"启用远程调试 (CDP)"
  3. 重启应用

配置 MCP chrome-devtools

将以下配置添加到你的 IDE 的 MCP 配置文件中。配置文件位置取决于你使用的 IDE：

IDE配置路径
Cursor~/.cursor/mcp.json
VS Code~/.vscode/mcp.json
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json (macOS) 或 %APPDATA%\Claude\claude_desktop_config.json (Windows)
Codebuddy~/.codebuddy/mcp.json
json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "[email protected]", "--browser-url=http://127.0.0.1:9230"]
    }
  }
}

其他 AI 友好的开发工具

AionUi 可以集成其他 MCP 工具来增强开发体验：

工具用途配置
Playwright MCP浏览器自动化（chrome-devtools 替代方案）"@playwright/mcp@latest"
Puppeteer MCP浏览器自动化"@puppeteer/mcp@latest"
Filesystem MCP文件操作@modelcontextprotocol/server-filesystem
Git MCPGit 仓库操作@modelcontextprotocol/server-git

更多工具请查看 MCP Servers。

MCP 使用方式

配置完成后，可以使用 MCP 工具与 AionUi 交互：

  • list_pages — 列出 AionUi 中所有打开的页面
  • take_snapshot — 获取当前页面的可访问性树快照
  • click, fill, hover — 与 UI 元素交互
  • navigate_page — 导航到 URL

使用 Chrome DevTools 检查

  1. 在 Chrome 中打开 http://127.0.0.1:9230/json
  2. 点击页面链接使用 DevTools 检查
  3. 或使用 Chrome 的 chrome://inspect → 配置 → 添加 127.0.0.1:9230