Skip to main content
Glama
syunnrai123

Edge DevTools MCP

by syunnrai123

Edge DevTools MCP

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

功能特性

  • 🌐 连接和控制 Microsoft Edge 浏览器

  • 🔧 完整的 DevTools 协议支持

  • 📸 页面截图功能

  • 🎯 DOM 操作和查询

  • ⚡ JavaScript 代码执行

  • 🌍 网络请求监控

  • 🔍 页面元素自动化操作

Related MCP server: superpowers-chrome

安装

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!

相关链接

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI coding assistants to control and inspect a live Chrome browser for automation, debugging, performance analysis, network monitoring, and DOM interaction through Chrome DevTools Protocol.
    1,516,489 npm
    Apache 2.0
  • A
    license
    A
    quality
    A
    maintenance
    Enables direct browser control via Chrome DevTools Protocol, supporting navigation, interaction, content extraction, and screenshots through a single MCP tool.
    1
    352
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI clients to directly control a real Chrome/Edge browser via a WebSocket extension, supporting operations like navigation, clicks, screenshots, and JavaScript evaluation.
    18 npm
    1
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables reading browser DevTools data (tabs, console errors, network requests, screenshots, DOM, CSS, JS execution) via Chrome DevTools Protocol.
    3,661 npm
    MIT