Chrome Debug MCP Playwright - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

Chrome Debug MCP 是一个用于浏览器自动化和调试的工具，支持通过 MCP 协议控制 Chrome 浏览器，提供丰富的页面交互和调试功能。

核心功能

1. 浏览器管理
2. 启动和管理 Chrome 浏览器
3. 支持多标签页操作（创建、切换、关闭）
4. 页面导航和交互

5. 截图捕获

6. Greasemonkey API 支持

7. GM_addStyle：CSS 注入
8. GM_getValue/GM_setValue：数据存储
9. GM_deleteValue：存储清理
10. GM_notification：桌面通知
11. GM_setClipboard：剪贴板操作

12. GM_xmlhttpRequest：跨域请求

13. 资源管理

14. 网络请求拦截
15. 请求阻塞、修改和日志记录

16. 资源类型过滤

17. 调试功能

18. 详细的日志系统
19. 日志文件组织
20. 干净的界面输出

适用场景

• 自动化测试
• 网页爬虫
• 浏览器扩展开发
• 用户脚本注入
• 页面调试和监控

工具列表

1. 浏览器工具
2. launch_browser：启动浏览器
3. create_tab：创建新标签页
4. switch_tab：切换标签页

5. intercept_requests：拦截请求

6. Greasemonkey 工具

7. gm_addStyle：注入 CSS
8. gm_setValue/gm_getValue：数据存储

9. gm_xmlhttpRequest：跨域请求

10. 调试工具

11. evaluate：执行 JavaScript
12. get_console_logs：获取控制台日志

常见问题解答

• 如何启动 Chrome 浏览器？
  使用 launch_browser 工具，指定 executablePath 和 url 参数。
• 如何注入用户脚本？
  使用 launch_chrome 工具时，指定 userscriptPath 参数。
• 如何拦截网络请求？
  使用 intercept_requests 工具，指定 patterns 和 action 参数。

使用教程

使用依赖

1. Node.js：v14 或更高版本
   bash
# 安装 Node.js
https://nodejs.org/

2. Chrome 浏览器
   bash
# 安装 Chrome
https://www.google.com/chrome/

3. Visual Studio Code 和 Roo Code 扩展
   bash
# 安装 Roo Code 扩展
https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline

安装教程

1. 克隆仓库
   bash
git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp

2. 安装依赖
   bash
npm install

3. 构建项目
   bash
npm run build

4. 配置 Roo Code
   在 cline_mcp_settings.json 中添加配置：
   json
{
"mcpServers": {
"chrome-debug": {
"command": "node",
"args": ["path/to/chrome-debug-mcp/build/index.js"],
"disabled": false,
"alwaysAllow": []
}
}
}

调试方式

1. 启动 Chrome 浏览器
   javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "launch_chrome",
arguments: {
executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
url: "https://example.com"
}
})

2. 执行 JavaScript
   javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "evaluate",
arguments: {
expression: "document.title"
}
})

3. 获取控制台日志
   javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "get_console_logs",
arguments: {
clear: true
}
})