您是否曾好奇过一个网站是用什么框架构建的?或者想了解一个复杂的 UI 是如何被拆解成各个组件的?Component Detector 能立即回答这两个问题。它会扫描页面,寻找特定框架的特征标识(React fiber 节点、Vue 组件实例、Angular zone 标记、Svelte 组件元数据),从而识别出所使用的框架、版本以及完整的组件树。对于 React 和 Vue,它还能更进一步——显示组件的 props 和 state 数值,帮助您理解是什么数据驱动了 UI 的每一部分。
点击组件树中的任意组件,即可高亮页面上对应的 DOM 元素;或者点击页面上的元素,即可在组件树中定位到它。这就像是 React DevTools 或 Vue DevTools,但以轻量级浮动面板的形式内置于您的页面中,无需为每个查看的项目单独安装特定框架的扩展。
即使在经过压缩、生产环境打包的网站上,组件名称和变量名已被混淆,检测依然有效——该工具依靠的是结构特征,而非依赖可读的源代码,这也是它在从未提供 source map 的网站上依然能正常工作的原因。除了四大主流框架之外,它还能识别叠加在其上的元框架,例如 Next.js 和 Nuxt,并将它们作为独立于底层 React 或 Vue 运行时的一层单独报告。因此,每当您接触到一个陌生的代码库或竞争对手的网站,需要在深入研究之前先了解概况时,它都是快速入门的第一步。
Detects React (including Next.js, Gatsby, Remix), Vue (including Nuxt), Angular, Svelte (including SvelteKit), Preact, Solid, and other frameworks automatically. Shows the framework name, exact version number, and rendering mode (client-side, SSR, or hybrid).
Renders the complete component hierarchy in a collapsible tree view. See how the top-level App component contains a Navbar, which contains NavLinks, which contain individual Link components. The nesting depth and parent-child relationships are crystal clear.
For React and Vue components, view the current props and state values passed to each component. See that the Dashboard component receives title="Overview", loading=false, and columns=2. Invaluable for understanding data flow.
Click any component in the tree panel to highlight its corresponding DOM element on the page with a colored overlay. Or click any element on the page to find and select its parent component in the tree. Navigate in whichever direction is natural.
See the total number of components rendered on the page, how many are unique vs repeated instances, and which components appear most frequently. Useful for understanding page complexity and identifying reuse patterns.
Detects frameworks even on minified production builds. React's fiber tree, Vue's __vue__ markers, and Angular's ng attributes persist in production mode — Component Detector reads them regardless of build configuration.
Visit any website and instantly know whether it's built with React, Vue, Angular, or Svelte — including the exact version. Combine with Site Stack for a complete technology audit including CDN, analytics, and CMS information.
Studying how production applications decompose their UI into components. See how Stripe structures its pricing page, how Linear organizes its dashboard, or how any well-built app separates layout, navigation, and content into components.
A component isn't rendering correctly? Inspect its props and state to see what data it's actually receiving. Compare expected values against actual values to identify where the data flow breaks — without console.log statements.
Preparing for a frontend interview? Browse production sites to see real-world component patterns — container/presentational splits, render prop usage, context providers, and HOC wrappers are all visible in the component tree.
Visit similar products built with different frameworks and compare their component structures. See how a React app vs a Vue app approaches the same UI pattern — navigation, forms, data tables, modals — and understand the architectural differences.
Open the DevSuite Pro floating dock and click the Component Detector icon. The tool scans the page DOM for framework-specific markers and builds the component tree.
The panel header shows the detected framework (React, Vue, Angular, Svelte), its version, and the rendering mode. If no framework is detected, it reports the page as vanilla HTML/CSS/JS.
Expand and collapse components in the tree to explore the hierarchy. Component names appear with their nesting depth indicated by indentation. Repeated components show an instance count.
Click any component in the tree to see its current props and state values in the details section below. For React: props, state, and hooks. For Vue: props, data, and computed properties.
Click any component to highlight its corresponding DOM element on the page with a colored border and semi-transparent overlay. Click an element on the page to locate it in the tree.
