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ś, w jakim frameworku zbudowana jest dana strona? Albo chciałeś zobaczyć, jak złożony interfejs jest podzielony na komponenty? Component Detector odpowiada na oba pytania natychmiast. Skanuje stronę w poszukiwaniu sygnatur charakterystycznych dla poszczególnych frameworków (węzły fiber Reacta, instancje komponentów Vue, znaczniki stref Angulara, metadane komponentów Svelte) i identyfikuje framework, jego wersję oraz pełne drzewo komponentów. W przypadku Reacta i Vue idzie jeszcze dalej — pokazuje propsy i wartości stanu komponentów, dzięki czemu rozumiesz, jakie dane napędzają każdy fragment interfejsu.
Kliknij dowolny komponent w drzewie, aby podświetlić odpowiadający mu element DOM na stronie, albo kliknij element na stronie, aby zlokalizować jego komponent w drzewie. To jak React DevTools czy Vue DevTools, ale wbudowane bezpośrednio w stronę jako lekki, pływający panel, który działa bez konieczności instalowania osobnego rozszerzenia dla każdego frameworka, z jakim się zetkniesz.
Wykrywanie działa nawet na zminifikowanych, zbudowanych produkcyjnie stronach, gdzie nazwy komponentów i zmiennych zostały zaciemnione — narzędzie szuka sygnatur strukturalnych zamiast polegać na czytelnym kodzie źródłowym, dlatego działa również na stronach, które nigdy nie opublikowały source mapy. Poza czterema głównymi frameworkami rozpoznaje też nadbudowane nad nimi meta-frameworki, takie jak Next.js czy Nuxt, i raportuje je jako osobną warstwę, odrębną od bazowego środowiska uruchomieniowego Reacta czy Vue. Dzięki temu jest to szybki pierwszy krok za każdym razem, gdy trafiasz na nieznaną bazę kodu lub stronę konkurencji i musisz zrozumieć, z czym masz do czynienia, zanim zagłębisz się dalej.
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 64 narzędzi programistycznych dla swojej przeglądarki.
