Browser統合Chrome DevTools MCP

Chrome DevTools MCP

Chrome DevTools MCP は、Gemini、Claude、Cursor、CopilotなどのAIコーディングアシスタントが、ライブのChromeブラウザを制御および検査し、信頼性の高い自動化、高度なデバッグ、パフォーマンス分析を行うことを可能にするModel-Context-Protocol（MCP）サーバーです。

主な機能

  • パフォーマンスの洞察を得る：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 Browser MCPクラウドサービスローカルセットアップ不要、スケーラブルなクラウドブラウザ、複雑なサイトやアンチボット対策に対応。API駆動（任意のクライアント）大規模な並列自動化タスク、および強力なボット検出機能を持つWebサイトとの対話。

要件

はじめに

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

一つのクラウドブラウザ、無限の連携

Chrome DevTools MCP、Playwright MCP、およびScrapeless Browser MCPは、すべて同じ基盤を共有しています。それらはすべてScrapelessクラウドブラウザに接続します。

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

これが真に強力な理由です。

  • シームレスな統合：Puppeteer、Playwright、およびCDPと完全に互換性があり、1行のコードで既存のプロジェクトから簡単に移行できます。
  • グローバルIPカバレッジ： 195カ国以上のレジデンシャル、ISP、無制限のIPプールにアクセスでき、透明で費用対効果の高い料金（$0.6–1.8/GB）で利用できます。大規模なWebデータ自動化に最適です。
  • 隔離されたプロファイル： 各タスクは専用の永続的な環境で実行され、セッションの分離、複数アカウントの管理、長期的な安定性を保証します。
  • 無制限の並行スケーリング： 自動スケーリングインフラストラクチャにより、50～1000以上のブラウザインスタンスを即座に起動できます。サーバー設定もパフォーマンスボトルネックもありません。
  • 世界中のエッジノード： 複数のグローバルノードにデプロイすることで、超低レイテンシを実現し、他のクラウドブラウザよりも2～3倍高速な起動が可能です。
  • **アンチ検出：**reCAPTCHA、Cloudflare Turnstile、AWS WAFに対する組み込みソリューションにより、厳格な保護レイヤー下でも中断のない自動化を保証します。
  • ビジュアルデバッグ： ライブビューを通じて人間と機械のインタラクティブなデバッグとリアルタイムのプロキシトラフィック監視を実現します。セッション記録をページごとにリプレイすることで、問題を迅速に特定し、操作を最適化できます。

ユースケース

  • Webパフォーマンス分析: CDPでトレースを記録し、ページロード、ネットワークリクエスト、JavaScript実行に関する実用的な洞察を抽出し、AIアシスタントがパフォーマンス最適化を提案できるようにします。
  • 自動デバッグ: コンソールログをキャプチャし、ネットワークトラフィックを検査し、スクリーンショットを撮り、バグを自動的に再現して、トラブルシューティングを迅速化します。
  • エンドツーエンドテスト: Puppeteerで複雑なワークフローを自動化し、ページインタラクションを検証し、Chromeでの動的コンテンツのレンダリングを確認します。
  • AIアシスト自動化: GeminiやCopilotのようなLLMは、フォームの入力、ボタンのクリック、またはChromeページからの構造化データのスクレイピングを、信頼性と精度をもって実行できます。
ScraplingPlaywright MCP