react-debugging

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Debugging Skill

React调试技能

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

通过检查组件、Props和组件树来调试React应用。

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

当出现以下情况时可使用本技能：

用户正在调试React应用
用户想要查看React组件的Props/状态
用户需要查找渲染某个元素的组件
用户询问React DevTools相关问题
用户提到React Fiber或组件树

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"

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"

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.

重要提示： React工具在以下环境下效果最佳：

持久化浏览器上下文：启用
```
BROWSER_PERSISTENT_ENABLE=true
```
React DevTools扩展：手动在浏览器配置文件中安装
- Chrome应用商店

如果没有安装该扩展，工具会采用基于DOM扫描的最佳方案，但可靠性较低。

Debugging Workflow

调试流程

Find Component for Element

查找元素对应的组件

bash

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

bash

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

Navigate to React app

导航至React应用

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

查找某个DOM元素对应的组件

browser-devtools-cli $SESSION --json react get-component-for-element
--selector ".user-profile-card"

Cleanup

清理会话

browser-devtools-cli session delete react-debug

undefined

browser-devtools-cli session delete react-debug

undefined

Find Elements for Component

查找组件对应的元素

bash

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

bash

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

Navigate to React app

导航至React应用

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

查找某个组件渲染的所有DOM元素

browser-devtools-cli $SESSION --json react get-element-for-component
--component-name "UserCard"

Cleanup

清理会话

browser-devtools-cli session delete react-debug

undefined

browser-devtools-cli session delete react-debug

undefined

Common Use Cases

常见使用场景

Debugging Props Issues

调试Props问题

bash

undefined

bash

undefined

Find component and check its props

查找组件并检查其Props

browser-devtools-cli --json react get-component-for-element --selector ".broken-component"

undefined

browser-devtools-cli --json react get-component-for-element --selector ".broken-component"

undefined

Understanding Render Boundaries

理解渲染边界

bash

undefined

bash

undefined

See what DOM elements a component renders

查看组件渲染的DOM元素

browser-devtools-cli --json react get-element-for-component --component-name "DataTable"

undefined

browser-devtools-cli --json react get-element-for-component --component-name "DataTable"

undefined

Identifying Component Names

识别组件名称

bash

undefined

bash

undefined

Click on an element to find its component name

点击元素以查找其组件名称

browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"

undefined

browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"

undefined

Combined with DOM Inspection

结合DOM检查

bash

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

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

同时检查DOM结构

browser-devtools-cli $SESSION content get-as-html --selector ".card"

And accessibility

以及可访问性

browser-devtools-cli $SESSION a11y take-aria-snapshot --selector ".card"

undefined

browser-devtools-cli $SESSION a11y take-aria-snapshot --selector ".card"

undefined

Combined with Console Inspection

结合控制台检查

bash

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

bash

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

Check for React errors in console

检查控制台中的React错误

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"

undefined

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

undefined

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

仅支持开发构建：在React开发模式下效果最佳
组件名称：生产环境中可能被混淆压缩
源码信息：基于最佳方案获取，依赖源码映射
状态访问：未安装DevTools扩展时访问受限

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 DevTools扩展
手动在浏览器配置文件中安装扩展
在开发模式下测试以获取更清晰的组件名称
结合DOM检查以获取完整信息
使用控制台检查以查看运行时状态
检查控制台中的React警告信息