Chrome MCPをClaude Codeで使う

Posted at 2025-12-03

はじめに

フロントエンド開発時、ブラウザでのエラー内容をコピペして別のツールで確認するのが面倒だと感じていました。
MCPでブラウザとAIが直接やりとりできたら便利だと思っていたところ、Chrome MCPというツールを見つけたので、WSL2環境で動作確認してみました。

環境

WSL2 (Ubuntu)
Claude Code
Google Chrome

Chromeの導入

WSLからWindowsのChromeを開くには、ポートフォワーディングやファイアウォールの設定が必要で、手間がかかるため、WSL2に直接Chromeをインストールします。

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install --fix-missing ./google-chrome-stable_current_amd64.deb

デバッグモードでChromeを起動します。
--remote-debugging-port=9222オプションにより、外部ツールからChromeを制御できるようになります。

google-chrome --remote-debugging-port=9222

注意： このコマンドを実行したターミナルは開いたままにしておく必要があります。

MCPサーバの導入

Claude Codeを使う予定のプロジェクトディレクトリで以下を実行します。
これにより、プロジェクトローカルの設定としてMCPサーバが追加されます。

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

実行結果：

/chrome-mcp-playground$ claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Added stdio MCP server chrome-devtools with command: npx chrome-devtools-mcp@latest to local config
File modified: /home/risa/.claude.json [project: /home/risa/chrome-mcp-playground]

Claude Codeを立ち上げ/mcpでMCPサーバ一覧を確認すると「chrome-devtools」が現れました。

設定ファイル `~/.claude.json`

MCPサーバ部分を以下のように手動で修正しました。
--browserUrlを追加してデバッグモードで起動したChromeのポートを指定しています。

"mcpServers": {
  "chrome-devtools": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "chrome-devtools-mcp@latest",
      "--browserUrl",
      "http://127.0.0.1:9222"
    ],
    "env": {}
  }
}