firefox-devtools-mcp

🥈Silver

Model Context Protocol server for Firefox DevTools. Enables AI assistants to inspect and control Firefox browser through the Remote Debugging Protocol. Useful for operations teams automating browser tasks, testing, and debugging. Integrates with Claude AI agents.

9850Updated 3w ago

Intermediate30min to implementautomation

Saves ~180 min per use

Quick InstallView Source

git clone https://github.com/freema/firefox-devtools-mcp.git

Works with:

Claude

Overview

About This Skill

How to Use

["Install the Firefox DevTools MCP server and ensure Firefox is running with remote debugging enabled (about:config > devtools.chrome.enabled = true).","In your AI assistant (e.g., Claude), load the MCP server module for Firefox DevTools.","Use the prompt template to construct your task. Replace [TASK], [URL], [CSS_SELECTOR], or [API_ENDPOINT] with your specific requirements.","Execute the task and review the structured output. For debugging, focus on the 'inspect_network_request' or 'inspect_dom' actions to identify issues.","Iterate by refining selectors or filters based on the output. Use the 'timestamp' fields to track changes between runs."]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/freema/firefox-devtools-mcp

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use the Firefox DevTools MCP server to [TASK] in Firefox. For example: 'Open a new tab in Firefox, navigate to [URL], and inspect the DOM element with selector [CSS_SELECTOR].' Or: 'Debug the network request for [API_ENDPOINT] in the current tab and report the response headers.'

Example Output

```json
{
  "status": "success",
  "actions": [
    {
      "action": "new_tab",
      "timestamp": "2024-05-15T14:30:22Z",
      "result": "Tab opened successfully (Tab ID: 3)"
    },
    {
      "action": "navigate",
      "url": "https://example.com/api/users",
      "timestamp": "2024-05-15T14:30:25Z",
      "result": "Navigation completed. Status: 200 OK"
    },
    {
      "action": "inspect_network_request",
      "filter": "url=https://example.com/api/users",
      "timestamp": "2024-05-15T14:30:28Z",
      "result": {
        "request_id": "12345.67",
        "method": "GET",
        "status": 200,
        "response_time_ms": 142,
        "headers": {
          "content-type": "application/json",
          "cache-control": "no-cache"
        },
        "response_body": {
          "users": [
            {"id": 1, "name": "Alice", "role": "admin"},
            {"id": 2, "name": "Bob", "role": "user"}
          ]
        }
      }
    }
  ],
  "summary": "Successfully debugged the network request for https://example.com/api/users. Identified 2 users in the response. No errors detected."
}
```