Tools Overview
Frontend Debugger provides 43 tools organized into 8 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 | 12 | After connect |
| Session Replay | 11 | 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 |
Plus 2 advanced tools (component_state_stores, audit_snapshot_update) registered after connect.
How progressive loading works
Startup → core (6 tools, ~1K tokens)
After connect → + audit (12) + replay (11) + advanced (2)
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_snapshot_update | advanced | Re-capture existing baseline |
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 |
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 |