Gemini CLIとChrome DevTools MCPでWeb開発をする

更新日：2025年9月30日｜公開日：2025年9月30日

WEBサイトの開発向けに便利なMCPサーバが出てきました。Chrome DevTools MCPはChromeの開発者モードを通じてChromeを操作したり各種情報をAIがアクセスできるMCPサーバです。

Chrome DevTools MCPとは

Chrome DevTools の機能をAIが利用、操作できるMCPサーバ。これまでのコーディング エージェントはAIがコードは作成してくれますが実際にブラウザで見ていないので目隠しで作業を行っている形でしたがこのツールでブラウザを通した表示の確認が可能になりました。まだ出来立てほやほやの公開プレビュー版とのことです。（2025/09/30 執筆時）

AI エージェント用の Chrome DevTools（MCP）

Chrome DevTools MCPの設定

geminiのsettings.jsonに以下を追加します。

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

私はルートではなくプロジェクトにsettings.jsonを作成して設置しました。

プロジェクトフォルダ/.gemini/settings.json

Chrome DevTools MCPでできる事

まだインストールしたばかりでよくわかっていませんが、/mcpでチェックしたところ以下の機能があるようです。

「クリック」「ページを閉じる」「ドラッグ」などなど大体のブラウザ操作はできるようですね。

Chrome DevTools MCPの実践

いざ実践ということで、以下のような指示を送ってみました。私のブログのURLを指定してアクセシビリティを検証してという内容です。

このページのアクセシビリティを検証して：https://www.u-ziq.com/

Chrome DevTools MCPを使いますかという確認がでるので「Yes」を選んでいきます。

するとChromeが自動で立ち上がって色々動いてくれます。

あ..小さい画面だとコピー見切れてる…。そこは置いといて。

ブラウザ操作をしてみる

toolsの機能を使ってブラウザ操作はできるんだろうなと思って以下のプロンプトを入れてみました。

serviceのページに移動して

その他このツールで出来そうな事

• ブラウザ操作
• IDEと組み合わせた表示確認と開発や修正
  ※ローカルサーバに接続可能なので
• バグやエラーの検証
• 表示チェックやエラー調査
• アクセシビリティ検証
• フォームの入力チェック

上記のような作業に使えるのかなと思います。