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

Terraform in macOS 安裝小記

Terraform in macOS 安裝小記

OS: macOS 14.3

Terraform v1.13.3

最近不管在家還是在公司, 使用 Mac 的時間佔比較多的時間, 故有些工具會轉移到 Mac 上面來作.

今天就紀錄一下 Terraform 在 macOS 上面的安裝

之前的安裝文件是使用 openSUSE Leap 15.5 距今也一年多了

• https://sakananote2.blogspot.com/2023/12/terraform-in-opensuse-leap-155.html

在 macOS 一般來說我都會使用 Homebrew 來進行套件安裝

• 官網 https://brew.sh/

查詢一下 Terraform 官網的安裝方式

• https://developer.hashicorp.com/terraform/install

• macOS 使用 Package Manager 方式也是用 brew 指令來安裝

接下來進行 terraform 安裝

% brew  tap  hashicorp/tap

• brew tap 這個指令是用來新增 Homebrew 的「第三方軟體來源」（third-party repository）的指令。

% brew  install  hashicorp/tap/terraform

 安裝完成後可以透過 terraform 指令檢查版本

% terraform  --version

Terraform v1.13.3

• 因為是使用 brew 指令安裝, 後續可以透過 brew update 更新清單後, 再使用 brew upgrade terraform 升級 terraform 版本

~ enjoy it

References

• https://developer.hashicorp.com/terraform/install 

• https://sakananote2.blogspot.com/2023/12/terraform-in-opensuse-leap-155.html 

• https://brew.sh/

Gemini CLI Login 方式小記

Gemini CLI Login 方式小記

OS: macOS 14.3

Gemini Cli: 0.4.1

今天來實作 Gemini CLI 使用不同登入方式驗證

Gemini CLI 的驗證方式有 3 種

• Login with Google

• Best for

• Individual developers as well as anyone who has a Gemini Code Assist License.

• Benefits

• Free tier: 60 requests/min and 1,000 requests/day

• Gemini 2.5 Pro with 1M token context window

• No API key management - just sign in with your Google account

• Automatic updates to latest models

• Use Gemini API Key

• Best for

• Developers who need specific model control or paid tier access

• Benefits

• Free tier: 100 requests/day with Gemini 2.5 Pro

• Model selection: Choose specific Gemini models

• Usage-based billing: Upgrade for higher limits when needed

• Vertex AI

• Best for

• Enterprise teams and production workloads

• Best for

• Enterprise features: Advanced security and compliance

• Scalable: Higher rate limits with billing account

• Integration: Works with existing Google Cloud infrastructure

• 參考官方網站 https://github.com/google-gemini/gemini-cli 

可以在執行 /auth 看到相關選項

驗證參考文件

• https://github.com/google-gemini/gemini-cli/blob/main/docs/cli/authentication.md 

根據詢問 Gemini CLI 的結果, 驗證順序為

• Vertex AI > Gemini API Key > Google login

• 這個部分也可以理解, Vertex AI 是給 企業使用 優先性肯定比較高

==== 首先來實作 Vertex AI 方式驗證 ====

無組織的專案無法使用 API KEY, 所以無法使用 API KEY 方式執行

• https://cloud.google.com/vertex-ai/generative-ai/docs/start/api-keys?usertype=existinguser&hl=zh-tw

• 使用者帳戶必須具備機構政策管理員角色。如果沒有這個角色或無法進行這項設定

故要改用應用程式預設憑證  Application Default Credentials  (ADC)

使用以下指令設定

• gcloud  auth  application-default  login

這樣的方式要在 ~/.zshrc ( 或是 ~/.bashrc )內設定環境變數

export GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_NAME"

# gemini cli 因為要使用 vertex ai 模式還要多設定 GOOGLE_CLOUD_LOCATION

export GOOGLE_CLOUD_LOCATION="us-central1"

• location 的部分建議設定 us-central1, 我有遇過設定 asia-east1 沒有 Gemini Pro 2.5 模型的設定

• 如果想要確認相關 log, 可以將 IAM -- > Audit log 內的 Vertex API 的 Data read 打開, 然後在 Log Explorer 觀察

設定好之後, 啟動 gemini

輸入 /auth

選擇 Vertex AI 方式驗證即可

然後可以到 Billing 觀察相關費用

==== 接下來嘗試 Use Gemini API Key ====

從   AI Studio 取得 API Key

• https://aistudio.google.com/app/apikey 

點選 Create API key

選取 要建立 API Key 的 GCP 專案

複製 API Key

沒有即時複製到也不同害怕, 在同一個頁面也有相關訊息可以再查看

• 預設沒有升級是 Tier 1, 速率與 quota 是受到限制的, 如果要更高的速率與 quota 可以參考付費資訊

• https://ai.google.dev/gemini-api/docs/rate-limits?hl=zh-tw

• https://ai.google.dev/gemini-api/docs/pricing?hl=zh-tw

準備開始實作

這個時候確認你的環境變數 已經 unset  Vetext AI 的相關變數

準備好剛剛建立的 API KEY

export GEMINI_API_KEY="YOUR_GEMINI_API_KEY"

• 或是將這段寫入 ~/.zshrc 或是 ~/.bashrc 內

使用 gemini 指令

使用 /auth 選取 Use Gemini API Key

沒有意外就可以開始運作了

同時也可以在 AI Studio API Key 那個頁面觀察到 使用情況

或是在專案的 API & Services 觀察

==== 最後回到 Login with Google ====

最後回到 Login with Google

這個也可以參考之前的文章

• https://sakananote2.blogspot.com/2025/06/gemini-cli.html

大概就是要注意兩件事情

• 會進行 Google 帳號登入驗證

• 某些情況下要 export  GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID"

一樣使用 gemini 指令啟動

使用 /auth 選取驗證方式 -- > Login with Google

這個時候會跳出瀏覽器 要求登入驗證

授權完畢就可以使用

以上整理 3 種登入方式

感覺離  Gemini CLI 又前進一步

~ enjoy it

References

• https://github.com/google-gemini/gemini-cli

• https://cloud.google.com/vertex-ai/generative-ai/docs/start/api-keys?usertype=existinguser&hl=zh-tw

• https://sakananote2.blogspot.com/2025/06/gemini-cli.html