能力标签
Chrome DevTools MCP
🔌
MCP工具

Chrome DevTools MCP

基于 TypeScript · 让 AI 助手直接操作你的系统与工具
英文名:chrome-devtools-mcp
⭐ 39.4k Stars 🍴 2.5k Forks 💻 TypeScript 📄 Apache-2.0 🏷 AI 8.5分
8.5AI 综合评分
浏览器自动化DevTools集成调试工具Agent能力扩展Chrome
✦ AI Skill Hub 推荐

AI Skill Hub 强烈推荐:Chrome DevTools MCP 是一款优质的MCP工具。在 GitHub 上收获超过 39.4k 颗 Star,AI 综合评分 8.5 分,在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案,这是一个值得深入了解的选择。

📚 深度解析

Chrome DevTools MCP 是一款基于 MCP(Model Context Protocol)标准协议的 AI 工具扩展。MCP 协议由 Anthropic 开发并开源,旨在建立 AI 模型与外部工具之间的标准化通信接口,目前已被 Claude Desktop、Claude Code、Cursor 等主流 AI 工具采纳。

通过安装 Chrome DevTools MCP,你的 AI 助手将获得额外的工具调用能力,可以用自然语言直接操控该工具的功能,无需学习复杂的命令行语法。MCP 工具的核心价值在于"一次配置,永久增强"——配置完成后,每次与 AI 对话时都可以无缝调用这些工具。

在技术实现上,MCP 工具通过标准的 JSON-RPC 协议与 AI 客户端通信,工具的功能以"工具列表"的形式暴露给 AI 模型,AI 可以按需调用。Chrome DevTools MCP 提供了结构化的工具调用接口,使 AI 模型能够精确地理解和使用每个功能点,显著降低 AI 在工具使用上的错误率。

与传统的 API 集成相比,MCP 工具的优势在于无需编写代码——用户只需在配置文件中添加几行 JSON,即可让 AI 获得全新能力。AI Skill Hub 将 Chrome DevTools MCP 评为 AI 评分 8.5 分,属于同类工具中的优质选择。

📋 工具概览

为编码Agent提供Chrome DevTools集成的开源MCP工具。支持浏览器自动化、调试和开发工具交互,帮助AI Agent进行网页测试、元素检查、性能分析等任务,适合AI工程师和自动化开发者。

Chrome DevTools MCP 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。

GitHub Stars
⭐ 39.4k
开发语言
TypeScript
支持平台
Windows / macOS / Linux
维护状态
活跃维护,更新频繁
开源协议
Apache-2.0
AI 综合评分
8.5 分
工具类型
MCP工具
Forks
2.5k

📖 中文文档

以下内容由 AI Skill Hub 根据项目信息自动整理,如需查看完整原始文档请访问底部「原始来源」。

为编码Agent提供Chrome DevTools集成的开源MCP工具。支持浏览器自动化、调试和开发工具交互,帮助AI Agent进行网页测试、元素检查、性能分析等任务,适合AI工程师和自动化开发者。

Chrome DevTools MCP 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。

📌 核心特色
  • 通过标准 MCP 协议与 Claude、Cursor 等主流 AI 客户端深度集成
  • 提供结构化工具调用接口,显著降低 AI 集成复杂度
  • 支持 Claude Desktop 和 Claude Code 无缝接入,开箱即用
  • 可与其他 MCP 工具组合叠加,构建完整 AI 工作站
  • 轻量无侵入设计,不影响现有系统架构
🎯 主要使用场景
  • 在 Claude Desktop 对话中直接调用本地工具,实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务,代替繁琐手动操作
  • 将多个 MCP 工具组合使用,构建个人专属 AI 工作站
以下安装命令基于项目开发语言和类型自动生成,实际以官方 README 为准。
安装命令
# 方式一:通过 Claude Code CLI 一键安装
claude skill install https://github.com/ChromeDevTools/chrome-devtools-mcp

# 方式二:手动配置 claude_desktop_config.json
{
  "mcpServers": {
    "chrome-devtools-mcp": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp"]
    }
  }
}

# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
📋 安装步骤说明
  1. 确认已安装 Node.js(v18 或以上版本)
  2. 打开 Claude Desktop 或 Claude Code 的 MCP 配置文件
  3. 按「交给 Agent 安装 → Claude Desktop」标签中的 JSON 配置填入 mcpServers 字段
  4. 保存配置文件并重启 Claude 客户端
  5. 重启后,在对话中即可使用本工具
以下用法示例由 AI Skill Hub 整理,涵盖最常见的使用场景。
常用命令 / 代码示例
# 安装后在 Claude 对话中直接使用
# 示例:
用户: 请帮我用 Chrome DevTools MCP 执行以下任务...
Claude: [自动调用 Chrome DevTools MCP MCP 工具处理请求]

# 查看可用工具列表
# 在 Claude 中输入:"列出所有可用的 MCP 工具"
以下配置示例基于典型使用场景生成,具体参数请参照官方文档调整。
配置示例
// claude_desktop_config.json 配置示例
{
  "mcpServers": {
    "chrome_devtools_mcp": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp"],
      "env": {
        // "API_KEY": "your-api-key-here"
      }
    }
  }
}

// 保存后重启 Claude Desktop 生效
📑 README 深度解析 真实文档 完整度 62/100 查看 GitHub 原文 →
以下内容由系统直接从 GitHub README 解析整理,保留代码块、表格与列表结构。

Chrome DevTools for agents

npm chrome-devtools-mcp package

Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. A [CLI][cli] is also provided for use without MCP.

[Tool reference][tool-reference] | [Changelog][changelog] | [Contributing][contributing] | [Troubleshooting][troubleshooting] | [Design Principles][design-principles]

Key features

- Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights. - Advanced browser debugging: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces). - Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Requirements

Getting started

Add the following config to your MCP client:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
[!NOTE] Using chrome-devtools-mcp@latest ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.

If you are interested in doing only basic browser tasks, use the --slim mode:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

See [Slim tool reference][slim-tool-reference].

**Usage statistics**

Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.

Data collection is enabled by default. You can opt-out by passing the --no-usage-statistics flag when starting the server:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google handles this data in accordance with the Google Privacy Policy.

Google's collection of usage statistics for Chrome DevTools MCP is independent from the Chrome browser's usage statistics. Opting out of Chrome metrics does not automatically opt you out of this tool, and vice-versa.

Collection is disabled if CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS or CI env variables are set.

Advanced Usage

For advanced features such as handling concurrent sessions, persistent user data directories, connecting to a running Chrome instance instead of starting a new one, or debugging on Android, see our [Advanced Usage Guide][advanced-usage-guide].

MCP Client configuration

For setup instructions specific to your editor or agent (e.g. Antigravity, Claude Code, Cursor, VS Code), please see our [Client Configurations Guide][client-configurations-guide].

Configuration

Find the complete list of server parameters (e.g., --headless, --isolated, --slim) and how to configure WebSocket connections in the [Configuration Guide][configuration-guide].

🇨🇳 中文文档镜像 AI 翻译 2026-05-23
英文原文章节由系统翻译为中文摘要,便于快速理解。完整原文见上方 "📑 README 深度解析"。
📌 简介

Chrome DevTools for agents 是一个让您的编码代理(如 Antigravity、Claude、Cursor 或 Copilot)控制和检查一个活跃 Chrome 浏览器的工具。它作为一个 Model-Context-Protocol (MCP) 服务器,给您的 AI 编码助手提供对 Chrome DevTools 的访问。

⚡ 功能介绍

该项目提供了以下关键功能:获取性能见解、进阶浏览器调试和可靠的自动化。它使用 Chrome DevTools 来记录跟踪和提取可操作的性能见解,分析网络请求,截图和检查浏览器控制台消息(带有源映射的堆栈跟踪)。

📋 环境依赖

该项目需要以下环境依赖和系统要求:Node.js LTS 版本、Chrome 当前稳定版或更新版本、npm。

🛠 安装步骤(Docker/pip/源码)

要开始使用该项目,请在您的 MCP 客户端中添加以下配置:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }。您也可以使用 --slim 模式来进行基本的浏览器任务。

🚀 使用教程

使用该项目时,Google 会收集使用统计信息(如工具调用成功率、延迟和环境信息)来改进 Chrome DevTools MCP 的可靠性和性能。数据收集默认开启。您可以通过传递 --no-usage-statistics 标志来关闭数据收集。

⚙️ 配置说明(含 MCP / env)

该项目支持以下配置选项:--autoConnect/--auto-connect。如果指定,会自动连接到一个运行在本地的浏览器(Chrome 144+)中,从用户数据目录中识别的渠道参数(默认渠道是稳定)。需要在 Chrome 中启动远程调试服务器。

🔄 工作流/模块

该项目可以作为一个 Gemini 扩展(MCP+技能)安装:gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp。您也可以使用以下命令全局安装:gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

❓ FAQ 摘要

工具参考 | 更改日志

🎯 aiskill88 AI 点评 A 级 2026-05-16

高星开源项目,为AI Agent赋能浏览器交互能力。TypeScript实现稳定可靠,活跃维护中,是Agent自动化的重要基础设施。

📚 实用指南(长尾问题)
适合谁
  • 构建多智能体协作系统的 Agent 开发者
最佳实践
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)
部署方案
  • 云端托管:可放在 Vercel / Railway / Fly.io 等 PaaS 平台
相关搜索
chrome-devtools-mcp 中文教程chrome-devtools-mcp 安装报错怎么办chrome-devtools-mcp Agent 工作流chrome-devtools-mcp 与同类工具对比chrome-devtools-mcp 最佳实践chrome-devtools-mcp 适合谁用

⚡ 核心功能

👥 适合谁
  • 构建多智能体协作系统的 Agent 开发者
⭐ 最佳实践
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
⚠️ 常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)

👥 适合人群

Claude Desktop / Claude Code 用户AI 工具开发者需要扩展 AI 能力的专业人士自动化工程师

🎯 使用场景

  • 在 Claude Desktop 对话中直接调用本地工具,实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务,代替繁琐手动操作
  • 将多个 MCP 工具组合使用,构建个人专属 AI 工作站

⚖️ 优点与不足

✅ 优点
  • +GitHub 39.4k Star,社区高度认可
  • +Apache-2.0 协议,可免费商用
  • +标准化 MCP 协议,生态互联性强
  • +与 Claude 官方生态无缝对接
  • +即插即用,配置简单快捷
⚠️ 不足
  • 依赖 Claude 客户端,非 Claude 用户无法使用
  • MCP 协议仍在持续演进,接口可能变更
  • 需要一定的配置步骤
⚠️ 使用须知

AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。

📄 License 说明

✅ Apache 2.0 — 宽松开源协议,可商用,需保留版权声明和 NOTICE 文件,含专利授权条款。

🔗 相关工具推荐

📚 相关教程推荐
📰 相关 AI 新闻
🍿 AI 圈相关吃瓜
🗺️ 相关解决方案
🧩 你可能还需要
基于当前 Skill 的能力图谱,自动补全的工具组合

❓ 常见问题 FAQ

支持DOM检查、网络监控、性能分析、JavaScript执行等核心DevTools能力。
💡 AI Skill Hub 点评

总体来看,Chrome DevTools MCP 是一款质量优秀的MCP工具,在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态,建议收藏备用,结合自身场景选择合适时机引入使用。

⬇️ 获取与下载
⬇ 下载源码 ZIP

✅ Apache-2.0 协议 · 可免费商用 · 直接从 aiskill88 服务器下载,无需跳转 GitHub

📚 深入学习 Chrome DevTools MCP
查看分步骤安装教程和完整使用指南,快速上手这款工具
🌐 原始信息
原始名称 chrome-devtools-mcp
原始描述 开源MCP工具:Chrome DevTools for coding agents。⭐39.4k · TypeScript
Topics 浏览器自动化DevTools集成调试工具Agent能力扩展Chrome
GitHub https://github.com/ChromeDevTools/chrome-devtools-mcp
License Apache-2.0
语言 TypeScript
🔗 原始来源
🐙 GitHub 仓库  https://github.com/ChromeDevTools/chrome-devtools-mcp 🌐 官方网站  https://npmjs.org/package/chrome-devtools-mcp

收录时间:2026-05-13 · 更新时间:2026-05-16 · License:Apache-2.0 · AI Skill Hub 不对第三方内容的准确性作法律背书。

📺 订阅 AI Skill Hub Daily Telegram 频道
每天 8 条精选 AI Skill、MCP、Agent 与自动化工具推送
加入频道 →