Edge DevTools MCP

与Microsoft Edge浏览器DevTools协议集成的MCP（模型上下文协议）服务器。

功能特性

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

安装

npm install edge-devtools-mcp

使用说明

环境变量配置

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

• EDGE_DEBUG_PORTEdge调试端口（默认：9222）
• EDGE_DEBUG_HOST调试主机（默认：localhost）
• EDGE_HEADLESS是否无头模式（默认：false）
• EDGE_BROWSER_PATHEdge浏览器可执行路径

在调试模式下启动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

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/sdkMCP SDK
• puppeteer-core浏览器自动化
• wsWebSocket客户端

许可证

MIT许可证

贡献

欢迎提交问题和拉取请求！

相关链接

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