Skip to main content
Glama
enesjakozh
robertheadley

Chrome Debug MCP Server

by robertheadley
OverviewInspectSchemaRelated ServersScoreDiscussions
JavaScript
Local

Chrome 调试 MCP 剧作家

使用 Playwright 实现浏览器自动化的模型上下文协议 (MCP)，并完全支持 Greasemonkey API。

特征

核心浏览器功能

  • 浏览器启动和管理

  • 具有创建/切换/关闭功能的多选项卡支持

  • 页面导航和交互

  • 屏幕截图

Greasemonkey API 支持

  • GM_addStyle 用于 CSS 注入

  • GM_getValue/GM_setValue 用于数据存储

  • GM_deleteValue 用于存储清理

  • GM_notification 用于桌面通知

  • GM_setClipboard 用于剪贴板操作

  • GM_xmlhttpRequest 用于跨域请求

资源管理

  • 网络请求拦截

  • 请求阻止、修改和记录

  • 资源类型过滤

调试功能

  • 详细日志系统

  • 日志文件组织

  • 清洁接口输出

Related MCP server: BrowserTools MCP

安装

npm install chrome-debug-mcp-playwright

快速入门

// Launch browser tool browser launch_browser --url "https://example.com" --browserType "chromium" // Use GM functions tool browser gm_setValue --key "setting" --value "test" tool browser gm_getValue --key "setting" // Intercept requests tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

文档

  • 命令- 带有示例的详细命令文档

  • COMMANDS.md 中提供了完整的命令列表和使用示例

核心功能

浏览器管理

// Launch browser tool browser launch_browser --url "https://example.com" // Create new tab tool browser create_tab --url "https://example.com" // Switch between tabs tool browser switch_tab --index 1

Greasemonkey API

// Add custom styles tool browser gm_addStyle --css "body { background: #f0f0f0; }" // Store data tool browser gm_setValue --key "setting" --value "test" // Make cross-origin requests tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

资源拦截

// Block image loading tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block" // Log all CSS requests tool browser intercept_requests --patterns ["*.css"] --action "log"

实现细节

日志系统

  • 所有调试输出重定向到日志文件

  • 带时间戳的条目

  • 组织在日志目录中

  • 清洁接口输出

错误处理

  • 详细的错误日志记录

  • 正确清理错误

  • 资源管理

依赖项

  • 剧作家：浏览器自动化

  • @modelcontextprotocol/sdk: MCP 实现

发展

先决条件

  • Node.js 16 或更高版本

  • npm 7 或更高版本

设置

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git cd chrome-debug-mcp-playwright npm install

执照

MIT 许可证 - 有关详细信息，请参阅 LICENSE 文件。

贡献

欢迎大家贡献！详情请参阅我们的贡献指南。

致谢

基于 Robert Headley 的原始chrome-debug-mcp 。

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

Chrome 调试 MCP 服务器

用于控制 Chrome 的模型上下文协议 (MCP) 服务器，具有调试功能、用户脚本注入和扩展支持。

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

特征

Chrome 控件

  • 使用自定义配置启动 Chrome

  • 支持自定义 Chrome 可执行文件路径

  • 用户配置文件管理（默认或自定义用户数据目录）

  • 扩展支持和管理

  • 禁用 Chrome 的“自动化控制”横幅

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

页面自动化

  • 单击、键入并与页面元素交互

  • 处理下拉菜单和表单输入

  • 悬停并等待元素

  • 截取整个页面或元素的屏幕截图

  • 在页面之间导航

  • 设置视口大小和设备模拟

  • 从元素中提取文本和属性

标签管理

  • 列出所有打开的标签页及其 ID 和 URL

  • 使用指定的 URL 打开新标签页

  • 按 ID 关闭标签页

  • 在标签页之间切换

  • 跟踪和管理多个选项卡状态

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

调试功能

  • 通过 Chrome DevTools 协议（CDP）进行远程调试

  • 控制台日志捕获和监控

  • 页面上下文中的 JavaScript 评估

  • 实时控制台输出流

用户脚本支持

  • 将用户脚本注入网页

  • Greasemonkey 风格的 API 支持：

    • GM_setValue / GM_getValue用于持久存储

    • GM_addStyle用于 CSS 注入

    • GM_xmlhttpRequest用于跨域请求

    • GM_openInTab用于创建新标签页

    • GM_registerMenuCommand用于菜单命令

扩展集成

  • 加载解压的扩展

  • 维护扩展状态和配置

  • 支持默认 Chrome 个人资料扩展

  • 选择性扩展启用/禁用

安装

先决条件

安装 Roo 代码扩展

  1. 打开 Visual Studio Code

  2. 转到扩展（Ctrl+Shift+X）

  3. 搜索“Roo 代码”

  4. 单击“安装”

设置 Chrome 调试 MCP 服务器

  1. 克隆此存储库：

    git clone https://github.com/yourusername/chrome-debug-mcp.git cd chrome-debug-mcp

  2. 安装依赖项：

    npm install

  3. 构建项目：

    npm run build

  4. 在 Roo 代码中配置：添加到cline_mcp_settings.json ：

    { "mcpServers": { "chrome-debug": { "command": "node", "args": ["path/to/chrome-debug-mcp/build/index.js"], "disabled": false, "alwaysAllow": [] } } }

用法

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）======= 有关所有可用命令、工具和功能的完整参考，请参阅COMMANDS.md 。

64acbb3 的父级（通过上传添加文件）

Chrome 基本启动

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" } })

使用自定义配置文件启动

use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", userDataDir: "path/to/chrome/profile", disableAutomationControlled: true } })

注入用户脚本

use_mcp_tool({ server_name: "chrome-debug", tool_name: "launch_chrome", arguments: { url: "https://example.com", userscriptPath: "path/to/userscript.js" } })

评估 JavaScript

use_mcp_tool({ server_name: "chrome-debug", tool_name: "evaluate", arguments: { expression: "document.title" } })

获取控制台日志

use_mcp_tool({ server_name: "chrome-debug", tool_name: "get_console_logs", arguments: { clear: true } })

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

=======

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

页面交互示例

单击元素

use_mcp_tool({ server_name: "chrome-debug", tool_name: "click", arguments: { selector: "#submit-button", delay: 500 } })

在输入框中输入

use_mcp_tool({ server_name: "chrome-debug", tool_name: "type", arguments: { selector: "#search-input", text: "search query", delay: 100 } })

从下拉列表中选择

use_mcp_tool({ server_name: "chrome-debug", tool_name: "select", arguments: { selector: "#country-select", value: "US" } })

等待元素

use_mcp_tool({ server_name: "chrome-debug", tool_name: "wait_for_selector", arguments: { selector: ".loading-complete", visible: true, timeout: 5000 } })

截屏

use_mcp_tool({ server_name: "chrome-debug", tool_name: "screenshot", arguments: { path: "screenshot.png", fullPage: true } })

设置视口大小

use_mcp_tool({ server_name: "chrome-debug", tool_name: "set_viewport", arguments: { width: 1920, height: 1080, deviceScaleFactor: 1 } })

标签管理示例

列出所有标签

use_mcp_tool({ server_name: "chrome-debug", tool_name: "list_tabs", arguments: {} })

打开新标签页

use_mcp_tool({ server_name: "chrome-debug", tool_name: "new_tab", arguments: { url: "https://example.com" } })

切换到标签页

use_mcp_tool({ server_name: "chrome-debug", tool_name: "switch_tab", arguments: { tabId: "tab-id-from-list-tabs" } })

关闭标签页

use_mcp_tool({ server_name: "chrome-debug", tool_name: "close_tab", arguments: { tabId: "tab-id-from-list-tabs" } })

<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部 <<<<<<<< 头部

64acbb3 的父级（通过上传添加文件） ======= 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件） ======== 64acbb3 的父级（通过上传添加文件）

依赖项

该项目使用以下开源包：

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE 文件。

贡献

有关贡献的详细信息，请参阅我们的贡献指南。

致谢

8a57443 的父级（来自 robertheadley/feature/puppeteer-commands 的合并请求 #4）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）=======

64acbb3 的父级（通过上传添加文件）

One-click Deploy
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

How are these scores calculated?

Resources

Appeared in Searches

New MCP Servers

Latest Blog Posts

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/robertheadley/chrome-debug-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server