【結局どっち？】Chrome DevTools MCPとChrome拡張機能MCP、バズってるけど何が違うか調べてみた
ども！最新のAI技術を触りまくることに命を燃やすテックブロガーのタカマツです。
最近、エンジニアの皆さんのタイムラインで「Chrome MCP」という単語をよく見かけませんか？
「Googleが提供するDevTools MCPがすごい！」
「いや、この拡張機能MCPこそローカル開発の神ツールだ」
… 一体、どっちやねん？😅
同じ「MCP」という名前がついているので、何が何だかよく分からなくなってしまいますよね。
というわけで、この状況を整理すべく、私が両方について詳しく調べてみました。
この記事を読めば、「なるほど、そういうことか！」とスッキリして、今日からどちらを試すべきかが明確になります。Chrome MCPにワクワクしている方は、ぜひ最後までお付き合いください！
そもそも：「MCP」は"AI界のUSB-C"です
まず、大きな前提としてMCP (Model Context Protocol)は、AIと外部ツールやデータを繋ぐための「汎用プロトコル（共通の通信ルール）」のことです。「AI界のUSB-C」と考えると分かりやすいかと思います。このプロトコルのおかげで、AIがさまざまなツールを柔軟に扱えるようになりました。
さて、ここからが本題です。このMCPをChromeで利用する実装が、今話題になっている以下の2種類です。
- Chrome DevTools MCP
- 拡張機能ベースMCP
これらは名前こそ似ていますが、性格も用途も全く異なります。一つずつ見ていきましょう。
① 🤖 Chrome DevTools MCP
こちらはChrome DevTools自体が提供するMCPサーバー機能で、CI/CDパイプラインや自動テストで真価を発揮する本格的なツールです。
一言で言うと、「AIにChrome DevToolsの機能を解放して、ブラウザを自動操作させる」ためのサーバーです。
よくある構成として、Puppeteer経由でChrome DevTools Protocol (CDP)を操作し、新規のブラウザインスタンスを立ち上げることが多いようです。つまり、あなたがローカルで開いているブラウザとは別の、クリーンな環境で動作することが多い、ということです。
では、何に使うのでしょうか？
- CIでのE2Eテスト: 「PRが出されたら、このテストシナリオを自動で実行し、失敗したらマージをブロックする」
-
パフォーマンス監視: 例えば、「
mainブランチのLCPスコアと比較して、今回の変更で5%以上悪化していたらアラートを出す、といった運用も考えられますね」 - 再現性が重要なバグ調査: 「クリーンな環境でこの手順を試し、バグが本当に再現するか確認する」
このように、「人」が手動で行うデバッグというよりは、「マシン」が実行する自動化のためのツールです。信頼性と安全性が第一のため、クリーンな環境で動かす構成が基本となります。
② 🔥 拡張機能ベースMCP
次にご紹介するのは、hangwin/mcp-chrome に代表される、Chrome拡張機能として動作するものです。こちらは公式のものとは対照的です。
一言で言うと、「今あなたが開いているブラウザの"状態"を活用して、AIが操作できるようにする」ためのツールです。
こちらの最大の特徴は、あなたのログイン状態（セッション）をそのまま引き継いで、AIがブラウザと"シンクロ"できること。これがローカルでの開発効率を飛躍的に高める理由です。
では、何に使うのでしょうか？
- ログインが面倒な環境でのデバッグ: 「ステージング環境にログインして、このAPIのレスポンスを確認して。ついでにCookieの情報もダンプして」
- 開発中のリアルタイムUI修正: 「今見ている画面をFigmaのデザインと比較して、異なっている箇所をリストアップし、CSSの修正案を提示して」
- 複数タブをまたいだ情報収集: 「現在開いている参考サイト3つのソースコードから、使用されているJSライブラリをすべて抽出して」
つまり、「マシン」による自動化というより、「人」が行う日々の開発作業を高速化するための相棒と言えるでしょう。ただし、ブラウザ内のタブやDOM、Cookie/ストレージ、ネットワーク操作など広範囲な操作が可能になるため、信頼できない拡張機能やサーバーに接続するのは慎重になるべきです。まさに、柔軟ながらも注意が必要なツールというわけですね。
【結論】ひと目でわかる比較表
| 🤖 Chrome DevTools MCP | 🔥 拡張機能ベースMCP | |
|---|---|---|
| 思想 | 再現性 & 安全性 | 利便性 & 効率 |
| 誰向け？ | CI/CDパイプライン (マシン) | ローカルの開発者 (人間) |
| 動く場所 | 隔離された別ブラウザ (が多い) | 今あなたが使っているブラウザ |
| セッション | 引き継がない (構成が多い) | ガンガン引き継ぐ |
| 得意技 | 自動テスト、パフォーマンス監視 | ログイン前提のデバッグ、リアルタイムUI修正 |
もう、お分かりいただけたでしょうか？
- CI/CDなどの自動化が目的なら → Chrome DevTools MCP
- 日々のローカル開発を高速化したいなら → 拡張機能ベース MCP
これらは競合するものではなく、全く別の用途のツールだったのですね。
これで今日からあなたもMCPマスターです。話題の技術も、こうして整理すれば怖くありません。
まずは公式のもの(Chrome DevTools MCP)から試してみるのが良いと思いますので、Gemini CLIでこれを実行してみてはいかがでしょうか？
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
(公式で紹介されている実行例ですが、環境によっては追加設定が必要な場合もありますので、公式ドキュメントのMCP Client configurationを確認してみてくださいね！)
上記のコマンドを実行するとこんな画面で操作を続けて行けます！！
それではまた、次の記事で！ 🚀
Discussion