mcpField
R
react-debugging

react-debugging

github.com/serkan-ozal开发779 次安装34 周前更新
代码仓库

关于 react-debugging

react-debugging 是用于调试 React 应用的技能，通过浏览器开发工具 CLI 检查组件树、属性及组件与 DOM 元素的对应关系。适合需要定位渲染组件或排查属性问题的开发者；React DevTools 扩展可提升检查可靠性。

主要功能

  1. 01按 DOM 选择器查找 React 组件
  2. 02按组件名称查找渲染的元素
  3. 03检查组件树与属性
  4. 04结合 DOM 和控制台检查

适用场景

  1. 01定位某个页面元素所属的组件
  2. 02排查组件属性相关问题
  3. 03查看组件渲染了哪些 DOM 元素
  4. 04检查 React 警告及控制台信息

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill react-debugging

安装后在 Claude Code 中输入/react-debugging确认已加载。

详细介绍

React 调试技能

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

使用时机

此技能适用于以下情况：

  • 用户正在调试 React 应用
  • 用户想检查 React 组件的属性／状态
  • 用户需要查找渲染某个元素的组件
  • 用户询问 React DevTools
  • 用户提到 React Fiber 或组件树

功能

组件检查
browser-devtools-cli react get-component-for-element --selector ".user-card"
browser-devtools-cli --json react get-component-for-element --selector "#root > div"
元素映射
browser-devtools-cli react get-element-for-component --component-name "UserCard"
browser-devtools-cli --json react get-element-for-component --component-name "Button"

前置条件

重要： React 工具在以下条件下效果最佳：

  1. 持久化浏览器上下文：启用 BROWSER_PERSISTENT_ENABLE=true
  2. React DevTools 扩展：在浏览器配置文件中手动安装

如果没有该扩展，工具会尽力扫描 DOM，但可靠性较低。

调试工作流

查找元素对应的组件
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
查找组件对应的元素
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

常见用例

调试属性问题
# Find component and check its props
browser-devtools-cli --json react get-component-for-element --selector ".broken-component"
理解渲染边界
# See what DOM elements a component renders
browser-devtools-cli --json react get-element-for-component --component-name "DataTable"
识别组件名称
# Click on an element to find its component name
browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"
与 DOM 检查结合使用
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"
与控制台检查结合使用
SESSION="--session-id react-debug"

# Check for React errors in console
browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

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

限制

  • 仅限开发构建：在 React 开发模式下效果最佳
  • 组件名称：在生产环境中可能会被压缩
  • 源代码信息：尽力提供，具体取决于源映射
  • 状态访问：未安装 DevTools 扩展时访问受限

最佳实践

  1. 使用持久化上下文来运行 React DevTools 扩展
  2. 在浏览器配置文件中手动安装扩展
  3. 在开发模式下测试，以获得更准确的组件名称
  4. 结合 DOM 检查以全面了解情况
  5. 使用控制台检查查看运行时状态
  6. 检查控制台消息中的 React 警告

评论

支持 Markdown