三秒内判断网站用Vue还是React：先开Console输入window.Vue或window.__REACT_DEVTOOLS_GLOBAL_HOOK__，有返回即对应框架；再查Network中JS路径（如_next/为Next.js、.nuxt/为Nuxt）；Elements中搜v-或data-reactroot可进一步验证。
你想在米侠浏览器里三秒内判断一个网站用的是 Vue 还是 React，而不是翻几十行 script 标签手动比对版本号——这需要绕过静态源码，直接抓取运行时特征和加载行为。
通过开发者工具快速识别框架
第一步：按 F12 打开开发者工具 → 切换到 Console 标签页。
第二步：输入以下任一命令并回车：
【window.Vue || window.vue】 —— 若返回构造函数或版本对象，说明使用 Vue 2/3；返回 undefined 则大概率不是 Vue。
立即学习“前端免费学习笔记（深入）”；
【window.React || window.__REACT_DEVTOOLS_GLOBAL_HOOK__】 —— 前者在早期 React 中存在，后者是 DevTools 注入钩子，出现即强提示 React 已加载。
第三步：若两个都返回 undefined，输入 【document.querySelector('script[src*="angular"]')】，命中即 Angular；再试 【document.querySelector('script[src*="svelte"]')】，有结果则为 Svelte。
注意：部分框架（如 Next.js、Nuxt）会移除全局变量以减小体积，此时需结合 Network 面板观察资源路径。
从 Network 面板识别框架特征
按 Ctrl+Shift+I 打开开发者工具 → 点击 Network 标签 → 刷新页面 → 筛选 JS 文件。
观察加载的脚本文件名和路径：
• 出现 【_next/、/static/chunks/、/pages/】 路径 → 大概率是 Next.js；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
• 文件名含 【nuxt.config.js、.nuxt/】 → Nuxt 框架；
• URL 中带 【/wp-content/、/wp-includes/】 → WordPress 主题，非前端框架，但常混用 React/Vue 插件；
• 加载了 【solid-js、preact.min.js、alpine.js】 等轻量库 → 对应框架可直接确认。
用 Elements 面板观察 DOM 特征
切换到 Elements 标签页，按 Ctrl+F 搜索以下关键词：
• 搜索 v- （带空格）→ Vue 指令残留，如 v-if、v-model；
• 搜索 data-v- → Vue 的 scoped CSS 属性，几乎 100% 表明使用 Vue；
• 搜索 class="ng- 或 ng-version → Angular；
• 搜索 data-reactroot 或 data-reactid → React 16 及更早版本；
• 搜索 __next → Next.js 渲染容器根节点，直接锁定 SSR 框架。
安装专用检测插件（可选）
方法一：访问 chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnjbpeoblhjekmibcdecp（该扩展兼容米侠）→ 添加至浏览器 → 刷新目标网页 → 地址栏右侧出现 Wappalyzer 图标 → 点击即可显示框架、CMS、分析工具等完整技术栈。
方法二：若插件不可用，右键网页空白处 → “查看网页源代码” → Ctrl+F 搜索 webpack、vite、rollup，出现构建工具名可反推主流框架生态。
