Detektor komponentów automatycznie identyfikuje, jakiego frameworka frontendowego używa strona, i ujawnia jej kompletne drzewo komponentów. Zobacz nazwy komponentów React, Vue, Angular i Svelte, ich wartości props/state oraz hierarchię zagnieżdżeń — wszystko z jednego panelu inspekcji.
Zastanawiałeś się kiedyś, jakim frameworkiem zbudowano stronę? Albo chciałeś zobaczyć, jak złożony interfejs jest rozbity na komponenty? Detektor komponentów natychmiast odpowiada na oba pytania. Skanuje stronę w poszukiwaniu sygnatur charakterystycznych dla frameworków (węzły fiber Reacta, instancje komponentów Vue, znaczniki zone Angulara, metadane komponentów Svelte) i identyfikuje framework, jego wersję i kompletne drzewo komponentów. Dla Reacta i Vue idzie dalej — pokazuje wartości props i state komponentów, abyś mógł zrozumieć, jakie dane napędzają każdy element interfejsu. Kliknij dowolny komponent w drzewie, aby podświetlić odpowiadający element DOM na stronie, lub kliknij element na stronie, aby zlokalizować jego komponent w drzewie. To jak React DevTools lub Vue DevTools, ale wbudowane w twoją stronę jako lekki pływający panel.
Automatycznie wykrywa React (w tym Next.js, Gatsby, Remix), Vue (w tym Nuxt), Angular, Svelte (w tym SvelteKit), Preact, Solid i inne frameworki. Pokazuje nazwę frameworka, dokładny numer wersji i tryb renderowania (klient, SSR lub hybrydowy).
Renderuje kompletną hierarchię komponentów w zwijanym widoku drzewa. Zobacz, jak najwyższego poziomu komponent App zawiera Navbar, który zawiera NavLinks, które zawierają pojedyncze komponenty Link. Głębokość zagnieżdżenia i relacje rodzic-dziecko są krystalicznie czyste.
Dla komponentów React i Vue, przeglądaj bieżące wartości props i state przekazywane do każdego komponentu. Zobacz, że komponent Dashboard otrzymuje title="Overview", loading=false i columns=2. Nieocenione dla zrozumienia przepływu danych.
Kliknij dowolny komponent w panelu drzewa, aby podświetlić odpowiadający element DOM na stronie kolorową nakładką. Lub kliknij dowolny element na stronie, aby znaleźć i wybrać jego komponent nadrzędny w drzewie. Poruszaj się w dowolnym naturalnym kierunku.
Zobacz łączną liczbę komponentów wyrenderowanych na stronie, ile z nich jest unikalnych vs powtórzonych instancji i które komponenty pojawiają się najczęściej. Przydatne do zrozumienia złożoności strony i identyfikacji wzorców ponownego użycia.
Wykrywa frameworki nawet na zminifikowanych buildach produkcyjnych. Drzewo fiber Reacta, znaczniki __vue__ Vue i atrybuty ng Angulara pozostają w trybie produkcyjnym — Detektor komponentów odczytuje je niezależnie od konfiguracji build.
Odwiedź dowolną stronę i natychmiast dowiedz się, czy jest zbudowana z React, Vue, Angular czy Svelte — w tym dokładną wersję. Połącz z Site Stack, aby uzyskać kompletny audyt technologii, w tym informacje CDN, analytics i CMS.
Badanie, jak aplikacje produkcyjne rozkładają swój interfejs na komponenty. Zobacz, jak Stripe strukturyzuje swoją stronę cenową, jak Linear organizuje swój dashboard lub jak dowolna dobrze zbudowana aplikacja dzieli układ, nawigację i zawartość na komponenty.
Komponent nie renderuje się poprawnie? Sprawdź jego props i state, aby zobaczyć, jakie dane faktycznie otrzymuje. Porównaj oczekiwane wartości z rzeczywistymi, aby zidentyfikować, gdzie łamie się przepływ danych — bez instrukcji console.log.
Przygotowujesz się do rozmowy kwalifikacyjnej frontend? Przeglądaj produkcyjne strony, aby zobaczyć rzeczywiste wzorce komponentów — podziały container/presentational, użycie render prop, dostawcy kontekstu i opakowania HOC są widoczne w drzewie komponentów.
Odwiedź podobne produkty zbudowane z różnymi frameworkami i porównaj ich struktury komponentów. Zobacz, jak aplikacja React vs aplikacja Vue podchodzi do tego samego wzorca UI — nawigacja, formularze, tabele danych, modale — i zrozum różnice architektoniczne.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Detektora komponentów. Narzędzie skanuje DOM strony w poszukiwaniu znaczników frameworków i buduje drzewo komponentów.
Nagłówek panelu pokazuje wykryty framework (React, Vue, Angular, Svelte), jego wersję i tryb renderowania. Jeśli żaden framework nie zostanie wykryty, raportuje stronę jako czysty HTML/CSS/JS.
Rozwijaj i zwijaj komponenty w drzewie, aby eksplorować hierarchię. Nazwy komponentów pojawiają się z ich głębokością zagnieżdżenia wskazaną przez wcięcie. Powtarzające się komponenty pokazują licznik instancji.
Kliknij dowolny komponent w drzewie, aby zobaczyć jego bieżące wartości props i state w sekcji szczegółów poniżej. Dla React: props, state i hooki. Dla Vue: props, data i właściwości computed.
Kliknij dowolny komponent, aby podświetlić odpowiadający element DOM na stronie kolorową ramką i półprzezroczystą nakładką. Kliknij element na stronie, aby zlokalizować go w drzewie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
