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 프로필을 사용하세요. 일반 프로필로 서버를 실행하지 마십시오 — 에이전트는 브라우저가 접근할 수 있는 모든 것(쿠키 및 저장된 세션 포함)에 접근할 수 있습니다.
• 방문하는 사이트에 주의하세요. 페이지는 에이전트를 조작하도록 설계된 콘텐츠(프롬프트 인젝션)를 반환할 수 있습니다. 통제하거나 신뢰하는 사이트만 사용하세요.
• 필요한 도구 모듈만 활성화하세요. 기본 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를 사용하세요.

옵션 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_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-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, screenshot
• basic(기본값) — slim + downloads, script, utilities, management, webextension, screencast
• developer — basic + debugging, network, console, profiler
• mozilla — developer + prefs, privileged
• all — 모든 모듈

기본값인 basic에는 script가 포함되므로 evaluate_script 도구가 포함됩니다. 이것이 공격 표면에 의미하는 바는 SECURITY.md를 참조하고, 이를 제외하려면 --tool-preset slim 또는 명시적 --tools 목록을 사용하세요.

# 개발자 프리셋 사용(네트워크, 콘솔, 디버깅 및 프로파일러 도구 추가)
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)