はじめに

この記事では、「Chrome DevTools MCP」 を導入することによって、私の日々の開発における幸福度指数が爆上がりしたので、導入方法を解説して日本の幸福度指数を1上げたいと思います。
※ちなみに日本の幸福度指数は世界147カ国中61位で1上昇すると9位になります。

これまでのフロントエンドデバッグの苦悩

私のフロントエンドのデバッグに関しては
古くはFirefoxの「Firebug」に始まり、最近ではChromeの「DevTools（開発者ツール）」でJavaScriptのデバッグ、CSSの微調整、セッション情報の確認などを行っていました。

しかし

ローカル環境だと通信経路や認証の違いから、Ajaxのバグが再現しない。
そもそもローカル環境が整備されておらず、開発環境（Staging等）にあげるしかない。

上記のようなことも多く、開発環境のコードに泣く羞く console.log を仕込んでビルドし、デプロイしてはブラウザで確認するという、虚無の往復ビンタを食らう日々を過ごしていました。

そんな不毛な日々におさらばし、全エンジニアを救ってくれる救世主こそが、今回ご紹介する Chrome DevTools MCP です。

Chrome DevTools MCPとは？

**Model Context Protocol（MCP）**とは、AIと外部ツールを繋ぐためのオープンな規格です。

「Chrome DevTools MCP」は、Google公式が提供する**「AIエージェントにChromeのDevToolsを操作する特権を与える」**ためのMCPサーバーです。
これを使うことで、VS Codeの中のGitHub Copilotが、人間の代わりにリアルタイムでブラウザのコンソールログを読み、ネットワークリクエストを監視し、DOMを解析してバグの原因を突き止めてくれるようになります。

導入方法

今回はIDEとして VS Code を使用し、拡張機能 GitHub Copilot Chat（Agent Mode） に組み込む手順を解説します。

1. VS Code（GitHub Copilot）にMCPサーバーを登録する

VS CodeのGitHub CopilotでMCPサーバーを動かすには、専用の設定ファイル（mcp.json）を編集します。

VS Codeでコマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）を開きます。
「MCP: Open User Configuration」（全体設定）または 「MCP: Open Workspace Folder MCP Configuration」（プロジェクト限定設定）を選択します。

開いた mcp.json に、以下の設定を追加して保存します。

{
  "servers": {
    "io.github.ChromeDevTools/chrome-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

ClineやCursorなどの他ツールでは、ルートのキー名が "mcpServers" になっていることが多いですが、VS CodeのGitHub Copilot公式の指定は "servers" です。 ここを間違えるとCopilotが認識してくれないので注意してください！

使い方

1. Copilot Chatを「Agent」モードにする

VS CodeのCopilot Chatパネルを開き、チャット入力欄の下などにあるモード選択から**「Agent」**を選択します。これでCopilotが自律的にツール（MCP）を実行できるようになります。

2. AIにデバッグを丸投げする

今回は例としてローカルで起動したWebページのデバッグを依頼します。開発環境など限られたユーザーしかアクセスできないページだとしてもブラウザで開けるならデバッグ可能です。

プロンプト例：
http://localhost:3000/ を開いて、そこで発生しているajaxエラーを解析して

指示を受けたCopilot Agentは、特に指示することなく裏で以下のようにChrome DevTools MCPのツールを自律的に使いこなします。実行時に新規のchromeウィンドウが開くことに注意してください。

しばらくすると、Copilotから以下のような回答が返ってきます。

Copilotの回答：
発生しているAjaxエラーの一覧
エラー種別エンドポイント原因
1 404 Not Found GET /api/dashboard/stats 存在しないAPIエンドポイントへリクエスト → HTTP 404 を受けて throw new Error
2 ネットワークエラー http://192.0.2.1/api/unreachable-host 到達不能なIPへリクエスト（3秒タイムアウト）
3 JSONパースエラー GET /api/broken-json サーバーがHTMLの404ページを返すため、JSON.parse() が SyntaxError で失敗
4 定期ポーリング失敗 GET /api/realtime/metrics 5秒ごとに存在しないAPIへポーリング → 毎回 HTTP 404

「……最高か？」

これまで手動でDevToolsを開き、Networkタブを凝視し、リクエストヘッダーをパースして原因を探っていたあの時間が、わずか数秒の雑談で完結します。

最後に（感想）

Chrome DevTools MCPを導入してからというもの、フロントエンドのデバッグに付きまとっていた「めんどくさい」「再現しない」「ログ仕込むの怠い」というストレスが綺麗に吹き飛びました。

環境構築も5分足らずで終わるので、ぜひ皆さんも導入して、一緒に日本の幸福度指数を爆上げしていきましょう！

今回はVScode+Github Copilotの組み合わせでしたがClaude CodeやCursorでも導入は同様に簡単なので
方法に関しては参考記事を見てみてください。

参考リンク