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)
相关链接
苏南大叔在以往的文章里面,有描述过如何下载crx文件,也有描述过如何手工编译react tools扩展。如果您感兴趣的话114黄页sitemaps,可以参见如下相关链接:
总结
安装谷歌专用的react-,是开发react程序所必备的过程。推荐大家安装,可以在f12里面看到相关的功能。在后续文章中,苏南大叔将会讲解这个react-的基本使用。敬请关注苏南大叔的react相关文章。
【源码】本文代码片段及相关软件,请点此获取更多信息
【绝密】秘籍文章入口,仅传授于有缘之人
chrome F12
【本文来源于互联网转载,如侵犯您的权益或不适传播,请邮件通知我们删除】