Back to Details

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:
  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.
重要提示： React工具在以下环境下效果最佳：
  1. 持久化浏览器上下文：启用
    BROWSER_PERSISTENT_ENABLE=true
  2. React DevTools扩展：手动在浏览器配置文件中安装
如果没有安装该扩展，工具会采用基于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
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"
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
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"
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"
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"
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
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

最佳实践

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