react-devtools插件的安装及使用（chrome浏览器

在 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，点击就可以查看啦

注意：如果重启后浏览器上还是没有显示react，是忘记勾选插件的 “允许访问文件网址” 框了。需要打开插件 =>详细信息 => 允许访问文件网址。重启就可以了。

1585115068.jpg
1585115118(1).jpg