Chrome DevTools MCP：AIがブラウザを直接操作？開発効率を爆上げする新ツールが登場

Chrome DevToolsをModel Context Protocol (MCP) 経由で操作可能にするツールに関する話題です。AIエージェントがブラウザのデバッグ、DOM操作、ネットワーク監視などを直接実行できるようになり、フロントエンド開発やブラウザ自動化のワークフローを劇的に進化させることが期待されています。

誰かがこれ用のすごいエージェントスキルを作ってくれて、毎日使ってるけど、これマジでいいよ！

https://github.com/pasky/chrome-cdp-skill

たとえば、ローカルの音楽ライブラリの管理にcodexを使ってるんだけど、ブラウザでYT Musicのタブを開いて各アルバムを検索し、yt-dlpに渡すためのURLを取得するまでやってくれたんだ。

今はChromeブラウザだけで動くから、別のChromium系（自分はHeliumを使ってる）を指すようにスクリプトを書き換える必要があるけど、結構簡単だよ。

既存のセッションに接続するって同じアイデアで、これも驚くほど上手くいったよ：https://github.com/remorses/playwriter

しばらくこれを使ってるけど、主にopencodeのcodexで利用してる。今まで試した他のdevtools protocol系MCPよりも信頼性が高いし、トークンの効率もいいね。

個人的に気に入ってる意外な使い道は、GeminiにSVG編集のREPLとして使わせること。3〜4回の生成・更新・スクショのループで、すごくいい感じのカスタムアイコンを作ってくれたよ。

Electronアプリでも、リバースエンジニアリングや拡張の両方でバッチリ動くね。

かっこいいね。自分もPlaywrightで似たようなことやってる。ただ、以前はトークンを食いまくって、すぐ高額になっちゃってたんだよね。だから、まず結果をディスクにダンプして、エージェントにそれをクエリさせるラッパーを作ったくらい。https://uisnap.dev/

トークン消費の問題が解決されてるか、これもチェックしてみるよ。

Googleはエージェント型CLIコーディングでかなり遅れてるね。Gemini CLIはひどい。チームの誰も使ってないのが見え見えなレベル。それに重度なエージェントコーディングをやってる人ならわかると思うけど、MCPは明らかにオワコン。すでに高速で柔軟、学習も済んでるCLIツールがあるのに、なんでコンテキストウィンドウをあんなに無駄に消費しなきゃいけないんだ？ 本気でやってる奴はみんな、ヘッドレスChromiumか普通のChromeでPlaywrightを使ってるし、開発ツールもインスペクションも全部揃ってる。完璧に動くしね。これに惹かれるのは、初心者が「これが正解だ」と勘違いしてる場合だけ。答えがMCPになることはまずないよ。

自分はPlaywrightを使って全リクエストとレスポンスをインターセプトしてる。Claude CodeにYouTubeみたいなサイトを巡回させて、全要素のクリックや操作をさせながら、その裏で走るリクエストとレスポンスを記録させるんだ。それで、その裏側のAPIを使って、どんなサイトともやり取りできる詳細な型定義付きのAPIを生成させてる。

まあ、各社の利用規約には間違いなく抵触するだろうけど、同時に、何かを成し遂げるためにギガバイト単位の広告や画像、マークアップを読み込まなくて済むしね。

もし興味ある人がいたら、今週時間を作って公開してもいいよ。

https://github.com/padenot/firefox-devtools-mcp を入れたFirefoxの方が、デフォルトのChrome MCPよりもうまく動くことがわかった。こっちの方がかなり速い気がする。

DevTools MCPプロジェクトに、スタンドアロンのCLIが実装されたばかりだよ：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

MCPのえげつないトークンコストに悩まされてる人たちには朗報だね ;)

このCLIはまだ告知されてないけど（みんなごめん！）、最新のv0.20.0リリースに含まれてる。（免責事項：自分は元DevToolsチーム。今も関わってるけどね）

自分のミドルウェアアプリ用に、エージェントにDOM制御をさせるためのWebsocketプロキシとChrome拡張を作った：https://github.com/RALaBarge/browserbox

今は研究のためにエージェントのツール利用の成功率を向上させてるところで、セッションで許可したCookieを使ってあらゆるリソースにアクセスするためのプロキシとしてこれを使ってる。

ここ数ヶ月TideWaveを使ってるけど、これには最初から機能が組み込まれてるよ。最初はElixir/LiveView用だったけど、今は主要なJavaScriptフレームワークやRoRもサポートしてる。こういうのが好きな人はチェックしてみて。さらに踏み込んで、ブラウザだけでなくアプリのランタイムにもアクセスできるんだ。

エージェントがデータベースやエンドポイントにアクセスできる状態で、実行中のアプリ内に居座ってる感じ。最高だよ。

1. https://tidewave.ai/