养龙虾--官方出品Chrome DevTools MCP

   chrome-devtools-mcp lets your coding agent (such as Gemini, 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.
chrome-devtools-mcp 允许你的编码代理（如 Gemini、Claude、Cursor 或 Copilot）控制和检查一个实时的 Chrome 浏览器。它作为模型-上下文-协议（MCP）服务器，使你的 AI 编码助手能够全面使用 Chrome DevTools 的强大功能，实现可靠的自动化、深入调试和性能分析。

• Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
  获取性能洞察 ：使用 Chrome DevTools 记录跟踪并提取可操作的性能洞察。
• 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.
  可靠的自动化 。用途 Puppeteer 可以在 Chrome 中自动化操作并自动等待操作结果。

chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients.
Chrome-DevTools-MCP 向 MCP 客户端展示浏览器实例内容，使其能够检查、调试并修改浏览器或开发工具中的任何数据。避免与 MCP 客户分享你不愿分享的敏感或个人信息。

Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. This helps provide a holistic performance picture by presenting field data alongside lab data. This data is collected by the Chrome User Experience Report (CrUX). To disable this, run with the --no-performance-crux flag.
性能工具可能会向 Google CrUX API 发送追踪 URL，以获取真实用户体验数据。通过将现场数据与实验室数据并列呈现，有助于提供整体性能图景。这些数据由 Chrome 用户体验报告（CrUX） 收集。要禁用此功能，请使用 --no-performance-crux 标志运行。

Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.
Google 收集使用统计数据（如工具调用成功率、延迟和环境信息），以提升 Chrome DevTools MCP 的可靠性和性能。

Data collection is enabled by default. You can opt-out by passing the --no-usage-statistics flag when starting the server:
数据采集默认启用 。启动服务器时，你可以通过设置 --no-usage-statistics 标志来选择退出：

"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.
谷歌对 Chrome DevTools MCP 的使用统计数据收集独立于 Chrome 浏览器的使用统计数据。选择退出 Chrome 指标并不会自动退出该工具，反之亦然。

Collection is disabled if CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS or CI env variables are set.
如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 的环境变量，收集将被禁用。

• Node.js v20.19 or a newer latest maintenance LTS version.
  Node.js v20.19 或更新的 LTS 维护版本。
• Chrome current stable version or newer.
  Chrome 当前稳定版本或更新版本。
• npm.  NPM。

Add the following config to your MCP client:
将以下配置添加到你的 MCP 客户端中：

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

If you are interested in doing only basic browser tasks, use the --slim mode:
如果你只想做基础的浏览器操作，可以使用 --slim 模式：

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

Install as a Plugin (MCP + Skills)
安装为插件（MCP + 技能）

[!NOTE]  [!注]
If you already had Chrome DevTools MCP installed previously for Claude Code, make sure to remove it first from your installation and configuration files.
如果你之前已经安装了 Chrome DevTools MCP 用于 Claude Code，务必先从安装和配置文件中移除它。

To install Chrome DevTools MCP with skills, add the marketplace registry in Claude Code:
要安装带有技能的 Chrome DevTools MCP，请在 Claude 代码中添加市场注册表：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Then, install the plugin:
然后，安装插件：

/plugin install chrome-devtools-mcp

Restart Claude Code to have the MCP server and skills load (check with /skills).
重启 Claude 代码，让 MCP 服务器和技能加载（查看 /skills）。

Click the button to install:
点击按钮安装：

Or install manually:  或者手动安装：

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.
进入光标设置 -> MCP -> 新 MCP 服务器 。使用上面提供的配置。

Your first prompt  你的第一个提示

Enter the following prompt in your MCP Client to check if everything is working:
请在你的 MCP 客户端输入以下提示，检查一切是否正常：

Check the perfor