Chrome DevTools MCP

Chrome公式DevTools MCPサーバー。AIエージェントが実際のブラウザを操作・検査・デバッグできます。

MCPサーバー
MCPChrome DevToolsDebuggingBrowser Automation
認証済み

インストール

トランスポート: stdio

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

ツール一覧 (61)

  • click

    Clicks on an element from the page snapshot.

  • drag

    Drags an element onto another element.

  • fill

    Types text into an input, text area, or selects an option.

  • fill_form

    Fills out multiple form elements at once.

  • handle_dialog

    Accepts or dismisses a browser dialog.

  • hover

    Hovers over an element.

  • press_key

    Presses a key or key combination.

  • type_text

    Types text using the keyboard into a focused input.

  • upload_file

    Uploads a file through a file input element.

  • click_at

    Clicks at given coordinates (requires --experimentalVision).

  • close_page

    Closes a page by its index.

  • list_pages

    Lists all open pages including extension service workers.

  • navigate_page

    Goes to a URL, or navigates back, forward, or reloads.

  • new_page

    Opens a new tab and loads a URL.

  • select_page

    Selects a page as context for future tool calls.

  • wait_for

    Waits for specified text to appear on the selected page.

  • emulate

    Emulates viewport, geolocation, color scheme, network conditions, and more.

  • resize_page

    Resizes the page window to specified dimensions.

  • performance_analyze_insight

    Gives detail on a specific performance insight from a trace.

  • performance_start_trace

    Starts recording a performance trace.

  • performance_stop_trace

    Stops the trace and returns performance insights.

  • get_network_request

    Gets details of a single network request.

  • list_network_requests

    Lists network requests made by the page.

  • evaluate_script

    Evaluates JavaScript in the page and returns the result.

  • get_console_message

    Gets a single console message by index.

  • get_css_styles

    Gets the computed CSS styles of an element.

  • lighthouse_audit

    Runs a Lighthouse audit on the page.

  • list_console_messages

    Lists console messages (errors, warnings, logs).

  • screencast_start

    Starts a screencast recording of the page.

  • screencast_stop

    Stops the screencast recording.

  • set_logpoints

    Sets logpoints (conditional console logging) in page scripts.

  • take_screenshot

    Captures a screenshot of the page or a specific element.

  • take_snapshot

    Gets the page accessibility tree with element UIDs.

  • take_heapsnapshot

    Takes a JS heap snapshot for memory analysis.

  • analyze_heapsnapshot_contexts

    Analyzes heap snapshot contexts.

  • close_heapsnapshot

    Closes a heap snapshot session.

  • compare_heapsnapshots

    Compares two heap snapshots to find growth.

  • get_heapsnapshot_class_nodes

    Gets class nodes from a heap snapshot.

  • get_heapsnapshot_details

    Gets details of a heap snapshot.

  • get_heapsnapshot_dominators

    Gets dominator nodes from a heap snapshot.

  • get_heapsnapshot_duplicate_strings

    Finds duplicate strings in a heap snapshot.

  • get_heapsnapshot_edges

    Gets edges of a heap snapshot node.

  • get_heapsnapshot_object_details

    Gets details of a heap object.

  • get_heapsnapshot_retainers

    Gets retainers of a heap object.

  • get_heapsnapshot_retaining_paths

    Gets retaining paths of a heap object.

  • get_heapsnapshot_summary

    Gets a summary of a heap snapshot.

  • query_heapsnapshot_objects

    Queries objects in a heap snapshot.

  • install_extension

    Installs a Chrome extension.

  • list_extensions

    Lists installed Chrome extensions.

  • reload_extension

    Reloads a Chrome extension.

  • trigger_extension_action

    Triggers an extension action (e.g. toolbar click).

  • uninstall_extension

    Uninstalls a Chrome extension.

  • execute_3p_developer_tool

    Executes a third-party developer tool.

  • list_3p_developer_tools

    Lists available third-party developer tools.

  • execute_webmcp_tool

    Executes a WebMCP tool exposed by the page.

  • list_webmcp_tools

    Lists WebMCP tools exposed by the page.

  • get_os_app_state

    Gets the install state of a PWA on the OS.

  • install_pwa

    Installs a Progressive Web App.

  • launch_pwa

    Launches an installed PWA.

  • uninstall_pwa

    Uninstalls a PWA.

  • configure_webauthn

    Configures a virtual WebAuthn authenticator.

品質とセキュリティ

ライセンス100
メンテナンス95
セキュリティ75
ドキュメント95
ライセンス: Apache-2.0
バージョン: 1.12.0
最終更新: 2026-11-09

料金

Free and open source (Apache 2.0). No account or API key needed.

Chrome DevTools MCP
Chrome DevTools MCP
Chrome DevTools MCP
Chrome DevTools MCP

Chrome DevTools MCPレビュー:AIエージェントに実際のブラウザを動かさせる

ウェブのデバッグはこれまでずっと、人がブラウザを見つめる作業でした。エージェントがコードを書き、あなたがDevToolsを開き、コンソールを読み、ネットワークタブを確認し、見たことを報告します。エージェントは、ウェブページの真実が存在する場所を見ることができません。

Chrome DevTools MCPはChrome DevToolsチームの公式サーバーで、エージェントに実際のChromeブラウザの鍵を渡します。バージョン1.12.0はコンソール、ネットワーク、パフォーマンス、要素、ナビゲーションをカバーする61のツールを持ち、エージェントはページを開き、クリックし、コンソールエラーを読み、ネットワークリクエストを追跡し、パフォーマンスを自分で測定できます。エージェントがライブのウェブページを検査する標準的な方法です。

Chrome DevTools MCPとは?

Chrome DevTools MCPはChrome DevToolsチームが保守するModel Context Protocolサーバーです。ローカルで動作しChromeに接続して、開発者がDevToolsパネルで使うのと同じ機能をエージェントが呼び出せるツールとして公開します。サーバーは1つのコマンドで実行できるパッケージとして配布され、Claude Code、Cursor、VS Code、Claude Desktopの標準設定で動作します。

ツールは明確に分かれています。ナビゲーションツールはページを開き履歴を移動します。コンソールツールはログメッセージとエラーを読みます。ネットワークツールはリクエスト、レスポンス、ヘッダー、タイミングを調べます。パフォーマンスツールはトレースを記録し読み込みを測定します。要素ツールはDOMを検査して操作します。エージェントはスクリーンショットを撮り、デバイスをエミュレートし、ブラウザが実際に描画する通りにページを読むこともできます。

主な機能

1. 開発者のようにコンソールを読む

エージェントはブラウザから直接コンソールメッセージ、警告、エラーを読みます。ページが壊れたとき、正確なエラー、スタック、行番号を見ることができ、DevToolsからコピーしてもらう必要はありません。

2. 完全なネットワーク検査

すべてのリクエストが見えます。URL、メソッド、ヘッダー、ステータス、タイミング、ボディです。エージェントは失敗したAPI呼び出し、遅いアセット、欠けたヘッダーを、あなたがネットワークタブを開くことなく見つけられます。

3. エージェント自身が測定できるパフォーマンストレース

パフォーマンスツールはトレースを記録し、読み込み時間、長いタスク、レイアウトシフトを報告します。エージェントはページが速くなったかを推測するのではなく、修正を測定できます。

4. 読むだけでなくページを操作する

クリック、入力、スクロール、ナビゲーションです。エージェントは手順を自分で実行してバグを再現し、修正後に同じフローをもう一度実行して確認できます。

5. スクリーンショットと実際の描画DOM

スクリーンショットとDOMスナップショットは、レイアウトとスタイルを含め、ブラウザが描画する通りのページを示します。エージェントはコードが正しいと決めつけるのではなく、自分のフロントエンド作業を目で確認できます。

仕組み

1つのコマンドでサーバーをクライアントに追加し、リモートデバッグを有効にしてChromeを起動するか、サーバーに起動させます。エージェントが接続すると61のツールが現れます。ページを開かせ、壊れているフローをたどらせ、見つけたことを報告させます。修正を提案したら、ページを再読み込みさせてエラーが消えたか確認できます。

サーバーはローカルで動作し自分のChromeに接続するため、アカウントもキーもホスト型サービスも関与しません。閲覧は自分のマシンに留まります。

誰に向いているか

AIアシスタントと一緒にフロントエンドをデバッグする開発者、エージェントに自分のウェブ作業を検証させたいチーム、今日もウェブページを手動でテストしている人です。コンソールエラーをチャットに貼ったことがあるなら、それを不要にするツールがこれです。

料金

無料でオープンソース(Apache 2.0)です。アカウントやAPIキーは不要です。

長所と短所

長所

  • 公式サーバー:ブラウザ全体をカバーする61のツール
  • エージェントは要約ではなく実際のコンソール、ネットワーク、パフォーマンスデータを見る
  • 無料、オープンソース、ローカル:アカウントもキーもホスト型サービスも不要
  • ページを操作でき、フローを再実行して修正を検証できる

短所

  • ローカルのみ:自分のマシン上のブラウザを動かし、リモートやホスト型ブラウザではない
  • エージェントはクリックや入力ができるため、訪れたページの状態を変える可能性がある。信頼できるページで使うこと
  • 61のツールは多く、正しいものを選ぶには良いプロンプトが必要

最終評価

AIエージェントがフロントエンドを書くなら、開発者と同じようにそのフロントエンドを見られるべきです。これが公式で、無料で、ローカルな方法です。インストールして、作業中のページを示し、コンソールエラーをチャットにコピーする人をやめましょう。

GitHubでChrome DevTools MCPを試す