Chrome DevTools MCPサーバーの使い方

デバッグは常にウェブ開発の中心にありましたが、AIコーディングアシスタントの台頭により、開発者は新たな課題に直面しています。これらのエージェントは、生成したコードを実際に見て、操作するにはどうすればよいのでしょうか？そこで登場するのが、chrome dev tools mcp serverです。これは、AIコーディングアシスタントをChromeのDevToolsに接続し、リアルタイムのデバッグ、パフォーマンスの洞察、ユーザーフローのテストを行うための新しい方法です。

このガイドでは、Chrome DevTools MCPサーバーとは何か、その仕組み、重要性、そして最も重要なこととして、VS Code、Gemini CLI、Cursorにインストールして使用する方法について説明します。読み終える頃には、Chromeの強力なデバッグ環境をAI支援開発ワークフローに統合する方法を習得していることでしょう。

💡

美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

最大限の生産性で開発チームが協力できる統合されたオールインワンプラットフォームをお望みですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！

ボタン

Chrome DevTools MCPサーバーとは？

Model Context Protocol (MCP)は、大規模言語モデル（LLM）が外部ツールやデータソースに接続できるようにするオープンソースの標準です。chrome dev tools mcp serverは、Chrome DevToolsのデバッグ機能をAIエージェントに直接もたらします。

「盲目的に」コードを生成するのではなく、AIアシスタントは次のことができるようになります。

Chromeを起動し、ウェブサイトを開く。
ライブパフォーマンスのトレースを収集する。
DOM、CSS、JavaScriptのランタイムを検査する。
レイアウト、ネットワーク、コンソールの問題をデバッグする。
クリック、フォーム送信、ナビゲーションなどのユーザー行動をシミュレートする。

これにより、AIコーディングエージェントは、何が機能するかを推測するのではなく、リアルタイムでコード変更を検証、テスト、最適化できるため、はるかに効果的になります。

Chrome DevTools MCPサーバーを使用する理由

以下に、chrome dev tools mcp serverをワークフローに統合するための主要なユースケースを示します。

1. リアルタイムでのコード変更の検証
AIアシスタントで修正を生成し、ブラウザで即座に機能することを確認します。

プロンプト例：「変更が期待どおりに機能することをブラウザで確認してください。」

2. ネットワークとコンソールエラーの診断
CORSの問題、APIの失敗、予期せぬランタイム警告を特定します。

プロンプト例：「localhost:8080上の一部の画像が読み込まれていません。何が起こっていますか？」

3. ユーザー行動のシミュレーション
フォーム送信やナビゲーションなどのユーザーフローを自動化して、バグを再現します。

プロンプト例：「メールアドレスを入力した後、フォームの送信が失敗するのはなぜですか？」

4. ライブスタイリングとレイアウトの問題のデバッグ
DOMとCSSを検査して、オーバーフローのバグ、配置のずれ、レンダリングの問題を確認します。

プロンプト例：「localhost:8080のページがおかしいです。何が起こっているか確認してください。」

5. パフォーマンス監査の自動化
AIアシスタントを介してLighthouseスタイルのチェックを直接トリガーします。

プロンプト例：「Localhost:8080の読み込みが遅いです。もっと速くしてください。」

Chrome DevTools MCPサーバーのインストール方法

VS Code、Gemini CLI、**Cursor**のいずれを使用している場合でも、インストールは簡単です。

1. VS Codeでのインストール

VS Codeを開く
Ctrl + Shift + P（WindowsまたはLinuxの場合）またはCmd + Shift + P（Macの場合）を押します。
次に、「MCP」を検索し、「MCPサーバーを追加」をクリックします。
「MCPサーバーを参照」を選択します。

拡張機能の下のサイドバーで、再度「MCPサーバーを参照」をクリックします。利用可能なMCPサーバーをリストしたウェブページにリダイレクトされます。
そのウェブページで、キーワード「chrome」を使用して「Chrome DevTools MCPサーバー」を検索します。

「インストール」をクリックし、次に「VS Codeにインストール」を選択します。

インストールが完了すると、VS Code AIアシスタントはライブデバッグのためにChromeに接続できるようになります。

2. Cursorでのインストール

Cursor Editorを開きます。
設定 > ツールとMCPに移動します。

下にスクロールし、「新しいMCPサーバー」をクリックします。
これによりMCP設定JSONファイルが開きます。ここに以下のMCP設定を貼り付ける必要があります。

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

その後、保存してCursorを再起動します。

これで、Cursorはchrome dev tools mcp serverを認識し、デバッグのためにAIコーディングアシスタントに接続します。

3. Geminiでのインストール（推奨）

Geminiを使用している場合でも、chrome dev tools mcp serverに接続できます。実際、Chromeは、Geminiでこの機能を有効にして、そのデバッグおよび検査機能を最大限に活用することを特に推奨しています。

まず、ユーザーのルートディレクトリにある.geminiフォルダ内のsettings.jsonファイルを見つけます。ここにMCPの設定を追加します。これには2つの方法があります。

1. 手動でフォルダを移動する：

ユーザープロファイルの下にある.geminiフォルダを検索し、コードエディタ（例：VS Code）でsettings.jsonファイルを開きます。

2. ターミナルを使用する：

以下のコマンドを使用して、ルートディレクトリに入り、.geminiフォルダを開きます。

cd ~
cd .gemini

.geminiフォルダ内で、以下のコマンドを使用してVS Codeでsettings.jsonファイルを開きます。

code settings.json

3. Gemini CLIにChrome DevTools MCPサーバーを追加する

Chrome DevTools MCPサーバーを追加するために、以下の設定をファイルに貼り付けます。

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

ファイルを保存して閉じます。

設定ファイルは次のようになります。

次にGeminiを開き、以下のコマンドを実行してサーバーがインストールされていることを確認します。

/mcp

これで、利用可能なサーバーの中にchrome dev tools mcp serverがリストされているはずです。ここからGeminiはChrome DevToolsに直接接続でき、AI支援によるライブアプリケーションのデバッグが容易になります。

Chrome DevTools MCPサーバーの使用方法

インストールが完了すると、AIアシスタントのプロンプトを通じて直接操作を開始できます。例えば、

1. パフォーマンス分析
「web.devのLCP（Largest Contentful Paint）を確認してください。」

2. CSS問題のデバッグ
「localhost:8080を検査し、ヘッダーのオーバーフローしている要素を修正してください。」

3. コンソールとネットワークログ
「localhost:3000でログインフォームを送信した際のコンソールエラーを分析してください。」

4. ユーザーフローのシミュレーション
「サインアップページに移動し、フォームに入力して、送信が失敗する理由を教えてください。」

あなたのAIアシスタントは、コードを書くだけでなく、Chromeで直接、人間開発者のようにテストし、デバッグすることができます。

高度な機能

1. 自動トレース
`performance_start_trace`ツールを使用すると、AIエージェントがトレースを記録し、パフォーマンスのボトルネックを自動的に分析できます。

2. DOMとCSSの検査
AIアシスタントは、ライブのDOM構造を検査し、ターゲットを絞ったCSSまたはHTMLの修正を提供できます。

3. スケーラブルなワークフロー
MCPによって駆動されるため、同じセットアップがMCPをサポートするさまざまなエディタやエージェントで機能し、一貫性が保たれます。

参加と今後の展望

chrome dev tools mcp serverはまだパブリックプレビュー段階です。これは、急速に進化しており、Googleが開発者からのフィードバックを積極的に求めていることを意味します。今後の改善点には、以下が含まれる可能性があります。

LighthouseおよびCore Web Vitalsとのより深い統合。
よりリッチなユーザー入力のシミュレーション（複数ステップのフロー）。
AIが検出した問題のより強力な視覚化。
マルチタブおよびマルチデバイスデバッグのサポートの拡大。

Chrome開発者ブログで最新情報をフォローし、GitHubで問題や提案を投稿できます。

結論

chrome dev tools mcp serverは、単なる開発者ツール以上のものです。従来のデバッグワークフローと、AI支援コーディングという新たな世界を結ぶ架け橋となります。コーディングエージェントにリアルタイムでコードを見て、テストし、デバッグする能力を与えることで、それらをコードジェネレーターから本格的なデバッグパートナーへと変革します。

VS Codeを使用するプロの開発者であれ、Cursorで実験する学生であれ、自動化を探求するAI愛好家であれ、Chrome DevTools MCPサーバーをインストールして使用することで、生産性とコード品質を大幅に向上させることができます。

Chrome DevToolsがAIエージェントと直接対話できるようになった今、残された唯一の疑問は、次に何を構築し、テストし、修正するかです。

ボタン