はじめに
Chrome DevTools MCP を使用することで、Claude Code から Chrome ブラウザを操作してパフォーマンス測定やデバッグなどの作業を自動化できます。
開発中は claude --dangerously-skip-permissions を使用することが多いため、ローカル環境を保護するために Dev Container 内で Claude Code を利用するケースも多いでしょう。
この記事では、Dev Container 環境から Claude Code で Chrome DevTools MCP を設定・使用する方法を解説します。
検証環境
- MacBook Pro
- Chrome 136+
- Node.js 22
- Dev Container (Rancher Desktop)
Step 1: デバッグモードで Chrome を起動
Chrome 136 以降では、既定プロファイルでは --remote-debugging-port が無効になります。そのため、別のユーザーデータディレクトリを指定してデバッグモードで起動する必要があります。
open -na "Google Chrome" --args \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/chrome-remote
これでブラウザが起動します。
Step 2: Chrome DevTools MCP の追加
Claude Code に Chrome DevTools MCP サーバーを追加します。
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
このコマンドにより、プロジェクトルートに .mcp.json ファイルが作成（または更新）されます。
Step 3: Dev Container からホスト Chrome への接続設定
ネットワーク設定の確認
Rancher Desktop では、host.lima.internal がホストマシンにアクセスするためホスト名です。まず IP アドレスを確認しましょう。
$ getent hosts host.lima.internal
192.168.5.2 host.lima.internal
接続テスト
Dev Container からホストの Chrome への接続をテストします。
curl http://192.168.5.2:9222/json/version
webSocketDebuggerUrl を含む JSON レスポンスが返ってくれば接続成功です。
MCP 設定ファイルの更新
.mcp.json を以下のように編集して、ホストの Chrome に接続できるようにします。
{
"mcpServers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl=http://192.168.5.2:9222"
]
}
}
}
注意
IP アドレス192.168.5.2は環境によって異なる場合があります。上記のgetent hostsコマンドで確認した実際の IP アドレスを使用してください。
Step 4: 動作確認
基本的なパフォーマンステスト
Claude Code を起動し、以下のプロンプトで動作確認を行います。
Check the performance of https://developers.chrome.com
このコマンドは Chrome DevTools MCP の README で推奨されている基本的な動作確認用プロンプトです。
実行結果の例
正常に動作している場合、以下のような詳細なパフォーマンス分析結果が表示されます。
パフォーマンステストの結果を取得しました。https://developer.chrome.com のパフォーマンス分析結果：
[主要メトリクス]
- CLS: 0.00 (優秀)
- ネットワーク: throttling無し
- CPU: throttling無し
[検出された問題]
1. ドキュメント読み込み遅延 (DocumentLatency)
- 問題: 初回リクエストの応答が遅い (1,159ms)
- 影響: FCP/LCPが1,057ms遅延
- 原因: サーバー応答時間が600msの推奨値を超過
- 対策: サーバー応答時間の最適化、リダイレクト回避
2. サードパーティ影響 (ThirdParties)
- Google Fonts: 1.7MB の転送量
- Google CDN: 1.4MB の転送量、32ms のメインスレッド実行時間
- 対策: サードパーティコードの遅延読み込み、削減
3. 強制リフロー (ForcedReflow)
- 問題: JavaScript によるレイアウト再計算の強制実行
- 影響: レンダリングパフォーマンスの低下
- 対策: DOM操作の最適化、バッチ処理
全体的にはまずまずのパフォーマンスですが、初回読み込み時間とサードパーティリソースの最適化で改善の余地があります。
ブラウザが自動で開き、パフォーマンストレースが収集されれば設定完了です。
実践例: React フォームアプリの自動デバッグ
Chrome DevTools MCP を用いて React アプリのバグを自動検出・修正してみました。
デバッグ対象: ユーザー登録フォーム
このユーザー登録フォームは以下の機能を持っています
- 3 段階のワークフロー: 基本情報 → 確認画面 → 完了
- 入力フォーム: 名前・メールアドレスの入力
- バリデーション: フォーム入力値の検証
- 送信処理: データの送信とステート管理
潜んでいるバグ
バグ 1: タブナビゲーションが機能しない
const handleTabChange = (event, newValue) => {
console.log("Tab clicked:", newValue);
};
症状
- タブをクリックしてもコンソールにログが出るだけで、実際の画面が切り替わりません。
バグ 2: バリデーション論理の反転
const handleSubmit = () => {
if (name.trim() === "" || email.trim() === "") {
console.log("Validation passed");
setIsSubmitted(true);
} else {
console.log("Validation failed");
setIsSubmitted(false);
}
};
症状
- 正しく入力してもエラーメッセージが表示される
- 空で送信すると成功扱いになる（完全に逆の動作）
Claude Code による自動デバッグの実行
Claude Code に以下のように指示を出してみました。
Chrome DevTools MCP を用いてテストページでタブが切り替わらないタブ、正常にフォームを入力しても送信できないバグを修正してください
自動バグ検出プロセス
Claude Code は以下のステップで自動的にバグを検出します
1. 実際にフォームを操作してテスト
chrome-devtools - fill (MCP)(uid: "4_10", value: "テストユーザー")
⎿ # fill response
Successfully filled out the element
## Page content
2. バグの特定と原因分析
I can see the form submission bug! The form is not progressing to the completion page even with valid data.
I've identified both bugs:
1. Tab switching bug: The handleTabChange function logs the tab click but doesn't update the activeTab state
2. Form submission bug: The validation logic is inverted - it shows "Validation failed" when the form should be valid and vice versa
自動修正と動作確認
Claude Code はバグを修正した後、再度ブラウザを自動操作して修正が正しく動作することを確認します。
このように、検出 → 修正 → 検証 の一連の流れを自動化できるのが Chrome DevTools MCP の大きなメリットです。
まとめ
今回は Dev Container 環境で Chrome DevTools MCP を動かす方法を試してみました。
実際に使ってみて感じたのは、思った以上に実用的だということです。特に React アプリのバグ検出では、コードを読むだけでなく実際にブラウザを操作して問題を見つけてくれるのが印象的でした。
実感したメリット
- バグの発見から修正まで一気通貫でやってくれる
- テストの手間がかなり減る
Web 開発では手動でのテストやデバッグに時間を取られがちですが、こういったツールを活用することで開発の質とスピードの両方を向上させることができそうです。