通过 DevTools MCP 服务器或其专用 CLI 和技能,将 DevTools 的强大功能赋予编码智能体。

Chrome 开发者工具可与支持 MCP 服务器的任何代理搭配使用,包括 Gemini CLI、Antigravity、Claude Code、Codex 等。使用 MCP 服务器让您的代理在每次会话中了解 DevTools 的功能。
作为 MCP 服务器的替代方案,Chrome 开发者工具 CLI 具有更高的令牌效率。Chrome 开发者工具 MCP 服务器软件包包含一项专业技能,可教导您的编码智能体如何使用与 MCP 服务器相同的强大工具来编写脚本。

立即安装

MCP 服务器和 CLI 属于同一软件包。为所选的编码代理获取它们。请参阅下文,了解最热门代理的说明,以及 GitHub 上 20 多个代理的说明。

  # Either MCP only:
  gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
  # Or as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

安装 DevTools MCP 服务器或 CLI 后,您可以尝试一些提示来开始使用!让代理执行 Lighthouse 审核、填写表单或截取屏幕截图。如需查看这些功能的实际效果,请尝试以下提示:

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

此提示使用工具创建新网页、与搜索栏互动并运行性能跟踪记录(包括 CrUX 数据)!