离线安装React developer tools

Google Chrome是个好东西，尤其是功能丰富的扩展程序，这里提供一种离线安装Chrome扩展程序的方法。为了说明方便，本教程以安装插件react developer tools为例子，其他插件均可按此方法安装。

安装材料：

• React developer tools 插件离线包 版本3.6.0

• 谷歌浏览器DEV 64位 版本：76.0.3809.21

安装步骤：

1. 下载React developer tools 离线包

1.1 登录 https://www.crx4chrome.com/crx/3068/

偶然发现crx4chrome上面有很多谷歌的插件，强烈推荐从这里下载。

https://www.crx4chrome.com/crx/3068/

1.2找到下载地址

不知道从什么时候，下载网站都学会了委婉，你必须不停的往下翻，不停的往下翻，才能找到如针眼大小的下载链接。

download.jpg

1.3解压插件

下载后的插件是一般是crx结尾的，首先做个备份，然后把源文件的crx更改为rar，接着解压缩。
具体见下图所示
fmkadmapgofadopljbjfkapdkoienihi-3.6.0-Crx4Chrome.com.crx

三步完成解压缩

2.安装React developer tools 离线包

2.1 通过360下载安装谷歌浏览器dev版

download 谷歌.jpg

2.2 开发者模式加载已解压的扩展程序

加载已解压的扩展程序.jpg

2.3 验证

安装完了，如何验证安装成功呢？可以通过两种方法交叉验证。
静态验证见下图，安装完成后，你会在扩展程序页面看到 React Developer Tools 3.6.0 ,同时浏览器地址栏右侧会出现一个灰色的react图标。

验证1.jpg

动态验证，只需要打开一个react框架的网站，比如知乎，当网站是react框架，则浏览器地址栏右侧的react图标会自动点亮，此时按下F12，在开发者工具里面会多出一个React的页签。

F12.jpg