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, s jakým frameworkem je web postaven? Nebo jste chtěli vidět, jak je komplexní uživatelské rozhraní rozloženo na komponenty? Detektor komponent odpoví na obě otázky okamžitě. Prohledá stránku hledáním pro framework specifických signatur (React fiber uzly, Vue instance komponent, Angular zone markery, Svelte metadata komponent) a identifikuje framework, jeho verzi a kompletní strom komponent. Pro React a Vue jde dále — zobrazuje hodnoty props a state komponent, takže pochopíte, jaká data pohánějí každou část uživatelského rozhraní. Kliknutím na libovolnou komponentu ve stromu zvýrazníte odpovídající DOM prvek na stránce, nebo klikněte na prvek na stránce a najděte jeho komponentu ve stromu. Je to jako React DevTools nebo Vue DevTools, ale zabudované do stránky jako lehký plovoucí panel.
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 39+ vývojářských nástrojů pro svůj prohlížeč.
