什麼是 Chrome-devtools-mcp

Chrome DevTools MCP (Model Context Protocol) 是一個新推出的工具，它讓 AI 程式助理（例如 Gemini、Claude、Cursor 或 Copilot）能夠直接與一個真實的 Chrome 瀏覽器互動，並使用 Chrome DevTools 的強大功能，實現可靠的自動化、深入的調試和效能分析。

安裝　Chrome-devtools-mcp

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

Chrome-devtools-mcp　支援
－　Claude Code
－　Cline
－　Codex
－　Copilot / VS Code
－　Cursor
－　Gemini CLI
－　Gemini Code Assist
－　JetBrains AI Assistant & Junie

這裏我用Gemini CLI來安裝Chrome-devtools-mcp

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

檢查一下/mcp

操作範例

幫我分析https://gdg.community.dev/gdg-taipei/ 有什麼活動

幫我去youtube 找google 最新的手機介紹

總結

Gemini Cli 結合 Chrome-devtools-mcp ，讓這些 agent 真正「看見」瀏覽器的運作、執行調試與性能分析。真的很方便呀!!!!

參考

https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-tw
https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp