Opera DevTools MCP

これは chrome-devtools-mcp（Copyright 2025 Google LLC）のフォークであり、Opera Neon AI 機能を拡張したものです。

opera-devtools-mcp を使用すると、コーディングエージェント（Claude、Cursor、Copilot など）が実行中のブラウザを制御・検査できるようになります。これは Model-Context-Protocol（MCP）サーバーとして機能し、AI コーディングアシスタントに DevTools の全機能へのアクセスを提供して、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析を実現します。Opera Neon に接続すると、Opera の組み込み AI 機能も利用できるようになります。

ツールリファレンス | 変更ログ | コントリビューション | トラブルシューティング | 設計原則

Related MCP server: Chrome DevTools MCP

主な機能

• Opera Neon AI ツール：コーディングエージェントから Opera の組み込み AI と直接やり取りできます。チャット、ページ操作、コンテンツ生成、リサーチの実行が可能です。

• パフォーマンス分析情報の取得：Chrome DevTools を使用してトレースを記録し、実用的なパフォーマンス分析情報を抽出します。

• 高度なブラウザデバッグ：ネットワークリクエストの分析、スクリーンショットの撮影、ブラウザコンソールメッセージ（ソースマップ対応のスタックトレース付き）の確認ができます。

• 信頼性の高い自動化：puppeteer を使用してブラウザ内の操作を自動化し、操作結果を自動的に待機します。

Opera Neon AI ツール

これらのツールは、--browser-url 経由で Opera Neon に接続している場合にのみ利用できます。

免責事項

opera-devtools-mcp は、ブラウザインスタンスのコンテンツを MCP クライアントに公開し、ブラウザまたは DevTools 内のあらゆるデータを検査、デバッグ、変更できるようにします。MCP クライアントと共有したくない機密情報や個人情報は共有しないでください。

パフォーマンスツールは、実際のユーザーエクスペリエンスデータを取得するために、トレース URL を Google CrUX API に送信する場合があります。これを無効にするには、--no-performance-crux フラグを指定して実行してください。

要件

• Node.js v20.19 以降の 最新メンテナンス LTS バージョン。

• Chromium ベースのブラウザ（Chrome または Opera Neon）。

• npm

はじめに

MCP クライアントに以下の設定を追加します：

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": ["-y", "opera-devtools-mcp@latest"]
    }
  }
}

[!NOTE] opera-devtools-mcp@latest を使用すると、MCP クライアントは常に最新バージョンの Opera DevTools MCP サーバーを使用するようになります。

Opera Neon への接続

Opera Neon AI ツールを使用するには、リモートデバッグを有効にして Opera Neon を起動し、--browser-url 経由で接続します：

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

リモートデバッグポートを指定して Opera Neon を起動します：

# macOS
/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

MCP クライアント設定

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

Cursor Settings -> MCP -> New MCP Server に移動します。上記の設定を使用します。

上記の標準設定を使用して、VS Code の MCP 設定ガイド に従うか、CLI を使用します：

code --add-mcp '{"name":"opera-devtools","command":"npx","args":["-y","opera-devtools-mcp"],"env":{}}'

最初のプロンプト

すべてが正しく機能しているか確認するには、MCP クライアントに次のプロンプトを入力します：

Check the performance of https://opera.com

MCP クライアントはブラウザを開き、パフォーマンストレースを記録するはずです。

[!NOTE] MCP サーバーは、MCP クライアントが実行中のブラウザインスタンスを必要とするツールを使用すると、ブラウザを自動的に起動します。Opera DevTools MCP サーバーに接続するだけでは、ブラウザは自動的に起動しません。

ツール

問題が発生した場合は、トラブルシューティングガイド を参照してください。

• 入力自動化 (10 ツール)

  • click

  • drag

  • fill

  • fill_form

  • handle_dialog

  • hover

  • press_key

  • type_text

  • upload_file

  • click_at

• ナビゲーション自動化 (6 ツール)

  • close_page

  • list_pages

  • navigate_page

  • new_page

  • select_page

  • wait_for

• エミュレーション (2 ツール)

  • emulate

  • resize_page

• パフォーマンス (3 ツール)

  • performance_analyze_insight

  • performance_start_trace

  • performance_stop_trace

• ネットワーク (2 ツール)

  • get_network_request

  • list_network_requests

• デバッグ (8 ツール)

  • evaluate_script

  • get_console_message

  • lighthouse_audit

  • list_console_messages

  • take_screenshot

  • take_snapshot

  • screencast_start

  • screencast_stop

• メモリ (12 ツール)

  • take_heapsnapshot

  • close_heapsnapshot

  • compare_heapsnapshots

  • get_heapsnapshot_class_nodes

  • get_heapsnapshot_details

  • get_heapsnapshot_dominators

  • get_heapsnapshot_duplicate_strings

  • get_heapsnapshot_edges

  • get_heapsnapshot_object_details

  • get_heapsnapshot_retainers

  • get_heapsnapshot_retaining_paths

  • get_heapsnapshot_summary

• Opera (8 ツール)

  • opera_call_mcp_tool

  • opera_chat

  • opera_do

  • opera_list_mcp_servers

  • opera_list_mcp_tools

  • opera_list_models

  • opera_make

  • opera_research

• 拡張機能 (5 ツール)

  • install_extension

  • list_extensions

  • reload_extension

  • trigger_extension_action

  • uninstall_extension

• サードパーティ (2 ツール)

  • execute_3p_developer_tool

  • list_3p_developer_tools

• WebMCP (2 ツール)

  • execute_webmcp_tool

  • list_webmcp_tools

• プログレッシブ Web アプリ (4 ツール)

  • get_os_app_state

  • install_pwa

  • launch_pwa

  • uninstall_pwa

設定

Opera DevTools MCP サーバーは、以下の設定オプ

• --autoConnect/ --auto-connect 指定すると、channel パラメータで識別されるユーザーデータディレクトリからローカルで実行中のブラウザ (Chrome 144+) に自動接続します (デフォルトのチャネルは stable)。Chrome インスタンスで chrome://inspect/#remote-debugging を介してリモートデバッグサーバーを起動しておく必要があります。

  • 型: boolean

  • デフォルト: false

• --browserUrl/ --browser-url, -u 実行中のデバッグ可能な Chrome インスタンスに接続します (例: http://127.0.0.1:9222)。詳細は https://github.com/operasoftware/opera-devtools-mcp#connecting-to-a-running-chrome-instance を参照してください。

  • 型: string

  • デフォルト: false

• --wsEndpoint/ --ws-endpoint, -w 実行中の Chrome インスタンスに接続するための WebSocket エンドポイント (例: ws://127.0.0.1:9222/devtools/browser/)。--browserUrl の代替です。

  • 型: string

  • デフォルト: false

• --wsHeaders/ --ws-headers WebSocket 接続用のカスタムヘッダーを JSON 形式で指定します (例: '{"Authorization":"Bearer token"}')。--wsEndpoint との組み合わせでのみ機能します。

  • 型: string

  • デフォルト: false

• --headless ヘッドレス (UI なし) モードで実行するかどうか。

  • 型: boolean

  • デフォルト: false

• --executablePath/ --executable-path, -e カスタム Chrome 実行ファイルへのパス。

  • 型: string

  • デフォルト: false

• --isolated 指定すると、ブラウザが閉じられた後に自動的にクリーンアップされる一時的な user-data-dir を作成します。デフォルトは false です。

  • 型: boolean

  • デフォルト: false

• --userDataDir/ --user-data-dir Chrome のユーザーデータディレクトリへのパス。デフォルトは $HOME/.cache/opera-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE です。

  • 型: string

  • デフォルト: false

• --channel 使用する別の Chrome チャネルを指定します。デフォルトは stable チャネルバージョンです。

  • 型: string

  • 選択肢: canary, dev, beta, stable

  • デフォルト: false

• --logFile/ --log-file デバッグログを書き込むファイルへのパス。詳細なログを有効にするには、環境変数 DEBUG を * に設定します。バグレポートの提出に役立ちます。

  • 型: string

  • デフォルト: false

• --viewport サーバーが起動する Chrome インスタンスの初期ビューポートサイズ。例: 1280x720。ヘッドレスモードでは、最大サイズは 3840x2160px です。

  • 型: string

  • デフォルト: false

• --proxyServer/ --proxy-server ブラウザ起動時に --proxy-server として渡される Chrome のプロキシサーバー設定。詳細は https://www.chromium.org/developers/design-documents/network-settings/ を参照してください。

  • 型: string

  • デフォルト: false

• --acceptInsecureCerts/ --accept-insecure-certs 有効にすると、自己署名証明書と期限切れ証明書に関するエラーを無視します。注意して使用してください。

  • 型: boolean

  • デフォルト: false

• --experimentalPageIdRouting/ --experimental-page-id-routing ページスコープのツールで pageId を公開し、ページ ID でリクエストをルーティングするかどうか (同時実行されるエージェントセッションに役立ちます)。

  • 型: boolean

  • デフォルト: false

• --experimentalDevtools/ --experimental-devtools DevTools ターゲットを介した自動化を有効にするかどうか。

  • 型: boolean

  • デフォルト: false

• --experimentalVision/ --experimental-vision click_at(x,y) などの座標ベースのツールを有効にするかどうか。通常、スクリーンショットを見て正確な座標を生成できる computer-use モデルが必要です。

  • 型: boolean

  • デフォルト: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory メモリデバッグツールを有効にするかどうか。

  • 型: boolean

  • デフォルト: false

• --experimentalStructuredContent/ --experimental-structured-content 構造化されたフォーマット済みコンテンツを出力するかどうか。

  • 型: boolean

  • デフォルト: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages webview やバックグラウンドページなど、あらゆる種類のページをページとして含めるかどうか。

  • 型: boolean

  • デフォルト: false

• --experimentalScreencast/ --experimental-screencast 実験的なスクリーンキャストツールを公開します (ffmpeg が必要)。ffmpeg をインストールし (https://www.ffmpeg.org/download.html)、MCP サーバーの PATH で利用可能であることを確認してください。

  • 型: boolean

  • デフォルト: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path スクリーンキャスト録画用の ffmpeg 実行ファイルへのパス。

  • 型: string

  • デフォルト: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp true に設定すると、WebMCP デバッグツールを有効にします。次のフラグを指定した Chrome 150+ が必要です: --enable-features=WebMCP

  • 型: boolean

  • デフォルト: false

• --chromeArg/ --chrome-arg Chrome の追加引数。opera-devtools-mcp によって Chrome が起動される場合にのみ適用されます。

  • 型: array

  • デフォルト: false

• --blockedUrlPattern/ --blocked-url-pattern 指定された URL パターンをブロックすることで、ブラウザのネットワークアクセスを制限します (https://urlpattern.spec.whatwg.org/ を使用)。接続時に、ブロックされた URL を持つターゲットからサイレントに切り離し、ランタイムリクエスト (ナビゲーションとサブリソースを含む) をブロックします。パターンの配列を受け入れます。

  • 型: array

  • デフォルト: false

• --allowedUrlPattern/ --allowed-url-pattern 指定された URL パターンのみを許可することで、ブラウザのネットワークアクセスを制限します (https://urlpattern.spec.whatwg.org/ を使用)。Chrome 149+ が必要です。接続時に、許可されていない URL を持つターゲットからサイレントに切り離し、ランタイムリクエスト (ナビゲーションとサブリソースを含む) をブロックします。パターンの配列を受け入れます。

  • 型: array

  • デフォルト: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Chrome のデフォルト引数を明示的に無効にします。opera-devtools-mcp によって Chrome が起動される場合にのみ適用されます。

  • 型: array

  • デフォルト: false

• --categoryEmulation/ --category-emulation false に設定すると、エミュレーション関連のツールを除外します。

  • 型: boolean

  • デフォルト: true

• --categoryPerformance/ --category-performance false に設定すると、パフォーマンス関連のツールを除外します。

  • 型: boolean

  • デフォルト: true

• --categoryNetwork/ --category-network false に設定すると、ネットワーク関連のツールを除外します。

  • 型: boolean

  • デフォルト: true

• --categoryExtensions/ --category-extensions true に設定すると、拡張機能関連のツールを含めます。注: この機能は現在、パイプ接続でのみサポートされています。この機能では、149 がリリースされるまで autoConnect、browserUrl、wsEndpoint はサポートされません。

  • 型: boolean

  • デフォルト: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party true に設定すると、検査対象ページ自体によって公開されるサードパーティ開発者ツールを有効にします。

  • 型: boolean

  • デフォルト: false

• --categoryPwa/ --category-pwa true に設定すると、プログレッシブ Web アプリを自動化するためのツール (インストール、起動、アンインストール、OS 状態) を含めます。この機能はパイプ接続でのみサポートされています。autoConnect、browserUrl、wsEndpoint はサポートされていません。

  • 型: boolean

  • デフォルト: false

• --performanceCrux/ --performance-crux true に設定すると、パフォーマンストレースの URL を CrUX API に送信して、フィールドパフォーマンスデータを取得できるようにします。

  • 型: boolean

  • デフォルト: false

• --usageStatistics/ --usage-statistics true に設定すると、使用統計情報の収集にオプトインします。Google はツールを改善するために使用データを収集します。これは Google プライバシーポリシー (https://policies.google.com/privacy) に基づいて処理されます。これは Chrome ブラウザのメトリクスとは無関係です。OPERA_DEVTOOLS_NO_USAGE_STATISTICS または CI 環境変数が設定されている場合は無効になります。

  • 型: boolean

  • デフォルト: false

• --screenshotFormat/ --screenshot-format 呼び出し側が指定しない場合に take_screenshot で使用されるデフォルトの出力形式を上書きします。JPEG と WebP は PNG より約 3〜5 倍小さく、AI 会話でのコンテキストサイズの削減に役立ちます。未設定の場合は、既存のデフォルト ("png") が維持されます。

  • 型: string

  • 選択肢: jpeg, png, webp

  • デフォルト: false

• --screenshotQuality/ --screenshot-quality 呼び出し側が指定しない場合に、take_screenshot が JPEG と WebP で使用するデフォルトの圧縮品質 (0〜100) を上書きします。値が小さいほどファイルサイズが小さくなります。PNG では無視されます。未設定の場合は Puppeteer のデフォルトが維持されます。

  • 型: number

  • デフォルト: false

• --screenshotMaxWidth/ --screenshot-max-width スクリーンショットの最大幅 (ピクセル)。キャプチャした画像がこれより広い場合、返される前に (アスペクト比を維持して) 縮小されます。AI 会話でのコンテキストサイズを削減します。未設定の場合はリサイズされません。

  • 型: number

  • デフォルト: false

• --screenshotMaxHeight/ --screenshot-max-height スクリーンショットの最大高さ (ピクセル)。キャプチャした画像がこれより高い場合、返される前に (アスペクト比を維持して) 縮小されます。--screenshot-max-width と組み合わせることができます。より小さい方のスケール係数が適用されます。未設定の場合はリサイズされません。

  • 型: number

  • デフォルト: false

• --slim ナビゲーション、スクリプト実行、スクリーンショットのみをカバーする「スリム」な 3 つのツールセットを公開します。基本的なブラウザタスクに役立ちます。

  • 型: boolean

  • デフォルト: false

• --redactNetworkHeaders/ --redact-network-headers true の場合、クライアントに返す前に、機密と見なされる一部のネットワークヘッダーを秘匿化します。

  • 型: boolean

  • デフォルト: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths 設定すると、MCP クライアントが roots 機能をネゴシエートしない場合に適用されるデフォルトのパス制限を無効にします。デフォルトでは、roots が設定されていない場合、ファイル書き込みツールは OS の一時ディレクトリに制限されます。これは、MCP roots を実装しておらず、一時ディレクトリ外のパスへのアクセスを必要とする信頼できるローカルクライアントに接続する場合にのみ使用してください。

  • 型: boolean

  • デフォルト: false

これらは JSON 設定の args プロパティで渡します。例:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

カスタムヘッダーを使用した WebSocket 接続

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

概念

ユーザーデータディレクトリ

opera-devtools-mcp は、以下のユーザーデータディレクトリを使用してブラウザインスタンスを起動します:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

ユーザーデータディレクトリは実行間でクリアされません。isolated オプションを true に設定すると、代わりに一時的なユーザーデータディレクトリが使用され、ブラウザを閉じた後に自動的にクリアされます。

実行中のブラウザインスタンスへの接続

デフォルトでは、サーバーは専用プロファイルで新しい Chrome インスタンスを起動します。代わりに、--browser-url を使用して実行中のインスタンスに接続することもできます:

{
  "mcpServers": {
    "opera-devtools": {
      "command": "npx",
      "args": [
        "opera-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

リモートデバッグポートを有効にしてブラウザを起動します:

macOS (Chrome)

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

macOS (Opera Neon)

/Applications/Opera\ Neon.app/Contents/MacOS/Opera\ Neon --remote-debugging-port=9222 --user-data-dir=/tmp/opera-profile

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

[!WARNING] リモートデバッグポートを有効にすると、実行中のブラウザインスタンスにデバッグポートが開かれます。マシン上の任意のアプリケーションがこのポートに接続してブラウザを制御できます。デバッグポートが開いている間は、機密性の高い Web サイトを閲覧しないようにしてください。

Android での Chrome のデバッグ

こちらの手順 を参照してください。

既知の制限事項

トラブルシューティング を参照してください。

ライセンス

Apache 2.0。LICENSE と NOTICE を参照してください。