react前端如何审查元素
审查 React 元素的方法
浏览器开发者工具
在 Chrome 或 Firefox 中右键点击页面元素，选择“检查”或“审查元素”，打开开发者工具。React 组件会以普通 DOM 形式展示，但可通过安装扩展增强识别。
React Developer Tools 扩展
安装官方扩展（Chrome/Firefox 商店搜索“React Developer Tools”）。扩展会添加专属面板，显示组件层级、props、state 及 hooks 信息，支持实时编辑和调试。
查看虚拟 DOM 结构
在开发者工具的“Components”面板（需安装上述扩展）中，可查看组件树、选中组件并检查其细节。支持动态修改 props 和 state 进行测试。
源码映射（Source Maps）
确保构建配置中 devtool: 'source-map'（Webpack）或类似选项已启用。在开发者工具的“Sources”面板可直接调试原始 React 代码而非编译后代码。
控制台直接访问组件
通过 React Developer Tools 扩展，在控制台输入 $r 可获取当前选中组件的实例，直接调用其方法或检查属性。
