React debugging

Skill ironbee-ai/ironbee-devtools-skills/skills/react-debugging

Skills for IronBee DevTools MCP/CLI

Install

npx -y skills add ironbee-ai/ironbee-devtools-skills --skill react-debugging

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.4 KB, as published. Nobody here has run it

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

ironbee-browser-devtools-cli react get-component-for-element --selector ".user-card"
ironbee-browser-devtools-cli --json react get-component-for-element --selector "#root > div"

Element Mapping

ironbee-browser-devtools-cli react get-element-for-component --component-name "UserCard"
ironbee-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

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

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

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

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

Find Elements for Component

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

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

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

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

Common Use Cases

Debugging Props Issues

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

Understanding Render Boundaries

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

Identifying Component Names

# Click on an element to find its component name
ironbee-browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"

Combined with DOM Inspection

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

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

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

# And accessibility
ironbee-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
ironbee-browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

# Look for component info
ironbee-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