如何判断网页是否使用了 react 技术？react 模块检测

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

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

本文的测试环境是：react-devtools@3.4.2，特约嘉宾是create-react-app的默认项目。

安装react-devtools

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

下面是相关链接：

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

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

判断标准：图标变换

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

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

使用了调试版的react

当然在正式的生产环境中，是不推荐使用调试版的react的。所以，出现这个图标的时候，可能就需要注意修改react的版本了。

使用了生产版的react

显示这个图标的话，就证明使用了推荐使用的生产环境下的react类库。

没有检测到react

没检测到react的话，就显示这个图标。不过如果您是file协议的话，这里可能存在着一个bug。就是说，如果是file协议，这里的检测说没使用react，这个可能是个误报。但是如果是正式的http或者https协议，这里说没有使用react的话，那就肯定是没用使用react。听领导的话，有饭吃。

总结

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

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

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