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

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

2024-01-28 10:03

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

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-1）

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

本文测试环境：win10/[email protected]/[email protected]。

下载react--tools

在国内的网络环境下，虽然不能正常访问谷歌浏览器商店。但是还是能够正常访问github的react devtools 如何源码安装？谷歌浏览器如何打包扩展？，那么苏南大叔通过github获得了一份[email protected]。

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-2）

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

chrome打包扩展

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

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-3）

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-4）

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-5）

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-6）

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-7）

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

react 如何源码安装？谷歌浏览器如何打包扩展？（图8-8）