Frontend DebuggerMCP Server for UI Debugging

Component inspection, visual regression, a11y auditing, and session replay — all via CDP, zero runtime deps.

Get Started

Tool Reference

GitHub

🧩

Component Inspection

Traverse React, Vue, Svelte, and Angular component trees. Read props, state, hooks, and context. Edit props live.

🔍

Visual Regression

Capture baselines, diff against them, test across viewports. Dark mode and reduced-motion checks included.

♿

Accessibility Auditing

axe-core integration, WCAG contrast checks, focus order analysis, ARIA validation, and an AI-ready explain tool.

🎬

Session Replay

Record DOM mutations, network, console, and errors with rrweb. Export as shareable HTML. Bisect visual regressions across git commits.

⚡

Progressive Loading

Starts with 5 core tools (~1K tokens). Expands to 43 tools after connecting and detecting frameworks.

🛠️

CI Ready

HTML, JUnit XML, and SARIF output. Integrates with GitHub Actions and Code Scanning out of the box.

Why Frontend Debugger?

Most browser automation MCP servers treat the browser as a page to click. Frontend Debugger treats it as components with state — giving AI assistants the same view that developers have in React DevTools, Vue DevTools, and browser DevTools.

Capability	Playwright MCP	Chrome DevTools MCP	Frontend Debugger
Browser automation	Yes	Yes	Yes
Component trees (React/Vue/Svelte/Angular)	-	-	Yes
Props/state/hooks inspection	-	-	Yes
Live prop editing	-	-	Yes
Visual regression testing	-	-	Yes
Accessibility auditing	-	-	Yes
Session replay & export	-	-	Yes
Git bisect for regressions	-	-	Yes
Design token drift detection	-	-	Yes
SARIF / JUnit CI output	-	-	Yes

Packages

Package	Description
`@frontend-debugger/server`	MCP server — 43 tools + 5 prompts
`@frontend-debugger/core`	Standalone primitives for programmatic use
`@frontend-debugger/cli`	`fd` command — run audits from the terminal
`@frontend-debugger/ci`	CI runner with HTML, JUnit, and SARIF reports
`@frontend-debugger/report`	Report generators used by CLI and CI