google浏览器添加react-devtools扩展程序的方法

安装react-devTools调试工具步骤

1 ，先去github上下载文件到本地，下载压缩包（下载到自己能找到的地方）

2，解压文件，解压好之后通过命令进入react-devtools-3文件夹（下载的压缩包就是这个名字）

然后用npm 安装依赖

npm --registry https://registry.npm.taobao.org install

我安装的时候报错了，但是我没有管它，继续执行了第三步

3 ，打包扩展程序

npm run build:extension:chrome

这样说明安装成功

会在原始的项目目录里生成新的文件夹 react-devtools-3 --->shells--->chrome-->build-->unpached文件夹

4，添加到chrome扩展程序

点击chrome浏览器右上角的三个点，在下拉列表里选中  更多工具-->扩展程序

打开开发者模式

点击 加载已解压的扩展程序，选择步骤3中的 unpached文件夹，这是就会将react-devtools添加到chrome浏览器

运行的你react程序，npm start

此时你的浏览器右上角会出现一个绿色的图标，如下 1

但是我的出现了问题是“红色的”，正常情况下应该是绿色的

5，刚装好的时候，我的1就是红色的，且没有2，不知道什么原因

查找了半天解决方法也没有找到，但是当我 关闭调试模式 再次打开调试 2就出现了

我也是很困惑的