Tools Overview
Frontend Debugger provides 46 tools organized into 10 groups. Tools are registered progressively — only the core group is available at startup, and additional groups are activated as you connect and detect frameworks.
Tool groups
| Group | Tools | Registered when |
|---|---|---|
| Core | 6 | Always available |
| Audit | 15 | After connect |
| Session Replay | 11 | After connect |
| Advanced | 1 | After connect |
| Signals | 1 | After connect |
| React | 7 | After detect finds React |
| Vue | 1 | After detect finds Vue |
| Svelte | 1 | After detect finds Svelte |
| Angular | 1 | After detect finds Angular |
| Storybook | 2 | After detect finds Storybook |
The Advanced group is component_state_stores; the Signals group is component_signals. Both register after connect. The Audit group includes verify_change, audit_explain_ai, and audit_snapshot_update.
How progressive loading works
Startup → core (6 tools, ~1K tokens)
After connect → + audit (15) + replay (11) + advanced (1) + signals (1)
After detect → + framework tools (React: 7, Vue: 1, etc.)This keeps the initial tool list small so MCP clients don't waste context window on tools you won't use. If you prefer all tools upfront, set FRONTEND_DEBUGGER_ALL_TOOLS=1.
Quick reference
| Tool | Group | Description |
|---|---|---|
connect | core | Connect to Chrome via CDP |
navigate | core | Navigate to a URL |
screenshot | core | Capture page screenshot |
status | core | Connection and framework status |
detect | core | Auto-detect frontend frameworks |
tabs | core | List open browser tabs |
audit_a11y | audit | axe-core accessibility audit |
audit_contrast | audit | WCAG AA color contrast check |
audit_focus_order | audit | Keyboard focus order analysis |
audit_responsive | audit | Multi-viewport screenshots |
audit_snapshot | audit | Capture visual baseline |
audit_diff | audit | Compare against baseline |
audit_tokens | audit | Design token drift detection |
audit_dark_mode | audit | Light/dark mode comparison |
audit_reduced_motion | audit | prefers-reduced-motion compliance |
audit_aria_valid | audit | Deep ARIA validation |
audit_perf | audit | Core Web Vitals |
audit_explain | audit | AI-ready multi-audit diagnosis |
audit_explain_ai | audit | Claude-powered explanation (BYO API key) |
audit_snapshot_update | audit | Re-capture existing baseline |
verify_change | audit | One-call visual + component + a11y proof |
component_tree | react | React component tree |
component_inspect | react | Deep-inspect a React component |
component_render_reasons | react | Analyze re-render causes |
component_mutate_props | react | Live-edit component props |
component_rsc_manifest | react | Next.js RSC manifest |
component_profile_start | react | Start React profiler |
component_profile_stop | react | Stop profiler and get results |
component_vue_tree | vue | Vue component tree |
component_svelte_tree | svelte | Svelte component tree |
component_angular_tree | angular | Angular component tree |
component_stories | storybook | List Storybook stories |
component_render_story | storybook | Render a story in isolation |
component_state_stores | advanced | Read Redux/Zustand/Pinia/Vuex/MobX |
component_signals | signals | Read SolidJS/Preact/Angular signals |
replay_start | replay | Start session recording |
replay_stop | replay | Stop recording |
replay_capture_error | replay | Record until error fires |
replay_get_bundle | replay | Get failure bundle |
replay_export_html | replay | Export as shareable HTML |
replay_compare | replay | Diff two recordings |
replay_network_cause | replay | Trace errors to network causes |
replay_bisect | replay | Git bisect for visual regressions |
replay_persist | replay | Save recording to disk |
replay_load | replay | Load persisted recording |
replay_list | replay | List all sessions |