Chrome DevTools MCP 入門：実際のエラーをデバッグする

Chrome DevTools MCP ではページ、コンソール、通信、性能トレースを調べられます。一つの症状から原因のリクエストやコードを追います。練習ページで読み込みエラーを再現し、パスを一つ変更して結果を確認します。

ブラウザの接続方法を選ぶ

新しいアプリや練習では分離環境を使います。公式ツールはデバッグ可能なブラウザへの browserUrl や wsEndpoint、対応 Chrome 向けの autoConnect も提供します。既存セッションにはログイン済みページや保存データがあります。許可済みプロファイルとオリジンに範囲を絞ります。今回は Tabbit Browser Dev の実行ファイルを明示して分離起動しました。検証した環境での結果です。

Chrome for Developers

固定バージョンを登録して練習を始める

クライアントでローカル stdio を設定します。chrome-devtools-mcp 1.12.0 と下の実行ファイルで試しました。パスは自分の環境に合わせます。利用統計と CrUX 検索は無効にしました。二つのファイルを同じフォルダーへ保存し、Python を実行して表示されたローカル URL を開きます。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@1.12.0",
        "--executablePath",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport=1000x565",
        "--usageStatistics=false",
        "--performanceCrux=false"
      ]
    }
  }
}

fixture.py · fixture.html

python3 fixture.py --port 8765

再現して二種類の証拠を集める

ページを開き、スナップショットを取得し、Load records を一度クリックします。現在の pageId と uid を使います。画面は Could not load records。list_console_messages は F02 load failed: HTTP 404 を返し、fetch に絞った list_network_requests は GET /api/record [404] を返しました。get_network_request で詳細を確認します。別の favicon 404 は無関係です。

Chrome DevTools MCP · Tool reference

一つのパスを直して同じ操作を試す

サーバーは /api/records を提供しますが、コードは /api/record を要求しています。fixture.html の fetch を直して保存します。同じページを再読み込みし、新しいスナップショットで同じボタンをクリックします。通信は 200、画面は Loaded: F02-FIXED となり、元のアプリエラーは再発しませんでした。両方の記録を残します。

- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");

性能トレースでは別のことを測る

機能確認後に performance_start_trace を reload と autoStop で実行しました。単一のローカル測定は LCP 386 ms、TTFB 2 ms、CLS 0.00。CPU とネットワークに制限はなく、実ユーザーデータもありません。この結果はトレース取得の確認であり、高速化の証拠ではありません。同じ負荷と環境で測定を繰り返します。

利用者二人の報告

r/ClaudeAI では通信とコンソールで欠落リソースと別の例外を区別した報告がありました。r/mcp では MCP で起動したブラウザが普段より遅いとの報告がありました。別環境の事例です。正確な通信とブラウザモードを記録し、性能は別に測ります。

r/ClaudeAI r/mcp

実行中のブラウザに接続できますか？

許可されたデバッグ先があり環境が対応していれば接続できます。既存セッションが必要な場合以外は分離環境から始めます。

• Browser automation tools

• ブラウザエージェントの設定を確認する方法

• 開いているブラウザーにAIエージェントを接続する方法

• agent-browser CLI 入門：スナップショット、ref、セッション

• Codexはログイン済みの管理画面を読める？

• OpenClawのブラウザー設定とプロファイルの選び方

• Playwright MCP 入門：設定、操作、結果の確認

Secholar.L

Tabbit グロース&コンテンツ担当

Secholar.L は AI ブラウザとエージェントワークフローについて、実際の調査と検証可能な一次情報に基づく実践的なガイドを執筆しています。