在网上找的 react-devtools 离线包乱七八糟、各色各样，放在浏览器中工具展示的并不清晰。

那就根据官网自己编译一个用吧，下面记录下怎么编译的，不想编译的，可以直接下载这个文件，然后直接跳到最后一步的安装扩展程序即可。

（编译后的文件下载地址：https://download.csdn.net/download/qq_33237207/86404498）

官网：https://github.com/facebook/react-devtools

把上面README中写的翻译过来就是：

此项目已迁移到 github.com/facebook/react

扩展的v3的源代码可以在v3分支中找到。

要从源代码构建v3浏览器扩展：（需要执行下面的命令）

git checkout v3
yarn install
yarn build:extension

step1：下载项目

我们需要先下载这个项目，且是v3分支的项目。

点击‘master’切换到‘v3’分支

 然后点击 Code-->Download ZIP，进行下载项目：

step2：安装依赖

解压刚才下载的项目，进入项目文件夹，执行【yarn i】命令。

注：如果速度太慢的话，可以使用【cnpm i】

step3：编译项目

然后再执行【yarn build:extension】命令，看到下图，说明编译结束了

 然后就能看到 ./shells/chrome文件夹中多了一个 build 文件夹，然后里面的 unpacked 文件夹就是chrome中所需react-devtools的工具扩展程序包。

 step4：安装扩展程序包：

打开开发者模式按钮，选择‘’加载已解压扩展程序‘’选择react-detools目录下的 shells-->chrome-->build-->unpacked 即可。

到此 react-devtools安装成功。

在控制台中可以看到 "React"选项卡，完美！

 

参考文章：https://www.jianshu.com/p/8afd06135fd5