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

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - react-devtools-install
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-1)

在本文中,苏南大叔并没有编译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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - github下载
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-2)

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

chrome打包扩展

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

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - 打包1
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-3)

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - 打包2
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-4)

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - 打包3
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-5)

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - 安装1
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-6)

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - 安装2
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-7)

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

苏南大叔:react devtools 如何源码安装?谷歌浏览器如何打包扩展? - react-devtools
react devtools 如何源码安装?谷歌浏览器如何打包扩展?(图8-8)

相关链接

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

总结

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   chrome    F12