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 6 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 6 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
tabs	List open browser tabs by URL, title, and target ID

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 46 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