极简安装React Devtools调试工具

前言

本猴今天要写React，突然发现chrome浏览器上没得React Devtools的调试工具。所以在此收集了关于React Devtools安装的一个极简安装方法。其特点： 无需翻墙, 步骤简单, 速度快。

安装步骤

1. 获取react-devtools包

到github上下载react-devtools文件到本地，下载地址： https://github.com/facebook/react-devtools；
方式有二种：
1）直接下载zip安装包，
2） 通过git clone来拷贝到本地。
git拷贝命令如下：

git clone https://github.com/facebook/react-devtools.git

ps: 如果你是下载的zip包请直接跳到第4步即可。

2. 安装react-devtools依赖

进入react-devtools文件夹，用npm安装依赖，我们这里用淘宝镜像，一个字因为快;

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

3. 编译react-devtools

安装依赖成功之后，我们就可以打包一份扩展程序出来了，编译打包命令如下：

npm run build:extension:chrome

运行结果如下：

➜  react-devtools git:(master) ✗ npm run build:extension:chrome

> @ build:extension:chrome /Users/oneape/codes/github/react-devtools
> node ./shells/chrome/build

✓ Preparing build
✓ Building extension - temporary files in shells/webextension/build/chrome
✓ Unpacking extension - artifacts in shells/chrome/build

The Chrome extension has been built!
You can test this build by running:

# From the react-devtools root directory:
yarn run test:chrome

这个会在react-devtools -> shells -> chrome -> build 中生成一个unpacked文件夹

4. 添加扩展程序

打开chrome扩展程序chrome://extensions/，加载zip包中的扩展程序或者选择第3步中生成的unpacked文件夹。这样react-devtools扩展程序就安装好了。

结果如下图：

react-devtools安装成功图