如何判断网站技术栈：jQuery/Vue/React/Angular

文章目录

看到一个设计很棒的网站，想知道它用了什么技术框架？不用瞎猜，也不用去翻源码，这篇文章教你用最快的方法精准识别。

当你浏览一个精美的网页时，会不会好奇："这个网站是用什么做的？"是简单的 jQuery，还是现在流行的 Vue、React 或 Angular？对于初学者来说，这可能是个谜。

别担心，今天这篇文章就教你一套从"傻瓜式"到"专家式"的方法，最快5秒钟就能看穿一个网站的技术栈。

方法一：使用浏览器插件（最推荐，新手首选）

这是最简单、最直观的方法，安装一个插件，点击一下，所有技术一目了然。完全不需要任何技术基础。

Wappalyzer 是这个领域最知名的插件之一，功能非常强大。

它能识别什么？ 不仅能识别前端框架（Vue/React/Angular），还能识别后端技术（如PHP、Node.js）、CMS系统（如WordPress）、分析工具（如Google Analytics）、服务器信息等等。
如何使用？
1. 去你使用的浏览器（Chrome/Edge/Firefox）的扩展应用商店。
2. 搜索 "Wappalyzer" 并点击安装。
3. 打开你想分析的网站，点击浏览器工具栏上的Wappalyzer图标。
4. 它会立刻弹出一个窗口，列出该网站使用的所有技术清单。

WhatRuns 是另一个非常出色的选择，它的界面同样清晰友好。

它能做什么？ 和Wappalyzer类似，WhatRuns也能识别出网站所使用的各种技术，包括Web应用、CDN、字体、WordPress插件等。它还有一个特色功能是关注网站，当网站的技术发生变化时，它可以通知你。
如何使用？ 安装步骤与Wappalyzer完全一样。安装后，访问目标网站，点击插件图标，它就会展示一份清晰的技术报告。

配图建议：
图1：一张截图，展示浏览器右上角地址栏旁，Wappalyzer和WhatRuns的图标。
图2：一张Wappalyzer或WhatRuns插件的弹出界面截图，里面清晰列出了"JavaScript框架"、"Web服务器"、"分析工具"等分类和具体名称。

如果你不想安装插件，或者想更深入地了解技术细节，那么浏览器的开发者工具是你的最佳搭档。按一下键盘上的 F12 键 即可打开。

现代前端框架（如Vue、React、Angular）在加载后，通常会在浏览器的全局对象 window 上挂载一些特征明显的变量。你可以在开发者工具的 Console（控制台） 面板中直接输入以下命令来"钓鱼"：

检测 Vue：输入 window.Vue 或 window.__VUE__。如果返回了一个函数或对象，说明该网站使用了Vue。
检测 React：输入 window.React 或 document.querySelector('[data-reactroot]')。如果返回了结果，说明是React。
检测 jQuery：输入 window.jQuery 或 window.$。如果返回了函数，说明网站引入了jQuery。（注意：某些网站可能也会用 $ 作为其他库的别名，最好结合 window.jQuery 判断）。

配图建议：
图3：一张浏览器开发者工具Console面板的截图，输入 window.Vue 后，下方返回了一个Vue构造函数，用红框标出返回结果。

在开发者工具的 Sources（源代码） 面板中，你可以看到网站加载的所有文件。

查看HTML源码：在 Elements（元素） 面板中，看根节点。如果有一个 <div id="app">，很可能是Vue或React的挂载点；如果是 <div id="root">，则React常见。
查看JS文件：在 Sources 面板中查看 js 文件夹。如果看到 chunk-vendors.js、app.js 这类文件，通常是Vue或React项目打包后的产物。如果看到 jquery.min.js、jquery-3.x.x.js，则必定使用了jQuery。

配图建议：
图4：一张开发者工具Sources面板的截图，展开static/js/目录，里面列出了chunk-vendors.js和app.js，旁边用文字标注"典型的Vue/React打包文件"。

如果你临时在别人的电脑上，或者不方便安装插件，还可以使用在线分析网站。

缺点：在线工具的分析结果可能不是实时的，对于某些动态加载的技术识别能力可能不如本地插件准确。

技术栈	最快速的判断方法	关键特征
Vue.js	控制台输入 `window.Vue`	有返回值；HTML中常见 `<div id="app">`；打包文件常见 `app.js` 和 `chunk-vendors.js`。
React	控制台输入 `window.React` 或查找 `data-reactroot` 属性	有返回值；HTML根节点常见 `<div id="root">`；使用Next.js时常见 `__NEXT_DATA__` 脚本标签。
Angular	查看HTML中是否有 `ng-` 开头的属性（如 `ng-app`、`ng-controller`）	HTML中出现大量 `ng-` 自定义属性；引入 `angular.js` 或 `main..chunk.js` 文件。
jQuery	控制台输入 `window.jQuery`	有返回值；源码中明确包含 `jquery.min.js` 文件；代码中常见 `$('selector')` 语法。
普通/原生JS	不具备以上任何特征	没有使用上述框架，JS代码多为原生操作DOM或使用简单的工具库。

新手建议：直接从安装 Wappalyzer 或 WhatRuns 插件开始，5秒钟就能让你对网站技术了如指掌。随着经验的积累，再慢慢尝试使用F12手动探查，你会对技术有更深的理解。