🎯

react-debugging

🎯Skill

from serkan-ozal/browser-devtools-skills

What it does

Inspects and maps React components to DOM elements, helping developers quickly diagnose rendering issues and component interactions.

📦

Part of

serkan-ozal/browser-devtools-skills(9 items)

react-debugging

Installation

Quick InstallInstall with npx

npx skills add serkan-ozal/browser-devtools-skills

npm installInstall npm package

npm install -g browser-devtools-mcp

📖 Extracted from docs: serkan-ozal/browser-devtools-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

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

More from this repository8

🎯

browser-testing🎯Skill

Automates browser testing by navigating, interacting with web pages, filling forms, capturing content, and verifying UI behaviors using Browser DevTools CLI.

🎯

debugging🎯Skill

Debugs web web applications by inspconsoleecting messages,, tracing function and calls exceptions without breakingpoints. Human

🎯

browser-devtools-cli🎯Skill

Automates web browser interactions using Playwright for testing, debugging, and extracting content via a powerful CLI tool.

🎯

visual-testing🎯Skill

Validates and compares web page visual rendering across different browsers and configurations using automated screenshot comparison techniques.

🎯

observability🎯Skill

Enables comprehensive web application monitoring by tracking distributed traces, console logs, network requests, and performance metrics across frontend and backend services.

🎯

api-testing🎯Skill

Mocks and tests API integrations by simulating responses, intercepting requests, and monitoring network traffic.

🎯

performance-audit🎯Skill

Performs comprehensive web page performance analysis using Web Vitals, network metrics, and SEO performance indicators.

🎯

accessibility-audit🎯Skill

Performs comprehensive web accessibility audits using ARIA snapshots, AX tree analysis, and WCAG validation checks.