Desktop App

The @frontend-debugger/app package is a standalone Electron desktop application. It exposes every feature of @frontend-debugger/core in a GUI — no MCP client, CLI, or config files required.

Installation

# Clone the monorepo
git clone https://github.com/starkyru/frontend-debugger
cd frontend-debugger
npm install

# Run
cd packages/app
npm start

Connecting to a Page

1. Enter a URL in the address bar and click Connect — Chrome launches automatically if it isn't running.
2. The address bar syncs with the active Chrome tab URL and keeps a navigation history dropdown.
3. The ↺ button (or Cmd/Ctrl+Shift+R) reloads the current page.

Running an Audit

Select any combination of the 8 checks in the checks bar and click Run Audit (Cmd/Ctrl+Enter):

Check	What it does
Accessibility	axe-core WCAG audit
Contrast	WCAG AA color contrast ratios
ARIA	Role, attribute, and landmark validation
Tokens	CSS custom property drift against a token JSON file
Focus Order	Tab sequence and focus trap detection
Performance	Core Web Vitals (LCP, FCP, CLS, TTFB)
Dark Mode	Screenshot diff between light and dark color schemes
Reduced Motion	Animations that ignore prefers-reduced-motion

Results appear in the sidebar tabs. Every violation card has a Copy prompt button that puts a ready-to-paste fix prompt on the clipboard.

Exporting Reports

Click Export and choose a format from the dropdown:

Format	Use case
HTML	Shareable self-contained report
JUnit XML	GitHub Actions annotations, CI pipelines
SARIF	GitHub Code Scanning

Tabs Reference

Overview

Stat cards for all executed checks. Two explanation modes:

• Explain — instant offline summary via explainAuditResults(): systemic issues, per-category breakdown, top fixes ranked by priority.
• AI Explain — calls Claude API for per-issue root cause, fix suggestion, likely file path, and regression flag. Enter an API key or set ANTHROPIC_API_KEY in your environment.

Focus

Tab order table (index, element, label, tabIndex, visibility), issues list, and focus trap cards.

Performance

Web Vitals cards (color-coded Good / Needs Improvement / Poor), navigation timing bar chart, and LCP element details.

Component Profiler — Start profiling, interact with the page, then Stop. Shows a table of top components by render time with self/total duration, render count, and last render reason.

Visual

• Responsive Matrix — screenshots at 375, 768, 1024, 1440 px with issue detection
• Dark Mode Diff — side-by-side light / diff / dark screenshots
• Reduced Motion — list of animations that ignore prefers-reduced-motion
• Visual Regression — named baselines: Capture → Compare → Update → Delete. Saved baselines appear in the dropdown. Diff cards show percentage, pixel count, and the diff image.
• Bisect Regression — finds the exact git commit that introduced a visual regression by binary-searching your commit history. Fill in project root, good/bad commits, page URL, dev server command + URL, and click Run Bisect.

Frameworks

• Detected framework badges (React, Vue, Svelte, Angular + version)
• Storybook — enter your Storybook URL and click Load Stories. Click any story to render it and see a live screenshot.
• Component Tree — framework-aware tree with props, hooks, state. Each component node has:
  • Inspect — shows full hooks, context values, rendered DOM, and source file path
  • Edit Props — JSON editor pre-filled with current props; Apply triggers a re-render and shows a screenshot
• Render Reasons — table showing why each component last re-rendered
• State Stores — Redux, Zustand, Pinia, Vuex, MobX state as collapsible JSON
• Reactive Signals — SolidJS, Preact Signals, Angular Signals, store-ai signal values
• RSC Manifest — Next.js App Router server/client component boundaries and route segments
• MCP Server config — copy the JSON snippet for Claude Desktop or Cursor

Recording

• Start / Stop Recording — captures DOM mutations (rrweb), network requests, console messages, and JS errors
• Export Replay — self-contained HTML with embedded rrweb player
• Failure Bundle — structured list of JS errors, console errors, network failures, and screenshot
• Network Cause Analysis — correlates each JS error to the network request that probably triggered it
• Compare Sessions — diff current recording against any saved session
• Save Session — persist the recording to disk; the saved sessions list reloads automatically

Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl+Enter	Run Audit
Cmd/Ctrl+Shift+R	Reload page

MCP Server Integration

The Frameworks tab shows a ready-to-paste claude_desktop_config.json snippet. Copy it into your MCP client settings to use all 46 tools from Claude or an IDE extension without needing the desktop app open.