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

学习一项技术的最好办法,就是学习别人的例子。react也是这样,那么如何找到其它的react网站呢?react-devtools其实具有检测网站的功能。同时,它还能检测当前的页面,使用的react是生产版本,还是调试版本(两者在性能上区别还是很大的)。这款神奇的react-devtools,您安装好了么?

如何判断网页是否使用了 react 技术?react 模块检测 - react-detect
如何判断网页是否使用了 react 技术?react 模块检测(图4-1)

本文的测试环境是:react-devtools3.4.2,特约嘉宾是create-react-app的默认项目。

安装react-devtools

这个内容,为了获得这款react-devtools扩展,苏南大叔已经反反复复讲了好多种方案了。

下面是相关链接:

总之,条条大路通罗马,这里假设,您已经获得了react-devtools扩展。安装好之后,不但在f12里面有新的选项卡。同时,在谷歌浏览器的右上角也有新的react图标。这个图标正是本文主要讲述的内容。

图标变换

谷歌浏览器的react扩展,在右上角安装了扩展图标。这个扩展图标,具体检测当前页面是否包含react技术的功能。当然,会有误报,对于file://开头的页面,可能会检测不到使用了react技术,这个应该是个bug

下面的截图,都基于create-react-app的默认项目。大家可以对比看看效果即可。

使用了调试版的react(不推荐):

如何判断网页是否使用了 react 技术?react 模块检测 - 检测1
如何判断网页是否使用了 react 技术?react 模块检测(图4-2)

使用了生产版的react(推荐):

如何判断网页是否使用了 react 技术?react 模块检测 - 检测2
如何判断网页是否使用了 react 技术?react 模块检测(图4-3)

没有检测到react(bug):

如何判断网页是否使用了 react 技术?react 模块检测 - 检测3
如何判断网页是否使用了 react 技术?react 模块检测(图4-4)

总结

这个react-devtools还是非常非常有用的,这里大家如果想学好react技术的话,苏南大叔建议您:一定要安装这款浏览器扩展。更多react相关文章,请点击:

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!