用途:调试 React 应用,检查组件、props 和组件树,定位某个 DOM 元素由哪个组件渲染,或查看某组件渲染了哪些元素。
主要能力:提供两个核心命令。由元素查组件:browser-devtools-cli react get-component-for-element --selector ".user-card";由组件查元素:browser-devtools-cli react get-element-for-component --component-name "UserCard"。可加 --json 输出结构化结果,也可配合会话参数使用。
使用方式:建议启用持久化浏览器上下文(BROWSER_PERSISTENT_ENABLE=true),并在浏览器配置中手动安装 React DevTools 扩展。典型流程为:用 --session-id 建立会话,navigation go-to 打开 React 应用,sync wait-for-network-idle 等待网络空闲,再执行 react 命令,最后用 session delete 清理。可结合 DOM 检查(content get-as-html)与无障碍快照(a11y take-aria-snapshot),也可用 o11y get-console-messages 查看 React 警告。
适用场景:排查 props 问题、理解组件渲染边界、识别未知元素的组件名、结合控制台检查运行时状态。
限制:未安装扩展时仅做尽力而为的 DOM 扫描,可靠性较低;开发构建下效果最好,生产环境组件名可能被压缩;源码信息依赖 source map,为尽力而为;无 DevTools 扩展时状态访问受限。