chrome浏览器安装react-devtools

    react-devtools是react开发时的一个浏览器插件，对于各大主流高级浏览器都有扩展程序可以安装，官方的地址默认是https://github.com/facebook/react-devtools，但是后来它又集成到了react项目中，所以通过源码编译安装起来给人一种错觉，到底是安装react-devtools还是react。如果是直接git clone，还需要切换分支v3，然后构建。

    这里推荐直接通过码云上的react-devtools仓库来获取源代码进行构建，原因一个是克隆速度，一个是不用切换分支，克隆之后就可以使用。地址如下：https://gitee.com/mirrors/react-devtools.git

    克隆到本地之后：

cd react-devtools
cnpm i
yarn build:extenstion

   构建成功的截图如下：

   

    根据提示，我们可以运行测试：

           

    这个测试默认会打开chrome浏览器，并且显示react官网主页。浏览器右上角会有一个react的icon，表示扩展程序构建成功且可以安装。但是这个安装，貌似是临时的，如果重新打开浏览器，这个插件并没有显示出来，扩展程序里面也没有，这仅仅是一个测试。

    

    真正的安装，我们需要在扩展程序这个页面，选择加载已解压的扩展程序，找到react-devtools/shells/chrome/build/unpacked目录即可。

    

    扩展程序安装成功，最后检验，需要运行react的项目，然后打开浏览器，打开开发者工具选项，查看到多了一个React的Tab：

     

    到此，可以说react-devtools就是安装成功，并且可以使用了。