谷歌 安装 react-devtools 详细步骤

最近想学一下react，在谷歌上面安装react-devtools时看了一些博客，说的比较详细的没有几个，后面在博客园看到一篇有详细步骤+截图的博客。

https://www.cnblogs.com/Ewarm/p/12010716.html

开始

安装react-devtools前必须保证本地已安装好Git和node.js，至于Git和node.js的安装方式请自行百度！

1.首先打开官网：https://github.com/facebook/react-devtools

滑至底部，在 README.md下点击v3 branch

 

2.直接下载 v3 ZIP安装包,这边试过直接复制上图的链接使用git进行clone会下不到v3的版本。

3.下载完成以后
//切换到工程目录

cd react-devtools-3

//安装依赖 

cnpm i

4.安装完成后切换目录

//切换到chrome目录下

cd shells/chrome

5.生成扩展程序包

在shells/chrome 目录运行node build.js。

运行完成后在该目录下会生成build目录，这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包。

6.在chrome浏览器中安装react-devtools（这边有两种安装方式）
方法1：接着上面的第五步，将目录切换到react-devtools-3目录下：
运行命令npm run test:chrome

此时会自动安装react-devtools 并打开chrome浏览器

在浏览器右上角的工具栏里打开->更多工具->扩展程序里就可以看到我们安装成功了

 

方法二2：打开chrome浏览器 并打开扩展程序，在扩展程序中开启开发者模式，点击加载已解压的扩展程序，将在shells/chrome/build目录下生成的unpacked安装包进行加载即可。