
firefox-devtools-mcp v0.10.2
Firefox DevTools 用 Model Context Protocol サーバー - Remote Debugging Protocol を介して AI アシスタントが Firefox ブラウザを検査・制御できるようにします
Firefox DevTools MCP
WebDriver BiDi(Selenium WebDriver 経由)で Firefox を自動化するための Model Context Protocol サーバー。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)
推奨: npx を使用して、npm から公開されている最新バージョンを実行してください。
オプション A — CLI
Claude Code
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest
# 引数によるヘッドレス + ビューポート
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720
# または環境変数による指定
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
# 引数によるヘッドレス + ビューポート
codex mcp add firefox-devtools -- \
npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720
# または環境変数による指定
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
# Claude Code を選択。スクリプトが JSON を適切なパスに保存します
MCP Inspector で試す
npx @modelcontextprotocol/inspector npx @mozilla/firefox-devtools-mcp@latest --start-url https://example.com --headless
その後、以下のようなツールを呼び出せます:
list_pages、select_page、navigate_pagetake_snapshotの後にclick_by_uid/fill_by_uidlist_network_requests(常時キャプチャ)、get_network_requestlist_downloads(常時キャプチャ)、set_download_behaviorscreenshot_page、list_console_messages
CLI オプション
フラグまたは環境変数(右側の名前)を渡せます:
--firefox-path— Firefox バイナリへの絶対パス--headless— UI なしで実行(FIREFOX_HEADLESS=true)--viewport 1280x720— 初期ウィンドウサイズ--profile-path— 特定の Firefox プロファイルを使用--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— connect-existing モード用の Marionette ポート、デフォルトは 2828(MARIONETTE_PORT)--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を使用すると、接続されている単一のデバイスが自動的に選択されます。--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 が優先され、プリセットは無視されます。
モジュール: pages、snapshot、input、network、console、screenshot、downloads、
utilities、management、webextension、profiler、screencast、script、debugging、
prefs、privileged。
プリセット(それぞれが前のプリセットのスーパーセット):
slim—pages、snapshot、input、screenshotbasic(デフォルト) —slimに加えてdownloads、script、utilities、management、webextension、screencastdeveloper—basicに加えてdebugging、network、console、profilermozilla—developerに加えてprefs、privilegedall— すべてのモジュール
デフォルトの basic には script が含まれ、したがって evaluate_script ツールが含まれることに注意してください。攻撃対象領域への影響については SECURITY.md を参照し、それを除外するには --tool-preset slim または明示的な --tools リストを使用してください。
# developer プリセットを使用(network、console、debugging、profiler ツールを追加)
npx @mozilla/firefox-devtools-mcp --tool-preset developer
# 必要なモジュールのみを有効化
npx @mozilla/firefox-devtools-mcp --tools pages network console
prefs および privileged モジュールには MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要で、Mozilla 内部ビルドでのみ利用可能です。公開パッケージは要求された場合でもこれらをスキップし、除外したモジュール名を記載した警告をログに記録します。
便利な設定(--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が必要であり、使用している ブラウザーを自動化するのではなく、自動化専用のビルドをインストールする必要があります。 既存のアプリデータを保持するオプションを geckodriver に追加する作業は Bug 2064088 で追跡されています。
# 接続されているデバイスを一覧表示
adb devices
# 接続されている単一のデバイスで Firefox for Android を起動
npx @mozilla/firefox-devtools-mcp --android-device auto --android-wipe-app-data
# 特定のデバイスをターゲットにする
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-wipe-app-data
# 代わりに Firefox Nightly を使用
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-package org.mozilla.fenix --android-wipe-app-data
ホストとデバイス間のポート転送は geckodriver によって自動的に処理されます。
既存の Firefox に接続
--connect-existing を使用して、Cookie、ログイン、開いているタブを保持したまま実際のブラウジングセッションを自動化します:
# Marionette と Remote Agent(BiDi)で Firefox を起動
firefox --marionette --remote-debugging-port
# MCP サーバーを実行
npx @mozilla/firefox-devtools-mcp --connect-existing --marionette-port 2828
MCP は WebDriver Classic(--marionette)と WebDriver BiDi(--remote-debugging-port)の両方を使用するため、両方のフラグが必要です。Firefox が --marionette のみで起動された場合、MCP サーバーは接続に失敗し、両方のフラグで Firefox を再起動するよう求めます。
警告: 通常のブラウジング中に Marionette を有効にしたままにしないでください。
navigator.webdriver = trueが設定され、他のブラウザーフィンガープリントシグナルが 変更されるため、Cloudflare、Akamai などで保護されたサイトでボット検出が トリガーされる可能性があります。MCP 自動化が必要な場合にのみ Marionette を有効にし、 その後は Firefox を通常どおり再起動してください。
ツール概要
モジュール別の全ツールリスト(説明とパラメータ付き、ソースから生成)については docs/tools.md を参照してください。
- Pages: list/new/navigate/select/close/get_page_text(get_page_text はオプションの
saveToをサポート) - Snapshot/UID: take/resolve/clear(take はオプションの
saveToをサポート) - Input: click/hover/fill/drag/upload/form fill/press_key/type_text
- Network: list/get(ID 優先、フィルター、常時キャプチャ。両方ともオプションの
saveToをサポート) - Downloads: list_downloads/clear_downloads(常時キャプチャ)、set_download_behavior(allow/deny/default)
- Console: list/clear(list はオプションの
saveToをサポート) - Screenshot: page/by uid(CLI 環境用のオプションの
saveTo付き) - Script: evaluate_script(分離レルム用のオプションの
sandbox。大きな結果用のオプションのsaveTo) - Privileged Context: 特権("chrome")コンテキストの list/select、evaluate_privileged_script(
MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1が必要) - WebExtension: install_extension、uninstall_extension、list_extensions(list には
MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1が必要) - Firefox Management: get_firefox_info、get_firefox_output、restart_firefox
- Firefox Preferences: get_firefox_prefs、set_firefox_prefs(
MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1が必要) - Profiler: profiler_is_active、profiler_start(プリセットまたは明示的な設定)、profiler_stop(プロファイルをダウンロードディレクトリに保存)
- Screencast: screencast_start(ページのビューポートをダウンロードディレクトリのビデオファイルに記録)、screencast_stop(Firefox 154+ が必要)
- Utilities: accept/dismiss dialog、history back/forward、set viewport
大きな出力をディスクに保存する
大きなツール出力は、Claude Code などの CLI クライアントでかなりのコンテキストを消費する可能性があります。screenshot_page、screenshot_by_uid、take_snapshot、list_console_messages、
list_network_requests、get_network_request、get_page_text、
evaluate_script、および
evaluate_privileged_script ツールは、結果をインラインで返す代わりにファイルに書き込むオプションの saveTo パラメータを受け入れます。saveTo は次の 3 つの形式のいずれかを取ります:
- ファイルパス(現在の作業ディレクトリからの相対パス、または
~/.firefox-devtools-mcp内の絶対パス。親ディレクトリは作成されます) - 既存のディレクトリ(その中にタイムスタンプ付きファイルが生成されます)
true(~/.firefox-devtools-mcp/output/の下にタイムスタンプ付きファイルが生成されます)
レスポンスはパスとバイトサイズを返します。保存されたファイルには常に完全で切り詰められていないデータが保持されます。インラインサイズの保護(コンソールメッセージの上限、ネットワークヘッダーの切り詰め、スナップショット行の上限)はそれには適用されません。
テキストを生成するツール(スクリーンショット以外のすべて)は、保存された出力の一部を短い抜粋としてインラインでエコーバックする文字数である preview も受け入れます。スクリーンショットにはプレビューはありません。
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
# ローカルビルドで Inspector を実行
npx @modelcontextprotocol/inspector node dist/index.js --headless --viewport 1280x720
# またはホットリロード付きで開発実行
npm run inspector:dev
ローカル開発、テスト、CI の詳細については CONTRIBUTING.md を参照してください。
トラブルシューティング
- Firefox が見つからない:
--firefox-path "/Applications/Firefox.app/Contents/MacOS/firefox"(macOS)またはお使いの OS の正しいパスを渡してください。 - 初回実行が遅い: Selenium が BiDi セッションをセットアップするためです。以降の実行は高速になります。
- 古い UID: UID は、その要素が削除されるかページが移動するまで有効です。UID ツールが消えたと報告した場合は、新しいスナップショット(
take_snapshot)を取得してください。 - Windows 10: MCP サーバー 'firefox-devtools' の検出中にエラー: 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 のいずれかでライセンス供与されます。
