Edge DevTools MCP
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Edge DevTools MCPNavigate to example.com and take a screenshot"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Edge DevTools MCP
一个用于与 Microsoft Edge 浏览器 DevTools 协议集成的 MCP (Model Context Protocol) 服务器。
功能特性
🌐 连接和控制 Microsoft Edge 浏览器
🔧 完整的 DevTools 协议支持
📸 页面截图功能
🎯 DOM 操作和查询
⚡ JavaScript 代码执行
🌍 网络请求监控
🔍 页面元素自动化操作
Related MCP server: Chrome DevTools MCP
安装
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: 导航到指定 URLedge_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 SDKpuppeteer-core: 浏览器自动化ws: WebSocket 客户端
许可证
MIT License
贡献
欢迎提交 Issue 和 Pull Request!
相关链接
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/syunnrai123/Edge-DevTools-MCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server