react devtools 如何源码安装？谷歌浏览器如何打包扩展？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述react的调试工具，react developer tools如何离线通过源码进行安装。为什么要通过源码安装呢？主要是因为，这可能是目前国内用户的获取到这个工具的唯一渠道了。众所周知的原因，谷歌浏览器的商店是不能访问的，也是不能顺利下载到crx文件的。为了下载到这些crx文件，大家都可是要八仙过海各显神通了。

在本文中，苏南大叔并没有编译react developer tools，而是通过下载到的编译后的压缩包，然后通过谷歌浏览器，做了个小小的转化，最终获得了一个crx文件，最终得以能够正常在谷歌浏览器中使用这个react开发者工具。

本文测试环境：win10/react-developer-tools@3.4.2/chrome@71.0.3578.98。

下载react-developer-tools

在国内的网络环境下，虽然不能正常访问谷歌浏览器商店。但是还是能够正常访问github的，那么苏南大叔通过github获得了一份react-developer-tools@3.4.2。

• https://github.com/facebook/react-devtools/releases

下载到的压缩包是解压后，可以通过谷歌浏览器的“加载已经解压的扩展程序”安装。但是，这样的话，这份源码和谷歌浏览器的关系，似乎有些奇怪。所以，苏南大叔更加倾向于把文件夹变成个crx文件。所以，就绕了个道。把文件夹变成了crx，然后再取代解压的文件夹。

chrome打包扩展

这个打包过程，非常简单。截图如下，通过“加载已经解压的扩展程序”就可以打包，并且如果不能提供私钥的话，还可以免费大赠送一份私钥。不过唯一的缺憾就是：再次打包后的扩展id名和原版的是id名是不一致的。大家看图说话即可，这里就不详细描述了。

进入谷歌浏览器的chrome:extensions，找到打包扩展程序按钮：

选择好本地扩展源码目录：

打包成功！附带赠送私钥一枚！

当然，大家也可以手工分发获得的crx文件给大家，免得以后再次痛苦下载这个react-devtools.crx文件。

安装完效果图，是下面这样的：右上角有个小图标，f12工具里面有个react的工具栏，当访问使用了react技术的页面时。这个f12里面的react的选项卡，就会显示出来。

相关链接

苏南大叔在以往的文章里面，有描述过如何下载crx文件，也有描述过如何手工编译react developer tools扩展。如果您感兴趣的话，可以参见如下相关链接：

• https://newsn.net/say/chrome-extension-download.html
• https://newsn.net/say/react-devtools-build.html

总结

安装谷歌专用的react-devtools，是开发react程序所必备的过程。推荐大家安装，可以在f12里面看到相关的功能。在后续文章中，苏南大叔将会讲解这个react-devtools的基本使用。敬请关注苏南大叔的react相关文章。

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。