Chrome DevTools MCPを導入・活用する方法

TL;DR

Chrome DevTools MCPは、ChromeとNode.jsなどを準備し、利用するAIクライアント向けの設定を追加して導入する。クリックやフォーム入力だけでなく、コンソールとネットワークのエラー診断、性能計測、画面確認に対応し、Web開発の検証と修正をAIエージェントに支援させられる。

Transcript

おすです。本日はですね、Chrome deツールMCP、こちらについてお話し ていきたいと思います。え、この ChromedeブツールMCPと言うと 、ま、似てるサービスというか、似てる ツールと言うとプレイライトMCPこれに 似てるんですけども、ちょっとね、え、 厳密に多分あの想定している、ま、あの 目的みたいなのがね、え、異なってたり すると思いますんで、ま、それをちょっと 今回、え、お話しできたらなという風に 思います。どういうことができるのかって 言うと、このMCPを通してブラウザーを 操作する系ですね。え、例えばこの要素 クリックしてとか、このページに移動して とか、え、スクリーンショット取って みたいなことが、ま、基本的なツールとし て提供されているんですけども、え、この Chr... Read More

Key Insights

• Chrome DevTools MCPは、AIエージェントからChromeを操作し、Webサイトの検証やデバッグを支援するChrome公式のMCPサーバーである。
• 主要な用途は、コード変更のリアルタイム検証、コンソールとネットワークのエラー診断、利用者の操作再現、表示問題の確認である。
• 基本操作は、ページ移動、クリック、ドラッグ、フォーム入力、スクリプト実行、テキスト取得、スクリーンショット撮影などで構成される。
• 内部のブラウザ操作にはPlaywrightではなくPuppeteerが使われており、利用にはChrome、Node.js、NPMの準備が必要である。
• 導入方法はClaude Code、Codex、Cursorなど利用環境ごとに公式リポジトリへ記載され、指定された設定やコマンドを追加する形である。
• ヘッドレス設定は、Chromeの画面を表示せず軽量に動かしたい場合に有効だが、サイト側の対策や確認目的によって切り替える必要がある。
• Playwright MCPは細かなブラウザ操作や汎用的な自動化に向き、DevTools MCPは性能計測やエラー診断など開発目的に向くというのが話者の評価である。
• 性能分析の実演では、ページへのアクセス、内容取得、計測、スクリーンショット、改善点の提示が行われた一方、遅いページではタイムアウトが課題になった。
• 🎬 このチャンネルの他の動画:
  • Claude Opus 5は実務で使えるか？
  • Claude CodeでAI駆動開発する方法
  • Claude CodeでHTML文書を使い分ける方法
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: Chrome DevTools MCPとは何ですか？

Chrome DevTools MCPは、AIエージェントからChromeを操作し、WebサイトやWebアプリの開発作業を支援するChrome公式のMCPサーバーである。クリックやページ移動だけでなく、コンソールログの取得、ネットワークエラーの診断、性能計測、スクリーンショットによる表示確認などを実行できる。

Q: Chrome DevTools MCPを導入する方法は？

Chrome、Node.js、NPMを準備し、公式リポジトリに掲載された利用環境別の設定またはコマンドを追加する。ドキュメントにはClaude Code、Codex、Cursorなどに対応した導入方法が示されており、設定後は案内された確認用プロンプトを実行して接続状況を確かめられる。

Q: Chrome DevTools MCPでWebサイトを分析する方法は？

対象ページと分析目的をAIエージェントへ伝え、性能分析やエラー診断を依頼する。実演では、MCPがページへアクセスしてテキストを取得し、性能を計測しながらスクリーンショットも撮影し、最後に改善点を提示した。提示内容を基に、AIエージェントへ修正を依頼する流れも考えられる。

Q: Chrome DevTools MCPでは何を自動操作できますか？

ページへの移動、要素のクリック、ドラッグ、フォーム入力、スクリプト実行、テキスト取得、スクリーンショット撮影などを自動化できる。さらにコンソールメッセージの取得や性能計測にも対応しており、一般的なブラウザ操作に加えて、Web開発中の確認と診断を一連の作業として進められる。

Q: Chrome DevTools MCPとPlaywright MCPの違いは何ですか？

話者の評価では、Chrome DevTools MCPはデバッグ、性能計測、コンソールやネットワークのエラー診断など、Web開発上の目的に重点を置いている。一方、Playwright MCPは操作単位の細かなツールが多く、汎用的なブラウザ自動化やスクレイピング用エージェントを作る場合に使いやすいとされる。

Q: Chrome DevTools MCPでヘッドレス実行を使う方法は？

設定項目でヘッドレスを有効にすると、Chromeの画面を表示せずにブラウザ操作を実行できる。複数のブラウザ画面を開かず軽量に開発支援を動かしたい場合に便利である。ただし、ヘッドレス時のアクセスへ対策しているサイトもあるため、対象サイトや目視確認の必要性に応じて切り替える。

Q: Chrome DevTools MCPはスクレイピングに向いていますか？

基本的なページ移動、クリック、フォーム入力、テキスト取得が可能なため、スクレイピングに利用すること自体はできる。ただし話者は、専用のスクレイピングエージェントや汎用的なブラウザ自動化を作る用途では、細かな操作ツールを備えるPlaywright MCPの方が使いやすいという見解を示している。

Q: Chrome DevTools MCPで性能を確認する際の注意点は？

読み込みが遅いページではタイムアウトが起きる場合がある点に注意が必要である。実演では性能分析、テキスト取得、スクリーンショット撮影、詳細分析まで進んだものの、遅いページでのタイムアウトが気になる点として挙げられた。実行結果を確認しながら対象ページや設定を調整する必要がある。

Summary & Key Takeaways

• Chrome公式のDevTools MCPは、AIエージェントからブラウザを操作し、WebサイトやWebアプリの開発を支援するMCPサーバーである。ページ移動、クリック、ドラッグ、フォーム入力、スクリーンショット取得といった基本操作に加え、コンソールログやネットワークエラーの取得、性能計測、表示上の問題の確認など、開発時の診断に重点を置いている。

• 導入にはChrome、Node.js、NPMを用意し、公式ドキュメントに掲載されたClaude Code、Codex、Cursorなど各クライアント向けの設定やコマンドを使用する。ブラウザ操作の内部にはPuppeteerが使われている。設定ではヘッドレス実行、Chromeのチャンネル、ログファイルなどを選択でき、通常はヘッドレスにすると画面を開かず軽量に実行できる。

• Playwright MCPは細かな操作ツールが多く、汎用的なブラウザ自動化やスクレイピングに向くというのが話者の評価である。一方、DevTools MCPはデバッグや計測など目的単位の機能が分かりやすく、Web開発の分析に適している。実演では性能分析、テキスト取得、スクリーンショット撮影、改善点の提示まで進んだが、読み込みが遅いページではタイムアウトも見られた。