Getting Started

Prerequisites

• Node.js 20+
• A Chromium-based browser launched with remote debugging enabled:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

# Windows
start chrome --remote-debugging-port=9222

Installation

With an MCP client (recommended)

Add to your MCP client config (Claude Desktop, Claude Code, Cursor, etc.):

{
  "mcpServers": {
    "frontend-debugger": {
      "command": "npx",
      "args": ["-y", "@frontend-debugger/server"],
      "env": {
        "FRONTEND_DEBUGGER_PROJECT_ROOT": "/path/to/your/project"
      }
    }
  }
}

Global install

npm install -g @frontend-debugger/server

Then configure your MCP client to use the frontend-debugger-mcp command directly.

Claude Code

claude mcp add frontend-debugger -- npx -y @frontend-debugger/server

First steps

Once connected, the server starts with 5 core tools. A typical workflow:

1. connect — Connect to your running Chrome instance
2. navigate — Go to the page you want to debug
3. detect — Auto-detect React, Vue, Svelte, Angular, or Storybook
4. Framework-specific tools become available automatically
5. Run audits, inspect components, capture baselines

> Connect to Chrome and navigate to http://localhost:3000

The server will call connect → navigate → detect, then register
React tools after detecting React in your app.

Progressive tool loading

By default, only 5 tools are registered at startup to keep the token footprint small:

Tool	Purpose
connect	Establish CDP connection
navigate	Go to a URL
screenshot	Capture the page
status	Check connection and detected frameworks
detect	Identify frontend frameworks

After connect, audit and replay tools are registered. After detect, framework-specific tools are registered based on what's found.

Set FRONTEND_DEBUGGER_ALL_TOOLS=1 to register all 43 tools at startup.

Environment variables

Variable	Default	Description
FRONTEND_DEBUGGER_PROJECT_ROOT	process.cwd()	Root directory for baselines, replays, and file operations
FRONTEND_DEBUGGER_ALL_TOOLS	0	Set to 1 to disable progressive loading