mcpField
R
react-debugging

react-debugging

github.com/serkan-ozalDevelopment779 installsUpdated 34w ago
Repository

About react-debugging

react-debugging is a skill for debugging React applications with browser-devtools-cli, inspecting components and their relationship to DOM elements. It is aimed at developers tracing rendering or props issues; the React DevTools extension improves inspection reliability.

Key features

  1. 01Find React components by DOM selector
  2. 02Find rendered elements by component name
  3. 03Inspect component trees and props
  4. 04Combine DOM and console inspection

Use cases

  1. 01Identify the component behind a page element
  2. 02Investigate component props issues
  3. 03See which DOM elements a component renders
  4. 04Check React warnings and console messages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill react-debugging

After installing, type/react-debuggingin Claude Code to confirm it loaded.

Details

From the project README

React Debugging Skill

Debug React applications by inspecting components, props, and the component tree.

When to Use

This skill activates when:

  • User is debugging a React application
  • User wants to inspect React component props/state
  • User needs to find which component renders an element
  • User asks about React DevTools
  • User mentions React Fiber or component tree

Capabilities

Component Inspection
browser-devtools-cli react get-component-for-element --selector ".user-card"
browser-devtools-cli --json react get-component-for-element --selector "#root > div"
Element Mapping
browser-devtools-cli react get-element-for-component --component-name "UserCard"
browser-devtools-cli --json react get-element-for-component --component-name "Button"

Prerequisites

Important: React tools work best with:

  1. Persistent Browser Context: Enable BROWSER_PERSISTENT_ENABLE=true
  2. React DevTools Extension: Manually install in browser profile

Without the extension, tools use best-effort DOM scanning which is less reliable.

Debugging Workflow

Find Component for Element
SESSION="--session-id react-debug"

# Navigate to React app
browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000"
browser-devtools-cli $SESSION sync wait-for-network-idle

# Find component for a DOM element
browser-devtools-cli $SESSION --json react get-component-for-element \
  --selector ".user-profile-card"

# Cleanup
browser-devtools-cli session delete react-debug
Find Elements for Component
SESSION="--session-id react-debug"

# Navigate to React app
browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000"
browser-devtools-cli $SESSION sync wait-for-network-idle

# Find all DOM elements rendered by a component
browser-devtools-cli $SESSION --json react get-element-for-component \
  --component-name "UserCard"

# Cleanup
browser-devtools-cli session delete react-debug

Common Use Cases

Debugging Props Issues
# Find component and check its props
browser-devtools-cli --json react get-component-for-element --selector ".broken-component"
Understanding Render Boundaries
# See what DOM elements a component renders
browser-devtools-cli --json react get-element-for-component --component-name "DataTable"
Identifying Component Names
# Click on an element to find its component name
browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"
Combined with DOM Inspection
SESSION="--session-id react-debug"

# Get component info
browser-devtools-cli $SESSION --json react get-component-for-element --selector ".card"

# Also check DOM structure
browser-devtools-cli $SESSION content get-as-html --selector ".card"

# And accessibility
browser-devtools-cli $SESSION a11y take-aria-snapshot --selector ".card"
Combined with Console Inspection
SESSION="--session-id react-debug"

# Check for React errors in console
browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

# Look for component info
browser-devtools-cli $SESSION --json react get-component-for-element --selector ".error-boundary"

Limitations

  • Development builds only: Best results with React dev mode
  • Component names: May be minified in production
  • Source info: Best-effort, depends on source maps
  • State access: Limited without DevTools extension

Best Practices

  1. Use persistent context for React DevTools extension
  2. Install extension manually in browser profile
  3. Test in development mode for better component names
  4. Combine with DOM inspection for full picture
  5. Use console inspection for runtime state
  6. Check for React warnings in console messages

Comments

Markdown supported