Firefox DevTools

You can automate Firefox using the Firefox DevTools MCP server, which exposes a Model Context Protocol interface over WebDriver BiDi to drive Firefox from MCP clients. This enables you to run browser actions, take snapshots, inspect network activity, and interact with the page programmatically from compatible MCP tools and editors.

How to use

To use the Firefox DevTools MCP server, start it locally with your MCP client and connect through the MCP interface. You can drive Firefox, open pages, navigate, and interact with page elements. Use the available tools to list pages, select a page, navigate, take snapshots, interact with elements, capture network activity, and manage console output. If you are using Claude Code, you can add this MCP server as a provider and pass start-up options to tailor the browser session (headless mode, viewport size, starting URL, etc.). When you are finished, simply stop the MCP server to end the session.

How to install

Prerequisites you need before running the MCP server locally:

• Node.js version 20.19.0 or newer installed on your machine.

• Firefox browser installed (version 100 or newer). The server can auto-detect Firefox or you can pass the Firefox path if needed.

Recommended way to run locally is using the MCP server package via npx so you always execute the latest release from npm.

Configuring the server with Claude Code

Option A — Claude Code CLI (recommended for latest releases)

claude mcp add firefox-devtools npx firefox-devtools-mcp@latest

You can pass startup options either as command-line arguments or via environment variables. For example, start headless with a specific viewport, or set the initial URL.

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

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

Option B — Claude Code settings JSON

You can configure Claude Code to load the MCP server automatically by editing your mcp_settings.json. Place the file in the appropriate user directory for your OS.

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

Option C — Helper script for local dev build

If you have a local development build, you can use the helper script to set Claude Code configurations automatically.

npm run setup
# Choose Claude Code; the script saves JSON to the right path

Try it with MCP Inspector

You can quickly test the MCP connection using the MCP Inspector. This helps you verify that the server responds to common MCP tool actions.

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

From there you can exercise tools such as listing pages, selecting a page, navigating, taking snapshots, interacting with elements, capturing network requests, and reading console messages.

CLI options

You can customize the server run with flags or environment variables. The important options shown here include the Firefox path, headless mode, initial window size, and a starting URL.

# Examples of commonly used options
firefox-devtools-mcp --firefox-path /path/to/firefox --headless --viewport 1280x720 --start-url https://example.com --accept-insecure-certs

Tool overview

The MCP server provides a broad set of capabilities to control and inspect Firefox. You can perform the following actions:

• Pages: list/new/navigate/select/close
• Snapshot/UID: take/resolve/clear
• Input: click/hover/fill/drag/upload/form fill
• Network: list/get (ID-first, filters, always-on capture)
• Console: list/clear
• Screenshot: page/by uid (with optional saveTo for CLI environments)
• Utilities: accept/dismiss dialog, history back/forward, set viewport

Available tools

list_pages

List available pages opened in the browser session.

select_page

Select a page by its identifier to focus actions on that page.

navigate_page

Navigate the currently selected page to a specified URL or path.

take_snapshot

Capture a screenshot or element snapshot and resolve it to a UID.

click_by_uid

Click an element identified by its UID.

fill_by_uid

Fill a form field identified by its UID with a provided value.

list_network_requests

List network requests captured during the session; supports filters.

get_network_request

Retrieve details for a specific network request by ID.

screenshot_page

Capture a full page screenshot or a viewport region.

list_console_messages

List console messages captured from the page.