如果您从本站下载的chrome插件是crx格式,安装的时候提示“CRX-HEADER-INVALID”错误,请
点击这里 查看解决方案。
React Developer Tools是开发的React必备的开发者工具扩展。可以在chrome开发者工具中得到一个名为React的新标签,检查React组件层次结构,在页面上显示React组件。
1、React Developer Tools介绍
React Developer Tools 是一款由 facebook 开发的有用的 Chrome浏览器扩展。通过它我们可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。 注意:该插件只对 ReactJS 开发有效。如果是 React Native 的话则无法使用这个插件调试。
2、设置
下载安装完毕后打开扩展程序管理页面。将 React Developer Tools 的“允许访问文件网址”勾选。
3、React Developer Tools使用说明
(1)首先使用 Chrome 打开需要调试的 React 页面,并打开“开发者工具”。
(2)在“开发者工具”上方工具栏最右侧会有个 react 标签。点击这个标签就可以看到当前应用的结构。 通过 React Developer Tools 我们可以很方便地看到各个组件之间的嵌套关系以及每个组件的事件、属性、状态等信息。