mcpField
F
Firefox DevTools MCP

Firefox DevTools MCP

ローカル
github.comブラウザ自動化529今日更新

Firefox DevTools MCP について

Firefox DevTools MCPは、AIエージェントからFirefoxを操作するMCPサーバーです。WebDriver BiDiとSelenium WebDriverを介して、ブラウジングやウェブ開発のデバッグに使え、プリセットやモジュールでツールを選択できます。

主な機能

  1. 01ページ移動とフォーム入力
  2. 02ネットワークリクエストとダウンロードの確認
  3. 03コンソールメッセージの確認
  4. 04デバッグとプロファイリング
  5. 05プリセットまたはモジュールでツール選択

活用シーン

  1. 01ウェブサイトの複数段階の操作
  2. 02開発中ページのネットワークリクエスト確認
  3. 03コンソールエラーの調査と性能分析

MCP 対応

ページ移動、フォーム操作、ネットワークリクエスト、コンソール確認、プロファイリングなどのFirefox操作ツールをMCPクライアントに公開します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"mozilla-firefox-devtools": {
"command": "npx",
"args": [
"-y",
"@mozilla/firefox-devtools-mcp"
],
"env": {
"FIREFOX_HEADLESS": "<FIREFOX_HEADLESS>",
"START_URL": "<START_URL>"
}
}
}
}
起動コマンドnpx -y @mozilla/firefox-devtools-mcp
設定が必要な環境変数
FIREFOX_HEADLESSSet to true to run Firefox without a visible window.
START_URLURL to open when the server starts.

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@mozilla/firefox-devtools-mcp0.10.7

ツール

48

掲載時のツール一覧 · 今日に更新

このツールにパラメーターはありません。

詳細

Firefox DevTools MCP

npm version CI codecov License: MIT License: Apache 2.0

Glama

AI エージェントが Firefox を使用できるようにする Model Context Protocol サーバーです。主な用途は次の 2 つです。

  • エージェントによるブラウジング:エージェントがブラウザーを使って、ページの閲覧、フォームへの入力、ウェブサイト上の複数ステップの操作など、通常のタスクを実行します。
  • エージェント支援によるウェブ開発:エージェントが作業中のページを読み込み、コンソール、ネットワークリクエスト、デバッガー、プロファイラーなどの開発者ツールで調査します。

Selenium WebDriver 経由で WebDriver BiDi を通じて Firefox を操作し、Claude Code、Claude Desktop、Cursor、Cline、その他の MCP クライアントで動作します。

リポジトリ:https://github.com/mozilla/firefox-devtools-mcp

注記:この MCP サーバーにはローカルの Firefox ブラウザーのインストールが必要で、glama.ai などのクラウドホスティングサービスでは実行できません。npx @mozilla/firefox-devtools-mcp@latest を使ってローカルで実行するか、付属の Dockerfile を使って Docker で実行してください。

セキュリティ

ブラウザー MCP サーバーには固有のリスクがあります。主な対策をいくつか紹介します。

  • **専用の Firefox プロファイルを使用してください。**通常使用しているプロファイルに対してサーバーを実行しないでください。エージェントは、Cookie や保存済みセッションを含め、ブラウザーからアクセスできるものすべてにアクセスできます。
  • **アクセスするサイトに注意してください。**ページがエージェントを操作するためのコンテンツを返すことがあります(プロンプトインジェクション)。自分で管理しているサイト、または信頼できるサイトを利用してください。
  • **必要なツールモジュールのみを有効にしてください。**デフォルトの basic プリセットにはすでに evaluate_script が含まれていますが、--tool-preset slim を指定すると除外されます。--tool-preset developer(デバッグ、ネットワーク、コンソール、プロファイラー)や --tool-preset mozilla(特権コンテキスト)など、より上位のプリセットでは、エージェントが実行できる操作がさらに広がります。

リスクの詳細と脆弱性の報告方法については、SECURITY.md を参照してください。

要件

  • Node.js ≥ 20.19.0
  • Firefox 100 以降がインストール済みであること(自動検出、または --firefox-path を指定)

Claude Code または Codex でのインストールと使用(npx)

npm から公開されている最新バージョンを実行できるよう、npx の使用を推奨します。

オプション A — CLI
Claude Code
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest

# Headless + viewport via args
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720

# Or via environment variables
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest \
  --env START_URL=https://example.com \
  --env FIREFOX_HEADLESS=true
Codex
codex mcp add firefox-devtools -- npx @mozilla/firefox-devtools-mcp@latest

# Headless + viewport via args
codex mcp add firefox-devtools -- \
  npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720

# Or via environment variables
codex mcp add firefox-devtools \
  --env START_URL=https://example.com \
  --env FIREFOX_HEADLESS=true \
  -- npx @mozilla/firefox-devtools-mcp@latest
オプション B — 設定ファイルを編集
Claude Code

Claude Code の mcp_settings.json に追加します。

{
  "mcpServers": {
    "firefox-devtools": {
      "command": "npx",
      "args": ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"],
      "env": {
        "START_URL": "about:blank"
      }
    }
  }
}
Codex

~/.codex/config.toml に追加します。

[mcp_servers.firefox-devtools]
command = "npx"
args = ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"]

[mcp_servers.firefox-devtools.env]
START_URL = "about:blank"
オプション C — ヘルパースクリプト(ローカル開発ビルド)
npm run setup
# Choose Claude Code; the script saves JSON to the right path

MCP Inspector で試す

npx @modelcontextprotocol/inspector npx @mozilla/firefox-devtools-mcp@latest --start-url https://example.com --headless

次のようなツールを呼び出します。

  • list_pages、select_page、navigate_page
  • take_snapshot の後に click_by_uid/fill_by_uid
  • list_network_requests(常時キャプチャ)、get_network_request
  • list_downloads(常時キャプチャ)、set_download_behavior
  • screenshot_page、list_console_messages

CLI オプション

フラグまたは環境変数(右側に記載)を渡すことができます。

  • --firefox-path — Firefox バイナリの絶対パス
  • --headless — UI なしで実行します(FIREFOX_HEADLESS=true)
  • --viewport 1280x720 — 起動時のウィンドウサイズ
  • --profile-path — 特定の Firefox プロファイルを使用します。Firefox はそのパス内の firefox_devtools_mcp_profile サブフォルダーで実行され、.firefox-devtools-mcp ファイルで識別されます。--profile-path に識別済みのプロファイルを指定すると、そのプロファイルを直接再利用します
  • --firefox-arg — Firefox に追加で渡す引数(複数回指定可能)
  • --start-url — 起動時にこの URL を開きます(START_URL)
  • --accept-insecure-certs — TLS エラーを無視します(ACCEPT_INSECURE_CERTS=true)
  • --connect-existing — 新しい Firefox を起動せず、すでに実行中の Firefox に接続します(CONNECT_EXISTING=true)
  • --marionette-port — 既存の Firefox に接続するモードの Marionette ポートです。デフォルトは 2828 です(MARIONETTE_PORT)
  • --idle-timeout — 既存の Firefox に接続するセッションで、ツールの呼び出しがない状態が続いた後、Firefox との接続を解放するまでの秒数です。デフォルトは 1800 です。Firefox が同時に受け付けるクライアントは 1 つだけなので、接続が解放されるまで他のクライアントは接続できません。次にツールが呼び出されると再接続し、その時点で Firefox 上でアクティブなタブを選択します(IDLE_TIMEOUT)
  • --pref name=value — 起動時に moz:firefoxOptions を介して Firefox の設定を指定します(複数回指定可能)
  • --tool-preset — 有効にするツールモジュールを選択します:slim、basic(デフォルト)、developer、mozilla、all。ツールモジュールとプリセットを参照してください。(TOOL_PRESET)
  • --tools — 有効にするツールモジュールを明示的に指定し、--tool-preset の設定を完全に上書きします(例:--tools pages network script)。ツールモジュールとプリセットを参照してください。
  • --enable-script — 非推奨です。代わりに --tool-preset developer または --tools ... script debugging を使用してください。 developer ツールプリセットを選択します。(ENABLE_SCRIPT=true)
  • --enable-privileged-context — 非推奨です。代わりに --tool-preset mozilla または --tools ... privileged prefs を使用してください。 mozilla ツールプリセットを選択します。MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要です(ENABLE_PRIVILEGED_CONTEXT=true)
  • --android-device — Firefox for Android モードを有効にします。値には ADB デバイスのシリアル番号を指定します(例:emulator-5554)。接続済みデバイスの一覧を表示するには adb devices を実行してください。値を省略するか auto を指定すると、接続済みのデバイスが 1 台の場合に自動で選択します。
  • --android-wipe-app-data — Android モードで対象アプリのデータをすべて消去することを確認します。--android-device と併せて指定する必要があります。(ANDROID_WIPE_APP_DATA=true)
  • --android-package — Android アプリのパッケージ名です。デフォルトは org.mozilla.firefox です。その他のパッケージ:Firefox Beta は org.mozilla.firefox_beta、Firefox Nightly は org.mozilla.fenix、Firefox Nightly Debug は org.mozilla.fenix.debug、geckoview は org.mozilla.geckoview_example です(ANDROID_PACKAGE)
  • --unrestricted-save-paths — デフォルトのルートに限らず、ディスク上の任意の場所に saveTo パラメーターで書き込めるようにします。大きな出力をディスクに保存するおよび SECURITY.md のセキュリティに関する注意事項を参照してください。(UNRESTRICTED_SAVE_PATHS=true)
  • --log-file — MCP サーバーのログを stderr ではなくファイルに書き込みます。サーバーの出力を表示しない MCP クライアントでのデバッグセッションに便利です。詳細なデバッグログも含めるには DEBUG=* を設定します。例:--log-file /tmp/firefox-mcp.log
ツールモジュールとプリセット

ツールはモジュールごとにグループ化されています。名前付きプリセット (--tool-preset)または明示的なリスト(--tools)で、公開するモジュールを選択します。両方を指定した場合は、--tools が優先され、プリセットは無視されます。

プリセット(それぞれ、1つ前のプリセットの内容をすべて含みます):

  • slim — ページの閲覧と操作に必要な最小限のモジュール
  • basic(デフォルト)— 通常のブラウジング用ツールを追加
  • developer — Web 開発者向けツールを追加
  • mozilla — Firefox 開発者向けツールを追加
  • all — すべてのモジュール

モジュールの一覧と、各プリセットに含まれるモジュールについては、docs/tools.md をご覧ください。

デフォルトの basic には script が含まれているため、evaluate_script ツールも含まれます。 攻撃対象領域への影響については、SECURITY.md をご覧ください。--tool-preset slim または明示的な --tools リストを使用すると、このツールを除外できます。

# Use the developer preset (adds network, console, debugging and profiler tools)
npx @mozilla/firefox-devtools-mcp --tool-preset developer

# Enable only the modules you need
npx @mozilla/firefox-devtools-mcp --tools pages network console

prefs と privileged モジュールには MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要で、Mozilla 内部ビルドでのみ利用できます。launch モジュールも Mozilla 内部ビルドが必要です。このモジュールは、呼び出し元が指定したバイナリ、プロファイル、環境、設定を使って Firefox を再起動します。これはオペレーターが管理すべき構成変更です。代わりに --pref、--firefox-path やその他のコマンドラインオプションを使用してください。bidi モジュールも Mozilla 内部ビルドが必要です。このモジュールは任意の WebDriver BiDi コマンドを送信するため、他のモジュールが公開する機能にもアクセスできます。公開パッケージでは、これらのモジュールをリクエストしてもスキップされ、除外されたモジュール名を示す警告がログに記録されます。

便利な設定(--pref)
  • remote.prefs.recommended=false。Firefox を自動化で実行すると、ブラウザーの動作をテスト用に変更する RecommendedPreferences が適用されます。remote.prefs.recommended を false に設定すると、これらの設定を適用せず、通常の Firefox インスタンスに近い構成にできます。
  • remote.log.level=Trace。Firefox で詳細な WebDriver プロトコルログを有効にします。MCP サーバーは、一致するログレベルを geckodriver に自動的に渡し、両側で同じ詳細度のログを記録します。
  • app.update.disabledForTesting=false。Firefox が更新を自動的にダウンロードして適用できるようにします。更新によってセッションが中断される場合があります。remote.prefs.recommended=false も設定する必要があります。
Firefox for Android

--android-device を使用すると、Android デバイス上で実行されている Firefox を自動化できます。PATH 上に adb が必要です。geckodriver は自動的に管理されます。

警告: Android モードでは、セッションの開始前に対象アプリのデータがすべて消去されます。 タブ、履歴、ブックマーク、パスワード、Cookie、設定はすべて失われます。geckodriver はセッション作成時に adb shell pm clear <package> を実行します。これをスキップする方法はありません。 その後、独自の一時プロファイルでセッションを実行し、終了後にそのプロファイルを削除します。 このため、--android-device には --android-wipe-app-data が必要です。また、普段使用しているブラウザーではなく、 自動化専用のビルドをインストールすることをおすすめします。 Bug 2064088 では、既存のアプリデータを保持する geckodriver の オプション追加が検討されています。

# List connected devices
adb devices

# Launch Firefox for Android on the single connected device
npx @mozilla/firefox-devtools-mcp --android-device auto --android-wipe-app-data

# Target a specific device
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-wipe-app-data

# Use Firefox Nightly instead
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-package org.mozilla.fenix --android-wipe-app-data

ホストとデバイス間のポート転送は、geckodriver が自動的に処理します。

既存の Firefox に接続する

--connect-existing を使用すると、Cookie、ログイン状態、開いているタブをそのまま維持して、実際のブラウジングセッションを自動化できます。

# Start Firefox with Marionette and the Remote Agent (BiDi)
firefox --marionette --remote-debugging-port

# Run the MCP server
npx @mozilla/firefox-devtools-mcp --connect-existing --marionette-port 2828

MCP は WebDriver Classic(--marionette)と WebDriver BiDi(--remote-debugging-port)の両方を使用するため、両方のフラグが必要です。Firefox を --marionette のみで起動すると、MCP サーバーは接続に失敗し、両方のフラグを付けて Firefox を再起動するよう求めます。

Firefox が同じプロファイルですでに実行されている場合、上記のコマンドはそのインスタンスで新しいウィンドウを開くだけです。フラグは無視されるため、Marionette も Remote Agent も起動しません。

普段使いの Firefox を Marionette なしで実行し続けるには、MCP サーバー専用のプロファイルを用意してください。Firefox はプロファイルごとに 1 つのプロセスを実行するため、両方のインスタンスを同時に動かせます。エージェントがアクセスできるのは、そのプロファイルでサインインした内容だけです。

# Once: create a dedicated profile
firefox -CreateProfile firefox-mcp

# Start it with Marionette and the Remote Agent, next to your everyday Firefox
firefox -P firefox-mcp --marionette --remote-debugging-port

警告: 通常のブラウジング中は、Marionette を有効にしたままにしないでください。Marionette を有効にすると、 navigator.webdriver = true が設定され、ほかのブラウザーのフィンガープリント情報も変化するため、 Cloudflare、Akamai などで保護されたサイトでボット検出が作動することがあります。 MCP の自動化が必要なときだけ Marionette を有効にし、その後は Firefox を通常どおり再起動するか、 上記のように専用プロファイルで実行してください。

ツールの概要

モジュールごとのツール一覧と説明、パラメーターについては、docs/tools.md を参照してください(ソースから生成されています)。

大きな出力をディスクに保存する

ツールの出力が大きいと、Claude Code などの CLI クライアントでコンテキストを大量に消費することがあります。いくつかのツールでは、省略可能な saveTo パラメーターを指定して、結果をインラインで返す代わりにファイルへ書き込めます。一覧については、docs/tools.md を参照してください。 saveTo には次の 3 つの形式を指定できます。

  • ファイルパス(現在の作業ディレクトリからの相対パス、または ~/.firefox-devtools-mcp/output 内の絶対パス。親ディレクトリは作成されます)。Firefox プロファイルに到達するパスや、このサーバーが読み戻すファイルへのパスは拒否されます
  • 既存のディレクトリ(タイムスタンプ付きのファイルがその中に生成されます)
  • true(タイムスタンプ付きのファイルが ~/.firefox-devtools-mcp/output/ の下に生成されます)

レスポンスにはパスとバイト数が含まれます。保存されるファイルには常に、切り詰められていない完全なデータが含まれます。インライン出力のサイズ制限(コンソールメッセージの上限、ネットワークヘッダーの切り詰め、スナップショットの行数上限)は適用されません。

テキストを生成するツールでは、保存した出力のうちインラインで短い抜粋として返す文字数を指定する preview も使用できます。対応するツールは docs/tools.md の一覧で確認できます。

screenshot_page({ saveTo: "page.png" })
take_snapshot({ saveTo: true })
list_network_requests({ urlContains: "api", saveTo: "network.json" })
evaluate_script({ function: "() => performance.getEntries()", saveTo: true, preview: 2000 })

デフォルトでは、保存先パスに制限があります。相対パスは現在の作業ディレクトリを基準に解決され、絶対パスは ~/.firefox-devtools-mcp 内でのみ許可されます。これらの場所の外に出るパスは拒否されます。--unrestricted-save-paths を指定してサーバーを起動すると、そのディレクトリの外にある絶対パスを含め、任意の場所に書き込めます。

保存したファイルは、コンテキストサイズに影響を与えずに、たとえば Claude Code の Read ツールで確認できます。

ローカル開発

npm install
npm run build

# Run with Inspector against local build
npx @modelcontextprotocol/inspector node dist/index.js --headless --viewport 1280x720

# Or run in dev with hot reload
npm run inspector:dev

ローカル開発、テスト、CI の詳細については、CONTRIBUTING.md を参照してください。

トラブルシューティング

  • Firefox が見つからない場合:--firefox-path "/Applications/Firefox.app/Contents/MacOS/firefox"(macOS)またはお使いの OS の正しいパスを指定してください。
  • 初回の実行が遅い場合:Selenium が BiDi セッションをセットアップするためです。2 回目以降の実行は速くなります。
  • UID が古くなった場合:UID は要素が削除されるか、ページが移動するまで有効です。UID ツールで要素が存在しないと報告された場合は、新しいスナップショット(take_snapshot)を取得してください。
  • Windows 10:「firefox-devtools」MCP サーバーの検出中にエラーが発生する場合:MCP error -32000: Connection closed
    • 解決策 1 cmd /c でラップしてください(詳細)。

      "mcpServers": {
        "firefox-devtools": {
          "command": "cmd",
          "args": ["/c", "npx", "-y", "@mozilla/firefox-devtools-mcp@latest"]
        }
      }
      
    • 解決策 2 npx の絶対パスを使用してください(お使いの環境に合わせて、拡張子を .cmd、.bat、.exe、または .ps1 に変更してください)。

      "mcpServers": {
        "firefox-devtools": {
          "command": "C:\\nvm4w\\nodejs\\npx.ps1",
          "args": ["-y", "@mozilla/firefox-devtools-mcp@latest"]
        }
      }
      

バージョン管理

  • 1.0 未満の API:バージョンは 0.x で始まります。最新リリースには npx で @latest を使用してください。

コントリビューション

課題の報告、テストの実行、プロジェクトをローカルで作業する方法については、CONTRIBUTING.md をご覧ください。

作者

Mozilla がメンテナンスしています。

ライセンス

ライセンスは、MIT または Apache 2.0 のいずれかを選択して適用できます。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。