playwright-react-debug-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| MAX_CONSOLE_ENTRIES | No | Console log buffer size | 100 |
| MAX_NETWORK_ENTRIES | No | Network request buffer size | 100 |
| PLAYWRIGHT_HEADLESS | No | Run browser headless | false |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| navigateA | Navigate to a URL in the browser. Launches browser if not already running. |
| clickB | Click on an element matching the given selector |
| fillA | Fill a form field with the given value. Clears existing content first. |
| selectC | Select option(s) from a dropdown/select element |
| scrollC | Scroll the page or scroll an element into view |
| wait_forA | Wait for an element to appear/disappear or for navigation to a URL |
| hoverC | Hover over an element |
| typeA | Type text into an element character by character (useful for autocomplete) |
| go_backA | Go back to the previous page in browser history |
| go_forwardA | Go forward to the next page in browser history |
| reloadA | Reload the current page |
| get_consoleA | Get console log entries from the page. Useful for seeing errors, warnings, and debug output. |
| clear_consoleA | Clear captured console logs |
| get_networkA | Get network request log. See API calls, their status codes, and timing. Essential for debugging Lambda/API issues. |
| get_request_detailB | Get detailed info about a specific network request including headers |
| clear_networkA | Clear captured network logs |
| get_domA | Get a summarized DOM tree. Returns tag names, IDs, classes, and text content in a digestible format. |
| get_elementA | Get detailed information about a specific element including computed styles and bounding box |
| get_text_contentA | Get visible text content of elements matching a selector |
| screenshotA | Take a screenshot of the page or a specific element. Returns base64 PNG image. |
| evaluate_jsA | Execute arbitrary JavaScript in the page context. Powerful for custom inspection and debugging. |
| get_react_treeB | Get the React component tree with props and state. Works with React 16+. |
| find_componentB | Find React components by name. Returns matching components with their props and state. |
| get_component_stateC | Get detailed state and props for a specific React component |
| collect_component_instancesA | Collect all instances of a React component type with props→HTML mapping. Useful for understanding component behavior, comparing different usages, or extracting component patterns. Returns props, rendered HTML, and minified source for each instance. |
| get_redux_stateA | Inspect Redux store state and recent actions. Works with Redux DevTools or globally exposed stores. |
| get_zustand_storesB | Inspect Zustand store state. Finds stores used in React components. |
| get_react_query_cacheA | Inspect React Query/TanStack Query cache. Shows queries, their status, and cached data. |
| get_context_valuesB | List all React Context providers and their current values. |
| get_render_countB | Track component render counts to identify unnecessary re-renders. |
| get_slow_componentsA | Find React components with slow render times. Requires React Profiler or DevTools. |
| get_web_vitalsA | Get Core Web Vitals (LCP, FID, CLS) and other performance metrics. |
| find_hydration_errorsB | Detect SSR hydration mismatches. Essential for Next.js/Remix debugging. |
| get_error_boundariesA | Find React error boundaries and any errors they have caught. |
| detect_memory_leaksA | Detect potential memory leaks: large DOM, detached nodes, growing collections. |
| audit_accessibilityB | Run accessibility audit: missing alt text, labels, heading structure, color contrast, ARIA issues. |
| get_aria_treeB | Get the accessibility tree showing roles, names, and states. Useful for screen reader debugging. |
| explain_errorA | Analyze a console error with full context: related network requests, React state, and debugging suggestions. Best tool for diagnosing issues. |
| get_debug_summaryA | Get a quick overview of the debugging state: page info, error count, failed requests |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 39 tools
Most tools have clearly distinct purposes, with browser actions, network/console inspection, and React state inspection well separated. However, similar tools like find_component and collect_component_instances, or get_dom and get_react_tree, could cause some misselection despite descriptive help.
All tool names use snake_case and follow a consistent verb_noun pattern, with action verbs like navigate, click, fill, and get_* for inspections, clear_* for resets, and find_*/collect_*/detect_* for specific operations. No mixing of conventions.
39 tools is well beyond the typical well-scoped range and even exceeds the 25+ threshold for 'too many'. While the broad scope of a Playwright and React debugger justifies some depth, this many tools feels heavy and could overwhelm an agent.
The tool set covers the full debugging lifecycle: navigation, interaction, DOM inspection, React component state and tree, multiple state management libraries (Zustand, Redux, React Query), performance monitoring, error detection, hydration mismatch, and accessibility audits. No obvious dead ends or missing critical operations for the stated purpose.