在 Chrome 或者Firefox中安装扩展 React Devtools 可以让你在浏览器开发者工具中查看 React 的组件树。
github地址：https://github.com/facebook/react-devtools
1、安装步骤如下：
git clone https://github.com/facebook/react-devtools.git
cd react-devtools //切换到工程目录
git checkout v3 // 切换到v3分支
cnpm install // 安装依赖
cd shells/chrome //切换到chrome目录下
node build.js // 执行完后会在当前目录生成一个build文件夹
谷歌浏览器网址输入chrome://extensions
点击 “开发者模式”
点击“加载已解压的扩展程序”
选择 react-detools/shells/chrome/build/unpacked 文件夹，安装完成
温馨提示: 如果上面的步骤1克隆不下来代码，可以直接在github上切换到v3分支，然后下载zip包，解压，进入到react-devtools-3目录
cnpm install安装依赖后进行后续步骤。
1599790895(1).jpg
2、使用
安装完成后需要 重启浏览器，右上角会有个react，点击就可以查看啦
1585114552.jpg
注意：如果重启后浏览器上还是没有显示react，是忘记勾选插件的 “允许访问文件网址” 框了。需要打开插件 =>详细信息 => 允许访问文件网址。重启就可以了。
1585115068.jpg
1585115118(1).jpg
