透過開發人員工具 MCP 伺服器或專屬的 CLI 和技能,讓程式設計代理使用開發人員工具的強大功能。

Chrome 開發人員工具可與支援 MCP 伺服器的所有代理程式搭配使用,包括 Gemini CLI、Antigravity、Claude Code 和 Codex 等。使用 MCP 伺服器,讓代理程式在每個工作階段中瞭解開發人員工具的功能。
除了 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 資料!