简介

DevBridge 是一个 Chrome 扩展和 MCP 服务器，用于将任意 AI 工具连接至浏览器，实现调试和自动化。

什么是 MCP？

Model Context Protocol（MCP）是一个开放标准，让 AI 应用能够与外部工具和服务交互。使用 DevBridge 时，你的 AI 编辑器发送 MCP 工具调用，DevBridge 在 Chrome 中执行并返回结果。

DevBridge 能做什么？

DevBridge 提供 18 个 MCP 工具，覆盖两个核心工作流：

调试 —— 读取控制台日志、捕获网络请求、检查无障碍树、执行 JavaScript、截屏。Chrome DevTools 的完整调试工作流，直接在 AI 编辑器中可用。

自动化 —— 点击、输入、滚动、拖拽、填写表单、上传文件、页面导航，并将会话录制为 GIF。构建端到端测试流程，自动化重复性浏览器任务。

工作原理

AI 工具 ←stdio→ MCP 服务器 ←IPC→ 原生宿主 ←Native Messaging→ Chrome 扩展 ←CDP→ 浏览器

1. 你的 AI 工具（如 Claude Code、Cursor）通过 stdio 与 DevBridge MCP 服务器通信
2. MCP 服务器通过本地 socket 将命令转发至 Chrome 扩展
3. 扩展使用 Chrome DevTools Protocol（CDP）在 Chrome 中执行操作
4. 结果返回至你的 AI 工具

所有通信均在本地进行，数据不会离开你的设备。

核心能力

• 18 个 MCP 工具，覆盖页面读取、交互、导航、调试、视觉捕获和标签管理
• 跨源 iframe 支持，包括跨源 Out-of-Process iframe
• Shadow DOM 穿透，同时支持 open 和 closed Shadow DOM
• Canvas 交互，12 个子动作（点击、绘制、滚动、手势、像素检测、截图等）
• GIF 录制，将多步骤交互录制为动画 GIF
• 三平台支持，Windows、macOS、Linux
• 权限管理，基于域名的细粒度访问控制

开始使用

→ 安装 Chrome 扩展