Detektor komponentov automaticky identifikuje, aký frontend framework webová stránka používa a odhalí kompletný strom komponentov.
Zaujímalo vás niekedy, na akom frameworku je postavená konkrétna webová stránka? Alebo ste chceli vidieť, ako je zložité UI rozdelené na jednotlivé komponenty? Component Detector odpovie na obe otázky okamžite. Prehľadá stránku a hľadá signatúry špecifické pre jednotlivé frameworky (React fiber uzly, inštancie Vue komponentov, Angular zone markery, metadáta Svelte komponentov) a identifikuje framework, jeho verziu aj kompletný strom komponentov. Pri React a Vue ide ešte ďalej — zobrazuje aj props a hodnoty state, takže presne viete, aké dáta poháňajú jednotlivé časti UI.
Kliknutím na ktorýkoľvek komponent v strome zvýrazníte príslušný DOM prvok na stránke, alebo kliknutím na prvok na stránke nájdete jeho komponent v strome. Je to podobné ako React DevTools alebo Vue DevTools, len je to zabudované priamo do stránky ako ľahký plávajúci panel, ktorý funguje bez toho, aby ste si pre každý projekt inštalovali samostatné rozšírenie viazané na konkrétny framework.
Detekcia funguje aj na minifikovaných, produkčne zbalených stránkach, kde sú názvy komponentov a premenných zámerne pozmenené — nástroj totiž hľadá štrukturálne signatúry namiesto toho, aby sa spoliehal na čitateľný zdrojový kód, a preto funguje aj na stránkach, ktoré nikdy nezverejnili source mapu. Okrem štyroch hlavných frameworkov rozpoznáva aj meta-frameworky postavené na nich, ako Next.js a Nuxt, a hlási ich ako samostatnú vrstvu odlíšenú od podkladového React či Vue runtime. Vďaka tomu je to rýchly prvý krok vždy, keď sa dostanete na neznámy kód alebo stránku konkurencie a potrebujete pochopiť, na čo sa vlastne pozeráte, skôr než sa pustíte hlbšie.
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.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.
