react-debugging

Original：🇺🇸 English

Translated

Debug React applications by inspecting components, props, and the component tree. Use when the user is debugging React apps, wants to inspect component props/state, find which component renders an element, or understand the React component hierarchy.

1installs

Sourceserkan-ozal/browser-devtools-skills

Added on2026-02-08

NPX Install

npx skill4agent add serkan-ozal/browser-devtools-skills react-debugging

SKILL.md Content

View Translation Comparison →

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

bash

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

bash

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:

Persistent Browser Context: Enable
```
BROWSER_PERSISTENT_ENABLE=true
```
React DevTools Extension: Manually install in browser profile
- Chrome Web Store

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

Debugging Workflow

Find Component for Element

bash

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

bash

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

bash

# Find component and check its props
browser-devtools-cli --json react get-component-for-element --selector ".broken-component"

Understanding Render Boundaries

bash

# See what DOM elements a component renders
browser-devtools-cli --json react get-element-for-component --component-name "DataTable"

Identifying Component Names

bash

# 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

bash

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

bash

SESSION="--session-id react-debug"

# Check for React errors in console
browser-devtools-cli $SESSION --json o11y get-console-messages --types error,warn

# 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

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

react-debugging

NPX Install

Tags

SKILL.md Content

React Debugging Skill

When to Use

Capabilities

Component Inspection

Element Mapping

Prerequisites

Debugging Workflow

Find Component for Element

Find Elements for Component

Common Use Cases

Debugging Props Issues

Understanding Render Boundaries

Identifying Component Names

Combined with DOM Inspection

Combined with Console Inspection

Limitations

Best Practices