Detektor komponent automaticky identifikuje, který frontendový framework web používá, a odhaluje jeho kompletní strom komponent. Zobrazte názvy komponent React, Vue, Angular a Svelte, jejich hodnoty props/state a hierarchii zanoření — vše z jednoho inspekčního panelu.
Přemýšleli jste někdy, na jakém frameworku je postavený konkrétní web? Nebo jste chtěli vidět, jak se komplexní uživatelské rozhraní rozpadá na jednotlivé komponenty? Component Detector odpoví na obě otázky okamžitě. Prohledá stránku a hledá signatury specifické pro jednotlivé frameworky (React fiber uzly, instance komponent Vue, značky zón Angularu, metadata komponent Svelte) a identifikuje framework, jeho verzi i kompletní strom komponent. U Reactu a Vue jde ještě dál – zobrazí i props a hodnoty state, takže pochopíte, jaká data pohánějí jednotlivé části rozhraní.
Kliknutím na libovolnou komponentu ve stromu zvýrazníte odpovídající prvek DOM na stránce, nebo naopak kliknutím na prvek na stránce najdete jeho komponentu ve stromu. Je to podobné jako React DevTools nebo Vue DevTools, ale zabudované přímo do stránky jako odlehčený plovoucí panel, který funguje bez nutnosti instalovat samostatné rozšíření pro každý framework zvlášť.
Detekce funguje i na minifikovaných produkčních buildech, kde jsou názvy komponent a proměnných znečitelněny – nástroj totiž hledá strukturální signatury místo toho, aby spoléhal na čitelný zdrojový kód, a proto funguje i na webech, které nikdy nenasadily source mapu. Kromě čtyř hlavních frameworků rozpoznává i meta-frameworky postavené nad nimi, jako Next.js nebo Nuxt, a hlásí je jako samostatnou vrstvu, odděleně od podkladového Reactu nebo Vue runtime. Díky tomu je to rychlý první krok, kdykoli narazíte na neznámou codebase nebo web konkurence a potřebujete si udělat obrázek dřív, než se pustíte hlouběji.
Automaticky detekuje React (včetně Next.js, Gatsby, Remix), Vue (včetně Nuxt), Angular, Svelte (včetně SvelteKit), Preact, Solid a další frameworky. Zobrazuje název frameworku, přesné číslo verze a režim vykreslování (client-side, SSR nebo hybridní).
Vykresluje kompletní hierarchii komponent v sbalitelném stromovém zobrazení. Uvidíte, jak komponenta App nejvyšší úrovně obsahuje Navbar, který obsahuje NavLinks, které obsahují jednotlivé komponenty Link. Hloubka zanoření a vztahy rodič-potomek jsou křišťálově jasné.
U komponent React a Vue zobrazte aktuální hodnoty props a state předávané každé komponentě. Uvidíte, že komponenta Dashboard přijímá title="Přehled", loading=false a columns=2. Neocenitelné pro pochopení toku dat.
Kliknutím na libovolnou komponentu v panelu stromu zvýrazníte její odpovídající DOM prvek na stránce barevným překrytím. Nebo klikněte na libovolný prvek na stránce a najděte a vyberte jeho nadřazenou komponentu ve stromu. Navigujte v libovolném směru, který je přirozený.
Zobrazte celkový počet komponent vykreslených na stránce, kolik je jedinečných vs opakovaných instancí a které komponenty se vyskytují nejčastěji. Užitečné pro pochopení složitosti stránky a identifikaci vzorů opakovaného použití.
Detekuje frameworky i na minifikovaných produkčních buildech. React fiber strom, Vue __vue__ markery a Angular ng atributy přetrvávají v produkčním režimu — Detektor komponent je čte bez ohledu na konfiguraci buildu.
Navštivte libovolný web a okamžitě zjistěte, zda je postaven s React, Vue, Angular nebo Svelte — včetně přesné verze. Kombinujte se Site Stack pro kompletní technologický audit zahrnující CDN, analytiku a informace o CMS.
Studujte, jak produkční aplikace rozkládají své uživatelské rozhraní na komponenty. Uvidíte, jak Stripe strukturuje svoji stránku s cenami, jak Linear organizuje svůj dashboard nebo jak jakákoli dobře postavená aplikace odděluje rozvržení, navigaci a obsah do komponent.
Komponenta se nevykresluje správně? Prozkoumejte její props a state a zjistěte, jaká data skutečně přijímá. Porovnejte očekávané hodnoty se skutečnými hodnotami a identifikujte, kde se tok dat přerušuje — bez příkazů console.log.
Připravujete se na frontendový pohovor? Procházejte produkční weby a sledujte vzory komponent z reálného světa — rozdělení kontejner/prezentační, použití render props, poskytovatelé kontextu a HOC obaly jsou všechny viditelné ve stromu komponent.
Navštivte podobné produkty postavené s různými frameworky a porovnejte jejich struktury komponent. Uvidíte, jak aplikace React vs Vue přistupuje ke stejnému vzoru uživatelského rozhraní — navigace, formuláře, datové tabulky, modální okna — a pochopte architektonické rozdíly.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Detektoru komponent. Nástroj prohledá DOM stránky hledáním markery specifickými pro framework a sestaví strom komponent.
Záhlaví panelu zobrazuje detekovaný framework (React, Vue, Angular, Svelte), jeho verzi a režim vykreslování. Pokud není detekován žádný framework, hlásí stránku jako vanilla HTML/CSS/JS.
Rozbalujte a sbalujte komponenty ve stromu pro prozkoumání hierarchie. Názvy komponent se zobrazují s hloubkou zanoření znázorněnou odsazením. Opakující se komponenty zobrazují počet instancí.
Kliknutím na libovolnou komponentu ve stromu zobrazíte její aktuální hodnoty props a state v sekci podrobností níže. Pro React: props, state a hooky. Pro Vue: props, data a computed vlastnosti.
Kliknutím na libovolnou komponentu zvýrazníte její odpovídající DOM prvek na stránce barevným ohraničením a poloprůhledným překrytím. Klikněte na prvek na stránce a lokalizujte ho ve stromu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
