Edge Devtools MCP

Edge DevTools MCP

一个用于与 Microsoft Edge 浏览器 DevTools 协议集成的 MCP (Model Context Protocol) 服务器。

功能特性

• 🌐 连接和控制 Microsoft Edge 浏览器
• 🔧 完整的 DevTools 协议支持
• 📸 页面截图功能
• 🎯 DOM 操作和查询
• ⚡ JavaScript 代码执行
• 🌍 网络请求监控
• 🔍 页面元素自动化操作

安装

npm install edge-devtools-mcp

使用方法

环境变量配置

可以通过以下环境变量配置连接参数：

• EDGE_DEBUG_PORT: Edge 调试端口（默认：9222）
• EDGE_DEBUG_HOST: 调试主机（默认：localhost）
• EDGE_HEADLESS: 是否无头模式（默认：false）
• EDGE_BROWSER_PATH: Edge 浏览器可执行文件路径

启动 Edge 调试模式

在使用前，需要以调试模式启动 Edge 浏览器：

Windows:

msedge.exe --remote-debugging-port=9222 --user-data-dir="C:\edge-dev-debug"

macOS:

/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222 --user-data-dir="/tmp/edge-dev-debug"

Linux:

microsoft-edge --remote-debugging-port=9222 --user-data-dir="/tmp/edge-dev-debug"

MCP 配置

在 Claude Desktop 的配置文件中添加：

{
  "mcpServers": {
    "edge-devtools": {
      "command": "node",
      "args": ["path/to/edge-devtools-mcp/dist/index.js"]
    }
  }
}

可用工具

浏览器连接

• edge_connect: 连接到 Edge 浏览器
• edge_disconnect: 断开连接
• edge_get_targets: 获取所有可用目标

页面操作

• edge_navigate: 导航到指定 URL
• edge_screenshot: 截取页面截图
• edge_get_page_content: 获取页面 HTML 内容

DOM 操作

• edge_get_element: 获取元素信息
• edge_click_element: 点击元素
• edge_type_text: 在输入框中输入文本
• edge_wait_for_selector: 等待元素出现

JavaScript 执行

• edge_evaluate: 执行 JavaScript 表达式

DevTools 协议

• edge_enable_devtools: 启用 DevTools 会话
• edge_dom_query: 查询 DOM 节点
• edge_get_attributes: 获取元素属性

使用示例

基本网页操作

// 连接到浏览器
await edge_connect();

// 导航到网页
await edge_navigate({ url: "https://example.com" });

// 等待页面加载
await edge_wait_for_selector({ selector: "body" });

// 获取页面内容
const { content } = await edge_get_page_content();

// 截取截图
const { screenshot } = await edge_screenshot({ format: "png" });

// 断开连接
await edge_disconnect();

表单填充示例

// 导航到登录页面
await edge_navigate({ url: "https://example.com/login" });

// 等待用户名输入框
await edge_wait_for_selector({ selector: "#username" });

// 填写表单
await edge_type_text({ selector: "#username", text: "myusername" });
await edge_type_text({ selector: "#password", text: "mypassword" });

// 点击登录按钮
await edge_click_element({ selector: "#login-button" });

JavaScript 执行示例

// 执行简单表达式
const { result } = await edge_evaluate({ expression: "document.title" });

// 执行复杂脚本
const { result } = await edge_evaluate({
  expression: `
    const links = Array.from(document.querySelectorAll('a')).map(a => a.href);
    return links.slice(0, 10);
  `
});

DevTools 协议示例

// 获取目标列表
const { targets } = await edge_get_targets();

// 启用 DevTools 会话
const { sessionId } = await edge_enable_devtools({ targetId: targets[0].id });

// 查询 DOM 节点
const { nodeId } = await edge_dom_query({
  sessionId,
  selector: "h1"
});

// 获取节点属性
const { attributes } = await edge_get_attributes({
  sessionId,
  nodeId
});

开发

构建项目

npm run build

开发模式

npm run dev

测试

npm test

代码检查

npm run lint

依赖项

• @modelcontextprotocol/sdk: MCP SDK
• puppeteer-core: 浏览器自动化
• ws: WebSocket 客户端

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

相关链接

• MCP 规范
• Edge DevTools 协议
• Puppeteer 文档