連携Chrome DevTools MCP

Chrome DevTools MCP

Chrome DevTools MCP はモデル・コンテキスト・プロトコル（MCP）サーバーであり、Gemini、Claude、Cursor、CopilotなどのAIコーディングアシスタントがライブChromeブラウザを制御・検査できるようにし、信頼性の高い自動化、高度なデバッグ、パフォーマンス分析を実現します。

主な機能

  • パフォーマンスのインサイト取得： Chrome DevTools を使用してトレースを記録し、実行可能なパフォーマンスのインサイトを抽出します。
  • 高度なブラウザデバッグ：ネットワークリクエストの分析、スクリーンショットの取得、ブラウザコンソールの確認が可能です。
  • 信頼性の高い自動化： puppeteer を使用してChrome内の操作を自動化し、操作結果を自動的に待機します。
MCP 型技術スタック利点主なエコシステム最適な用途
Chrome DevTools MCPNode.js / Puppeteer公式標準で、堅牢かつ深いパフォーマンス分析ツール。幅広い（Gemini、Copilot、Cursor）CI/CD自動化、IDE間ワークフロー、詳細なパフォーマンス監査。
Playwright MCPNode.js / Playwrightピクセルではなくアクセシビリティツリーを使用。視覚なしでも決定論的でLLMに適しています。幅広い（VS Code、Copilot）信頼性が高く構造化された自動化により、わずかなUI変更による破損が起きにくくなります。
Scrapeless MCPクラウドサービスローカル設定不要、スケーラブルなクラウドブラウザで、複雑なサイトやボット対策も処理可能。API主導（任意のクライアント）大規模で並列的な自動化タスクや、強力なボット検出を持つウェブサイトとのやり取りに最適。

必要条件

はじめに

Scrapeless API キーを取得

Scrapeless にログインして、あなたの APIキーを取得してください。

get-api-key.png

クイックスタート

この JSON 設定は、MCP クライアントが Chrome DevTools MCP サーバーに接続し、リモートの Scrapeless クラウドブラウザインスタンスを制御するために使用されます。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoin=wss://browser.scrapeless.com/api/v2/browser?token=scrapeless api key&proxyCountry=US&sessionRecording=true&sessionTTL=900&sessionName=CDPDemo"
      ]
    }
  }
}

ショーケース

chrome-devtools-mcp.gif

1つのクラウドブラウザ、無限の統合

Chrome DevTools MCP、Playwright MCP、およびScrapeless BrowserMCP— これらは共通の基盤を共有しています。すべてが Scrapeless Cloud Browserに接続します。

従来のローカルブラウザ自動化とは異なり、Scrapeless Browser は完全に****クラウド上で動作するため、開発者やAIエージェントにとって比類ない柔軟性とスケーラビリティを提供します。

その真の強みは次の通りです：

  • シームレスな統合： 既存のプロジェクトからの移行を容易にするため、 Puppeteer、 Playwright、および CDPと完全に互換性があり、1行のコードで統合できます。
  • グローバルIPカバレッジ： 住宅用、ISP、無制限のIPプールを 195か国以上で提供。透明かつ費用対効果の高い料金（$0.6–1.8/GB）。大規模なWebデータ自動化に最適です。
  • 分離されたプロファイル： 各タスクは 専用で永続的な環境で実行され、セッションの分離、複数アカウント管理、長期的な安定性を保証します。
  • 無制限の同時スケーリング： オートスケーリングインフラで即座に 50～1000以上のブラウザインスタンス を起動可能。サーバー設定不要、パフォーマンスのボトルネックなし。
  • 世界中のエッジノード： 複数のグローバルノードに展開することで超低遅延を実現し、他社のクラウドブラウザと比べて 2～3倍高速な起動速度 を達成します。
  • アンチディテクション： 厳重な保護レイヤー下でも中断のない自動化を実現するため、 reCAPTCHA、 CloudflareTurnstile、および AWS WAFに対する組み込みソリューションを備えています。
  • ビジュアルデバッグ： ライブビューを通じて人間とマシンのインタラクティブなデバッグやリアルタイムのプロキシトラフィック監視が可能。セッション録画でページごとの再生を行い、問題をすばやく特定し、運用を最適化できます。

使用例

  • Webパフォーマンス分析：CDPを使用してトレースを記録し、ページ読み込み、ネットワークリクエスト、及びJavaScript実行に関する実行可能なインサイトを抽出することで、AIアシスタントがパフォーマンスの最適化を提案できるようにします。
  • 自動デバッグ：コンソールログの収集、ネットワークトラフィックの検査、スクリーンショットの取得、バグの自動再現により、トラブルシューティングを迅速化します。
  • エンドツーエンドテスト：Puppeteerを使用して複雑なワークフローを自動化し、ページのインタラクションを検証し、Chromeでの動的コンテンツのレンダリングをチェックします。
  • AI支援自動化：GeminiやCopilotなどのLLMが、フォームの入力、ボタンクリック、または構造化データのスクレイピングをChromeページ上で信頼性と精度を持って実行できます。
ScraplingPlaywright MCP