组件检测器可自动识别网站使用的前端框架，并呈现其完整的组件树。在单一检测面板中即可查看 React、Vue、Angular 和 Svelte 组件名称、props/state 值以及嵌套层级关系。
你是否曾好奇某个网站用了什么框架？或者想了解复杂 UI 是如何拆解为组件的？组件检测器能即时回答这两个问题。它扫描页面中框架特有的标识（React fiber 节点、Vue 组件实例、Angular zone 标记、Svelte 组件元数据），识别框架类型、版本以及完整组件树。对于 React 和 Vue，还会进一步展示组件的 props 和 state 值，帮助你理解驱动每块 UI 的数据。点击树中的任意组件可高亮页面上对应的 DOM 元素，点击页面上的元素则可在树中定位其所属组件。就像 React DevTools 或 Vue DevTools，但以轻量浮动面板的形式内置于页面中。
自动检测 React（包括 Next.js、Gatsby、Remix）、Vue（包括 Nuxt）、Angular、Svelte（包括 SvelteKit）、Preact、Solid 及其他框架。显示框架名称、精确版本号以及渲染模式（客户端渲染、SSR 或混合渲染）。
以可折叠树形视图渲染完整组件层级。查看顶层 App 组件如何包含 Navbar，Navbar 如何包含 NavLinks，NavLinks 又如何包含各个 Link 组件。嵌套深度和父子关系一目了然。
对于 React 和 Vue 组件，可查看传入每个组件的当前 props 和 state 值。例如查看 Dashboard 组件接收到 title="Overview"、loading=false 和 columns=2。对于理解数据流至关重要。
点击树面板中的任意组件，页面上对应的 DOM 元素会以彩色叠加层高亮显示。也可以点击页面上的任意元素，在树中查找并选中其父组件。两个方向均可自由导航。
查看页面上渲染的组件总数、唯一组件与重复实例的数量，以及出现频率最高的组件。有助于了解页面复杂度并识别复用模式。
即使在混淆压缩的生产构建上也能检测框架。React 的 fiber 树、Vue 的 __vue__ 标记以及 Angular 的 ng 属性在生产模式下依然保留——组件检测器无论何种构建配置均可读取。
访问任意网站，即刻了解其使用的是 React、Vue、Angular 还是 Svelte——包括精确版本号。与 Site Stack 工具结合使用，可获得包含 CDN、分析工具和 CMS 信息的完整技术审计报告。
研究生产应用如何将 UI 拆解为组件。了解 Stripe 如何构建其定价页面、Linear 如何组织其 dashboard，或任意优秀应用如何将布局、导航和内容分离为独立组件。
某个组件渲染不正确？检查其 props 和 state，查看它实际接收到的数据。将预期值与实际值进行对比，定位数据流在哪里断裂——无需 console.log 语句。
正在准备前端面试？浏览生产网站，查看真实世界的组件模式——容器/展示组件拆分、render prop 用法、context provider 以及 HOC 包装在组件树中一览无余。
访问使用不同框架构建的类似产品，对比其组件结构。了解 React 应用与 Vue 应用如何处理同一 UI 模式——导航、表单、数据表格、模态框——进而理解两者在架构上的差异。
打开 DevSuite Pro 浮动 dock，点击组件检测器图标。工具将扫描页面 DOM 中的框架标识并构建组件树。
面板头部显示检测到的框架（React、Vue、Angular、Svelte）、其版本以及渲染模式。若未检测到框架，则报告该页面为原生 HTML/CSS/JS。
在树中展开或折叠组件以探索层级关系。组件名称通过缩进表示其嵌套深度。重复出现的组件会显示实例数量。
点击树中任意组件，在下方详情区域查看其当前 props 和 state 值。React 组件显示 props、state 和 hooks；Vue 组件显示 props、data 和计算属性。
点击任意组件，页面上对应的 DOM 元素会以彩色边框和半透明叠加层高亮显示。也可以点击页面上的元素在树中定位它。
