Chrome Dev Tools MCPでChrome Canaryを使う

2025年9月25日にGoogleからリリースされたChrome Dev Tools MCPは、Claude CodeなどのAIとChrome Dev Toolsを連携させることができる便利なMCPである。

これまでPlaywright MCPでChromeと連携することは可能であったが、正確なテキストデータの共有はユーザーがコピーアンドペーストでAIに指示をする必要があり面倒であった。

Chrome Dev Tools MCPを使うことで、Dev Toolsの情報を直接AIに渡すことができるようになり、より効率的な開発が可能である。

モチベーション

Chrome Dev Tools MCP を使うとChromeのDev ToolsにClaude Codeを接続できて非常に便利。

なのだが、Chromeを自動テストモードで別の窓として起動するため、いつも使っているChromeとウインドウ切り替え時に混じってウザイという問題が発生した。

Chrome Canaryを使えば通常のChromeとはアイコンの色が違ったりと混じる事がないので、Chrome Canaryを使う方法を調べた。

自動テストモードのChromeは通常利用するとGoogle検索などがbot判定してくるので、まともに利用することは難しい。

Chrome Canaryを使うのがお勧め。

手順

1. Chrome Canaryをインストールする

   公式サイトからChrome Canaryをダウンロードしてインストールする。

2. Chrome Dev Tools MCPの設定を変更する

Claude Codeの場合は claude.json に以下のように --channel canary オプションを追加するのみ。

npx で起動しているが、実行方法は各々の環境に合わせて変更する。

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--channel",
        "canary"
      ],
      "env": {}
    }
  }
}

まとめ

とても便利なのでおすすめ。