Playwright DevTools MCP服务器🎭
一个专门的模型上下文协议（MCP）服务器，通过Playwright为AI模型提供全面的Chrome DevTools访问。与专注于基本浏览器自动化的现有MCP服务器不同，这实现了自主调试、性能分析和安全检查功能。
](https://badge.fury.io/js/playwright-devtools-mcp) 
🚀 是什么让这与众不同
现有剧作家MCP服务器：专注于DOM自动化（点击、打字、表单填写）\ 我们的DevTools MCP服务器: 调试第一种方法 通过Chrome DevTools协议
- 🐛 控制台日志分析 -实时错误检测和调试
- 🌐 网络监控 -请求/响应检查和故障分析
- ⚡ 性能指标 -核心网络生命和资源时间
- 💾 储存检查 -本地存储、会话存储、带清除功能的Cookie
- 🎨 可视化调试 -截图、DOM分析、元素属性检查
- 🔒 证券分析 -SSL证书、标头、CSP违规 *（即将推出）*
📦 安装
npm install -g playwright-devtools-mcp或者为了当地发展：
git clone https://github.com/agibson/playwright-devtools-mcp.git
cd playwright-devtools-mcp
npm install🔧 快速开始
1.克劳德桌面设置
添加到您的Claude Desktop配置(~/claude_desktop_config.json):
{
"mcpServers": {
"playwright-devtools": {
"command": "npx",
"args": ["playwright-devtools-mcp"],
"env": {
"PLAYWRIGHT_HEADLESS": "true"
}
}
}
}2.完整调试示例
// In Claude Desktop, start a debugging session:
// 1. Launch browser context
const launch = await browser_launch({
headless: false,
viewport: { width: 1280, height: 720 }
});
const contextId = launch.data.contextId;
// 2. Navigate to problematic page
await browser_navigate({
contextId,
url: "https://example.com/problematic-page",
waitFor: "load"
});
// 3. Analyze issues
const errors = await console_get_logs({
contextId,
types: ["error", "warn"],
limit: 20
});
const failed = await network_get_failed_requests({
contextId,
limit: 10
});
const vitals = await performance_get_core_vitals({
contextId,
timeout: 5000
});
// 4. Visual debugging
const screenshot = await debug_take_screenshot({
contextId,
fullPage: true,
format: "png"
});
const element = await debug_get_element_properties({
contextId,
selector: ".broken-component",
includeComputedStyles: true,
includeDimensions: true
});
// 5. Clean up
await browser_close({ contextId });3.替代克劳德桌面配置
开发（当地项目）：
{
"mcpServers": {
"playwright-devtools": {
"command": "node",
"args": ["./src/index.js"],
"cwd": "/path/to/playwright-devtools-mcp",
"env": {
"PLAYWRIGHT_HEADLESS": "false",
"DEBUG": "playwright-devtools:*"
}
}
}
}对于生产（npm包）：
{
"mcpServers": {
"playwright-devtools": {
"command": "npx",
"args": ["playwright-devtools-mcp"],
"env": {
"PLAYWRIGHT_HEADLESS": "true"
}
}
}
}📋 响应格式
所有工具都返回一致的响应格式：
{
"success": true,
"data": {
// Tool-specific data
},
"metadata": {
"timestamp": 1234567890,
"duration": 1500,
"contextId": "context-id"
},
"error": null
}错误响应示例：
{
"success": false,
"data": null,
"metadata": {
"timestamp": 1234567890,
"contextId": "context-123"
},
"error": {
"code": "NAVIGATION_FAILED",
"message": "Failed to navigate: timeout exceeded",
"details": {
"url": "https://example.com",
"timeout": 30000
}
}
}🛠️ 可用工具
浏览器管理
browser_launch-使用自定义视口/用户代理创建浏览器上下文browser_navigate-导航到具有可配置等待条件的URLbrowser_close-清理浏览器上下文和资源
浏览器安全与恢复✅ *v0.2.1中的新功能！*
browser_navigate_safe-具有自动重试和上下文恢复功能的导航browser_health_check-上下文健康验证和自动修复browser_force_recreate-强迫再现有问题的情境
控制台和工具✅
console_get_logs-使用筛选收集控制台消息和错误console_clear_logs-清除存储的控制台数据以释放内存console_evaluate_javascript-在浏览器控制台中执行JavaScript并查看结果
网络分析✅
network_get_requests-通过过滤监控HTTP请求和响应network_get_failed_requests-获取失败的请求（4xx、5xx、连接错误）network_clear_requests-清除存储的网络数据以释放内存
性能监控✅
performance_get_metrics-收集导航时间和资源指标performance_get_core_vitals-测量核心网络生命体征（LCP、FID、CLS）
储存检查✅
storage_get_local_storage-通过大小分析获取本地存储数据storage_get_session_storage-通过筛选获取会话存储数据storage_get_cookies-获取具有安全属性和过期信息的Cookiestorage_clear_data-按类型选择性清除存储（本地存储、会话存储、Cookie）
调试和可视化工具✅ *v0.3.0中的新功能！*
debug_take_screenshot-带有质量选项的屏幕截图（视口或整页）debug_get_page_source-基于综合统计的当前DOM状态提取debug_get_element_properties-深度元素检查（样式、属性、计算值、尺寸、可访问性）debug_get_dom_tree-用于深度控制分析的结构化DOM表示
证券分析 *（即将推出）*
security_analyze_headers-检查安全配置security_get_certificates-SSL/TLS证书分析
🔄 开发状态
当前: ✅ 完整的可视化调试套件（v0.3.0）
- ✅ 具有安全功能和自动恢复的浏览器管理
- ✅ 使用JavaScript执行的控制台日志分析
- ✅ 网络请求监控和故障分析
- ✅ 性能指标和核心网络重要信息
- ✅ 完整的存储检查（本地存储、会话存储、Cookie）
- ✅ 可视化调试 -截图、DOM分析、元素属性检查
- ✅ 高级元件调试 -计算样式、尺寸、可访问性属性
下一步: 🚧 增强的网络分析工具（慢速请求、瀑布、请求拦截）\ 未来: 📋 安全分析、HAR导出、设备模拟
🏗️ 建筑
src/
├── index.js # MCP server entry point
├── server.js # Tool registry and execution
├── tools/ # Individual MCP tools
│ └── browser.js # Browser management tools
├── utils/ # Shared utilities
│ └── browser-manager.js # Browser lifecycle management
└── config/ # Configuration system
└── defaults.js # Default settings⚙️ 配置
环境变量
PLAYWRIGHT_BROWSER_TYPE=chromium # chromium|firefox|webkit
PLAYWRIGHT_HEADLESS=true # true|false
PLAYWRIGHT_TIMEOUT=30000 # milliseconds
MCP_MAX_CONCURRENT_PAGES=3 # resource limits
DEBUG=playwright-devtools:* # debug logging运行时选项
browser_launch({
headless: false, // Override headless mode
viewport: { width: 1920, height: 1080 },
userAgent: "Custom User Agent"
});🧪 测试
# Run all tests
npm test
# Run with debug logging
DEBUG=playwright-devtools:* npm start
# Development mode with auto-reload
npm run dev🔐 身份验证和安全
🛡️ 安全第一的方法：
- 无密码存储 -此服务器不存储或管理身份验证凭据
- 基于会话的工作流 -用户手动登录，AI处理现有会话
- Cookie检查 -AI可以分析和管理现有已验证会话中的Cookie
- 循环中的人类 -身份验证需要人为交互以确保安全
💡 推荐工作流程：
- 用户手动登录他们想要调试的网站
- AI使用MCP服务器检查经过身份验证的会话
- AI可以分析存储、Cookie和调试经过身份验证的页面
- 没有通过MCP服务器存储或传输凭据
🤝 贡献
我们欢迎捐款！这是一个 周末MVP项目 专为社区发展而设计。
🚀 快速贡献指南：
- 分叉存储库
- 创建要素分支：
git checkout -b feature/amazing-devtools-tool - 遵循中的现有工具模式
src/tools/ - 将您的工具添加到
src/server.js工具注册表 - 测试其工作情况并提交拉取请求
📐 架构已准备好扩展：
- 模块化设计 -每个工具都是一个独立的模块
- 一致的API -遵循现有模式以便于维护
- 简单注册 -只需导入并添加到TOOLS数组中
- 清晰的例子 -每个工具都有全面的示例
发展理念
- 保持简单 -专注于核心调试用例，避免过度工程化
- AI优先设计 -API应与AI模型功能良好配合
- 周末MVP心态 -干净、功能强大、可扩展——不是企业级的
📝 许可证
MIT许可证-请参阅 许可证 文件以获取详细信息。
🔗 相关项目
⭐ 支持
如果此项目可以帮助您使用AI调试web应用程序，请考虑：
- ⭐ 对存储库进行标记
- 🐛 报告问题和错误
- 💡 建议新的DevTools功能
- 🤝 贡献代码或文档
______________________________________________________________________
为人工智能驱动的调试未来而构建 🤖✨