--- title: "chrome-devtools-mcpでクラウド型アンチ検出ブラウザを制御する" slug: chrome-devtools-mcp-with-bright-data date: 2026-10-05T07:31:18+00:00 modified: 2026-10-05T07:31:20+00:00 permalink: https://brightdata.jp/blog/ai/chrome-devtools-mcp-with-bright-data type: blog --- [ ブログ ](https://brightdata.jp/blog "ブログ") / [AI](https://brightdata.jp/blog/ai) [AI](https://brightdata.jp/blog/ai) # chrome-devtools-mcpでクラウド型アンチ検出ブラウザを制御する chrome-devtools-mcpとBright DataのBrowser APIを組み合わせ、AIエージェントがクラウド型アンチ検出ブラウザをシームレスに制御できるようにします。 3 分読 [ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Chrome Dev tools with Bright Data](https://media.brightdata.jp/2026/09/Chrome-Dev-tools-with-Bright-Data.png) この記事では、以下について学びます： - Chrome DevTools for Agents（`chrome-devtools-mcp`）がAI制御のブラウザ自動化にもたらすものとは。 - その限界と、Bright DataのBrowser APIがどのようにそれらを解決するか。 - お好みのAIエージェント（Gemini CLI、Claude Codeなど）を`chrome-devtools-mcp`に接続し、Browser API経由でリモートブラウザを制御する方法。 さっそく見ていきましょう！ ## Chrome DevTools for Agentsとは？ `chrome-devtools-mcp`は、「[Chrome DevTools for agents](https://developer.chrome.com/docs/devtools/agents)」としても知られ、AIコーディングエージェントに[CDP（Chrome DevTools Protocol）](https://chromedevtools.github.io/devtools-protocol/)を通じてChromiumベースのブラウザの制御権を与えるオープンソースのMCPサーバーです。 具体的には、AIエージェントがページのナビゲート、Web要素とのインタラクション、ネットワークリクエストの検査、JavaScriptの実行、スクリーンショットの取得、ブラウザの問題のデバッグ、パフォーマンスの分析を行えるようにします。内部的には、Chrome DevToolsの機能をMCPツールとして公開しており、AIコーディングエージェントがブラウザセッションの自動化と検査に利用できます。 このプロジェクトはApache 2.0ライセンスの下でGitHubで公開されており、[52,000以上のGitHubスター](https://github.com/ChromeDevTools/chrome-devtools-mcp)を獲得しています。 ## `chrome-devtools-mcp`の現状の制限とその解決方法 `chrome-devtools-mcp`はブラウザセッションを制御するための強力なツールであり、特にデバッグやパフォーマンス分析に適しています。一方で、ブラウザ自動化に共通する以下のような課題も依然として存在します： - **ブロック**：Webサイトは自動化されたブラウザセッションを検知し、CAPTCHAやエラー、その他の制限で応答することがあり、ワークフローが中断されます。これは、この技術が[ヘッドレスモード](/blog/proxy-101/what-is-a-headless-browser)で新しいChromeセッションを起動するためです。このようなセッションはブラウザ履歴やユーザーコンテキストが限定的であり、Webサイトが自動化されたものと識別しやすくなります。さらに、一般ユーザーはGUIが有効なブラウザを使用しており、ヘッドレスモードではありません。 - **リソース消費**：複数のタブやブラウザインスタンスをローカルで実行すると、システムリソースを大量に消費する可能性があります。1つのChromeタブだけで数百メガバイトのRAMを使用することがあり、大規模な並行自動化はローカルインフラに大きな負荷をかけます。 これらの制約は、特にエンタープライズ用途において、ブラウザ自動化の信頼性とスケーラビリティの両方に影響を及ぼします。理想的な構成は、`chrome-devtools-mcp`が、大規模な自動化向けに設計され、アンチボット機能を備えたクラウドブラウザを制御できるようにすることです。これはまさに[Bright DataのBrowser API](/products/scraping-browser)が提供するものです。 ### 解決策としてのBright Data Browser API [Bright DataのBrowser API](https://docs.brightdata.com/products/scraping-browser/introduction)は、ブラウザの実行をローカルマシンから、スケールに対応するために構築された完全管理型のクラウドインフラへと移行することで、`chrome-devtools-mcp`の制限に対処します。 ブラウザをローカルで実行・維持する代わりに、CDPエンドポイントを通じてChrome DevTools for agentsをBrowser APIに接続できます。Browser APIは、プロキシローテーション、CAPTCHAの解決、高度なフィンガープリント対策機能など、事前設定済みのクラウドブラウザセッションを提供します。 **重要**：Browser APIは[Bright Dataの無料プラン](https://docs.brightdata.com/general/account/billing-and-pricing/free-tier)でご利用いただけ、月間5,000の無料クレジットが含まれています。 このサービスの背後には、[4億以上のIP](/proxy-types/residential-proxies)を擁するレジデンシャルネットワークを備えたBright Dataのプロキシインフラがあります。これにより、グローバルなジオターゲティングと無制限の同時ブラウザセッションがサポートされ、99.99%のアップタイムと99.95%の成功率を実現しています。 ## Chrome DevTools for AgentsとBright DataのBrowser APIを連携させる方法 この章では、AIエージェントで`chrome-devtools-mcp`を設定する方法を紹介します。Bright DataのBrowser APIを介して、ステルス性が高く無限にスケール可能なクラウドブラウザセッションに接続するように設定します。 **注意**：このセクションはGemini CLIに焦点を当てています。同じ手順を、Claude Code、OpenAI Codex、OpenCodeなどの[他のAIエージェントハーネス](/blog/ai/what-is-an-ai-harness)にも応用できます。 以下の手順に従ってください！ ### 前提条件 始める前に、以下を用意してください： - [ローカルにインストールされたGemini CLI](https://geminicli.com/docs/get-started/installation/)。 - [Bright Dataアカウント](/?hs_signup=1)。 [MCPの仕組み](https://modelcontextprotocol.io/docs/2026-07-28/learn/architecture)と、[Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)が公開するツールについての基本的な知識があると役立ちます。 ### ステップ1：Bright Data Browser APIを設定する まず、Bright Data Browser APIのCDPベースのリモート接続URLを取得します。 まだお持ちでない場合は、Bright Dataアカウントを作成してください。すでにアカウントをお持ちの場合は、[ログイン](/cp/start)してコントロールパネルにアクセスしてください。 次に、左側のメニューから「Web Access > Web Access API」オプションを選択します： ![「Web Access API」ページへの移動](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479303225_image.png)My APIsテーブルに既にBrowser APIのエントリ（下記に示す「browser\_api」エントリ）がある場合は、APIページにアクセスします： ![「browser_api」APIに注目](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789560488496_image.png)そうでない場合は、「Create API」ボタンのドロップダウンをクリックし、「Browser API」を選択します： ![「Create API > Browser API」オプションのクリック”/>

:@brd.superproxy.io:9222 ``` Browser APIのパスワードを表示するには、パスワードの隣にある「Show」をクリックします。メールで受け取った多要素認証コードを入力してください。 これで、リモートブラウザ制御のために`chrome-devtools-mcp`を設定するのに必要なCDP接続URLが手に入りました。素晴らしい！ ### ステップ2：`chrome-devtools-mcp`経由でGemini CLIにBrowser APIを設定する `chrome-devtools-mcp`をAIエージェントに統合し、Bright DataのBrowser APIを通じてリモートのアンチ検出ブラウザセッションを制御するよう指示します。Gemini CLIでは、以下のコマンドでこれを実現できます： ```none gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://:@brd.superproxy.io:9222' ``` **注意**：`wsEndpoint`引数には、プレースホルダーを実際のBrowser API CDP接続URLに必ず置き換えてください。 ターミナルには、`chrome-devtools` MCPサーバーが追加されたことを示すメッセージが表示されます： ![コマンドの実行結果](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789562135737_image.png)以下に注目してください： - `--scope project`は、プロジェクト内でMCPサーバーをローカルに設定します。グローバルに設定したい場合は、このオプションを省略してください。 - `--wsEndpoint='wss://:@brd.superproxy.io:9222'`は、`chrome-devtools-mcp`にBright DataのBrowser APIエンドポイントへ接続するよう指示します。 **注意**：ここでは`wsEndpoint`引数を使用することが重要です。`chrome-devtools-mcp`のドキュメントでは、[`wsEndpoint`は`browserUrl`の代替](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/e2e965aa2653c9e210193236031989c21a249b67/docs/configuration.md)であると記載されています。しかし、Browser APIのCDP URLを`browserUrl`で指定すると、「Request cannot be constructed from a URL that includes credentials」というエラーで連携が失敗します。 このコマンドは、プロジェクトのフォルダ内に以下の設定を含む[`.gemini/settings.json`](https://geminicli.com/docs/reference/configuration/)ファイルを生成します： ```none { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest", "--wsEndpoint=wss://:@brd.superproxy.io:9222" ] } } } ``` あるいは、このファイルを手動で作成することもできます。 **補足**：[お好みのAIエージェント](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md)でも`chrome-devtools-mcp`を設定できます。例えば、Claude Codeでは次を実行します： ```none claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://:@brd.superproxy.io:9222' ``` 素晴らしい！これで、お使いのAIエージェントはMCPを通じてChrome DevToolsのツールにアクセスできるようになり、Browser APIが提供するリモートブラウザセッションに接続するよう設定されました。 ### ステップ3：連携が機能することを確認する プロジェクトフォルダ内でGemini CLI（またはお好みのAIエージェント）を起動します： ```none gemini ``` 次に、`/mcp`コマンドを実行して利用可能なMCPサーバーを表示します： ![29個のchrome-devtools MCPツールに注目](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789550937784_image.png)`chrome-devtools` MCPサーバーと、その29個の利用可能なツールが表示されるはずです。これには以下が含まれます： **ツール****説明**`navigate_page`URLへのナビゲート、ページの再読み込み、またはブラウザ履歴の前後への移動を行います。`click`ページスナップショットで識別された要素をクリックします。ダブルクリックのオプションにも対応しています。`fill`入力欄やテキストエリアにテキストを入力したり、ドロップダウンメニューからオプションを選択したりします。`fill_form`複数のフォームフィールド、チェックボックス、ラジオボタン、セレクトを一度の操作で入力します。`press_key`他の入力ツールでは利用できないショートカット、ナビゲーション、インタラクションのために、キーボードキーやその組み合わせを押します。`type_text`キーボードシミュレーションを使用して、以前にフォーカスされた入力欄にテキストを入力します。`hover`ページ要素の上にポインターを移動させます。ホバーベースのメニューやインタラクションをトリガーする際に便利です。`wait_for`後続のアクションに進む前に、指定したテキストがページに表示されるまで待機します。`list_pages`現在開いているすべてのブラウザページと、後続のインタラクションに使用する識別子を一覧表示します。`new_page`新しいブラウザタブを開き、指定されたURLにナビゲートします。`take_snapshot`ページのアクセシビリティツリーをキャプチャし、要素と後続のインタラクションのための一意の識別子を公開します。`evaluate_script`ページ内でJavaScriptを実行し、ブラウザコンテキストからJSONシリアライズ可能な結果を返します。`list_network_requests`ページによる最近のネットワークリクエストを一覧表示し、リソースタイプでフィルタリングできます。`get_network_request`特定のネットワークリクエストを検査し、そのヘッダー、リクエストボディ、レスポンスデータを確認します。`take_screenshot`現在のページ、ビューポート、ページ全体、または特定の要素のスクリーンショットをキャプチャします。素晴らしい！これにより、`chrome-devtools-mcp`が正しく設定されており、そのブラウザ自動化ツールがAIエージェントで利用可能であることが確認できました。 最後のステップは、Bright DataのBrowser APIを通じてリモートブラウザセッションとやり取りするために、これらのツールを使用できることを確認することです。 ### ステップ4：Chrome DevTools for Agents + Browser APIをテストする Chrome DevTools for agentsが設定済みのBrowser APIセッションを制御できることを確認するために、Booking.comのようなアンチボット対策で保護された複雑なウェブサイトに対してテストします。 次のような実際のタスクで連携を試してみてください： ```none Open the Booking.com page in a browser and search for hotels in Barcelona for two people from September 23 to 24. Apply the "4-star" filter and sort the results by lowest price. Extract the first 10 results with the hotel name, nightly price, rating, and review count. ``` プロンプトを実行すると、以下のような結果が表示されるはずです： ![プロンプトの実行](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789552581424_11.gif)具体的には、Gemini CLIエージェントは以下のようにタスクを処理しました： 1. Booking.comに到達するために`navigate_page`を呼び出しました。 2. `list_pages`ツールを使用して、利用可能なブラウザページを特定しました。 3. `click`と`take_snapshot`ツールの組み合わせを使用して、関連要素を見つけ、要求された日付を選択しました。 4. `evaluate_script`を利用して、必要な追加のインタラクションを実行し、目的の結果ページに到達しました。 5. 再び`take_snapshot`を使用して、結果ページの構造を検査しました。 6. `evaluate_script`を使用し、カスタムJavaScriptスクリプトで必要なデータを抽出しました。 7. 抽出されたデータをテーブル形式で返しました。 以下はエージェントが生成した出力です： ![エージェントが生成した結果](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551511817_image.png)取得されたデータが、Booking.comに直接表示される結果と非常に近いことに注目してください： ![エージェントが生成した結果はBooking.comで入手できる結果と一致します](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551914832_image.png)このシンプルな例は、MCPを通じてGemini CLIに接続されたChrome DevTools for agentsが、リモートのBrowser APIセッションを通じてBooking.comとやり取りできることを示しています。 Booking.comは、アンチボット保護によりブラウザ自動化が困難であるため、有用なテストケースです。この構成では、Browser APIがブラウザセッションとサイトへのアクセスに必要なインフラを処理し、`chrome-devtools-mcp`はAIエージェントがブラウザとやり取りするために必要なツールを提供します。 その結果、ブラウザをローカルで実行・管理する必要なく、複雑なブラウザインタラクションを実行できるAIエージェントが実現します。ミッション完了です！ ### その他の活用例 `chrome-devtools-mcp`とBright DataのBrowser APIの組み合わせは、他にも多くのブラウザ自動化、デバッグ、データ抽出のユースケースをサポートできます。 さまざまなシナリオで試せるプロンプトを以下に示します： - **インタラクション後にネットワークリクエストからデータを抽出**：`Open a website, search for "web scraping," inspect the network requests generated when the results load, identify the request returning the search results, and extract the first 20 results from its response.` - **APIレスポンスを検査**：`Open a product page, identify the network request returning its product data, inspect the request and response, and extract the product name, price, availability, and rating.` - **ページのパフォーマンスを分析**：`Open a website and analyze its performance. Report the page load time, largest contentful paint, cumulative layout shift, and other relevant performance metrics, then identify potential bottlenecks.` - **JavaScriptエラーをデバッグ**：`Open a website, inspect the console for JavaScript errors and warnings, identify the affected scripts or pages, and explain the most likely causes based on the available debugging information.` `chrome-devtools-mcp`を通じて、エージェントはリンクのクリックやページ内容の読み取りだけに限定されません。コンソールの検査、パフォーマンス分析、ネットワークの監視なども行えます。[Playwright MCP](/blog/ai/playwright-mcp-server)のようなソリューションと比較すると、より深いブラウザの検査とデバッグを必要とするユースケースに適しています。 ## まとめ この記事では、Chrome DevTools for agentsとは何か、そしてそれがCDPを通じてどのようにブラウザ自動化をサポートするかを学びました。具体的には、Bright DataのBrowser APIと組み合わせることで、AIエージェントが組み込みのアンチボット機能を備えたスケーラブルなクラウドベースのブラウザセッションを実行できるようにする方法を見てきました。 その結果、エンタープライズレベルのワークロードにスケールできるAI制御のブラウザ自動化構成が実現します。同じ連携により、クラウドブラウザインフラに支えられたエージェント型ブラウザワークフローを構築することもできます。 Bright Dataアカウントにサインアップし、AI対応のウェブデータスクレイピングおよびブラウザ自動化ソリューションをぜひお試しください！ お問い合わせ無料トライアル![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) 目次 日本企業向けデータソリューション 日本のトップ企業が信頼するスケーラブルなウェブデータプラットフォーム。日本語24時間サポート、GDPR・個人情報保護法準拠、日本企業20社以上の導入実績。 [詳細を見る](https://brightdata.jp/solutions/data-solutions-for-japanese-companies "詳細を見る") [ ](https://news.ycombinator.com/submitlink?t=chrome-devtools-mcp%E3%81%A7%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%9E%8B%E3%82%A2%E3%83%B3%E3%83%81%E6%A4%9C%E5%87%BA%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B&u=https://brightdata.jp/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=chrome-devtools-mcp%E3%81%A7%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%9E%8B%E3%82%A2%E3%83%B3%E3%83%81%E6%A4%9C%E5%87%BA%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B&url=https://brightdata.jp/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](http://www.reddit.com/submit?title=chrome-devtools-mcp%E3%81%A7%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%9E%8B%E3%82%A2%E3%83%B3%E3%83%81%E6%A4%9C%E5%87%BA%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%99%E3%82%8B&url=https://brightdata.jp/blog/ai/chrome-devtools-mcp-with-bright-data) ## あなたは下記にもご興味がおありかもしれません [ ![TrueFoundry Agent Harness with Bright Data MCP](https://media.brightdata.jp/2026/08/TrueFoundry-Agent-Harness-with-Web-MCP.png) ](https://brightdata.jp/blog/ai/trueforge-with-bright-data "TrueForge + Bright Data MCPで本番稼働AIエージェントを構築する") [AI ![Satyam Tripathi](https://media.brightdata.jp/2024/09/Satyam-Tripathi-50x50.png) Satyam Tripathi Technical Writer ### TrueForge + Bright Data MCPで本番稼働AIエージェントを構築する Bright Data MCPは、ハーネスが提供しない取得レイヤーをTrueForgeエージェントに与え、サブエージェントが自動アクセスをブロックするサイトを読めるようにする。 04-Oct-2026 13 分読 ](https://brightdata.jp/blog/ai/trueforge-with-bright-data) [ ![Web Scraping with GLM](https://media.brightdata.jp/2026/09/Web-Scraping-with-GLM.png) ](https://brightdata.jp/blog/ai/web-scraping-with-glm "GLMによるウェブスクレイピング：テキストとビジュアルデータの抽出") [AI ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### GLMによるウェブスクレイピング：テキストとビジュアルデータの抽出 GLM-5.3とBright DataのWeb Unlockerを組み合わせたAI駆動ウェブスクレイピング。一般的な障壁を回避しながら、テキストとビジュアルデータを自動抽出します。 16-Sep-2026 1 分読 ](https://brightdata.jp/blog/ai/web-scraping-with-glm) [ ![Containers as a Service (CaaS)](https://media.brightdata.jp/2026/09/Container-as-a-Service.png) ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/containers-as-a-service "Containers as a Service（CaaS）：ウェブデータパイプラインとAIエージェントへの活用法") [ウェブデータ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Containers as a Service（CaaS）：ウェブデータパイプラインとAIエージェントへの活用法 CaaSの仕組みと、AIエージェント向けにBright Dataのウェブスクレイピングパイプラインをコンテナ全体でスケールする方法を解説します。 16-Sep-2026 2 分読 ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/containers-as-a-service)