Chrome DevTools MCP with Gemini CLI 小記

Chrome DevTools MCP with Gemini CLI 小記

OS: macOS 14.3

gemini-cli: 0.7.0

首先必須說 Gemini CLI 升級速度真的快, 8/17 在測試 Browser MCP 的時候, Gemini CLI 還是 0.1.21 , 現在已經是 0.7.0 了

• https://sakananote2.blogspot.com/2025/08/browser-mcp-with-gemini-cli.html 

Gemini CLI with MCP 的安裝可以參考之前的文章

• https://sakananote2.blogspot.com/2025/07/gemini-cli-with-mcp.html

今天要來測試的是 Chrome DevTools MCP

• Github 頁面 https://github.com/ChromeDevTools/chrome-devtools-mcp

這個是 chrome for developers 2025/9/23 釋出的

• https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-tw

這個 Chrome DevTools MCP 可以讓目前的 Coding agent ( Gemini / Copilot / Codex /.. ) 控制 Chrome 瀏覽器 ( Sandbox 環境, 非使用者目前使用的 Profile ) 進行相關功能的操作.

今天就來實作 Gemini CLI with Chrome DevTools MCP

安裝的方式可以參考 Github 頁面

• https://github.com/ChromeDevTools/chrome-devtools-mcp

依據你使用工具 ( Gemini CLI / Codex / Copilot VS Code / … ) 來進行相對應安裝

之前我都是自行建立 .gemini/settings.json 檔案, 然後加入下列設定

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

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

    }

  }

}

但是現在很多 Coding agent 都可以直接下指令來直接增加了

以 Gemini CLI 為例, 如果是 Project wide: 使用以下指令就會直接增加了

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

MCP server "chrome-devtools" added to project settings. (stdio)

自動就會產生設定檔如下

% cat  .gemini/settings.json 

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": [

        "chrome-devtools-mcp@latest"

      ]

    }

  }

}

• 我覺得配合 context7 之後應該有機會請 coding agent 直接加

 

加入設定之後啟動 gemini

可以使用 /mcp list 觀察功能

先嘗試官方的 first prompt

Check the performance of https://developers.chrome.com

• 這個時候可以看到會啟動一個 Chrome 瀏覽器 並調用 navigate_page 與 performance_start_trace 功能開始瀏覽指定的頁面與分析

並提供分析結果

另外也可以請他進行頁面截圖

也可以要求針對某些網頁進行分析, 例如

另外因為有 get_netowrk_request 這樣的功能, 也可以做類似這樣的小實驗

• 請他分析特定網頁的請求與回覆頁面, 判斷一些行為, 例如 CDN 使用

又往 AI 工具前進一步

~ enjoy it

References

• https://sakananote2.blogspot.com/2025/08/browser-mcp-with-gemini-cli.html

• https://sakananote2.blogspot.com/2025/07/gemini-cli-with-mcp.html 

• https://github.com/ChromeDevTools/chrome-devtools-mcp

• https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-tw