はじめに
この記事では、「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でも導入は同様に簡単なので
方法に関しては参考記事を見てみてください。