Component Detector automatski prepoznaje koji frontend framework web stranica koristi i otkriva njezino cjelokupno stablo komponenti. Vidite nazive React, Vue, Angular i Svelte komponenti, vrijednosti njihovih props/state i hijerarhiju ugniježđenja — sve iz jedne inspekcijske ploče.
Jeste li se ikada pitali s kojim je frameworkom izrađena neka web stranica? Ili poželjeli vidjeti kako je složeno sučelje raščlanjeno na komponente? Component Detector odmah odgovara na oba pitanja. Skenira stranicu tražeći potpise specifične za pojedini framework (React fiber čvorove, Vue instance komponenata, Angular zone markere, Svelte metapodatke komponenata) i prepoznaje framework, njegovu verziju i cjelokupno stablo komponenata. Za React i Vue ide i korak dalje — prikazuje propse komponenata i vrijednosti statea, tako da možete razumjeti koji podaci pokreću pojedini dio sučelja.
Kliknite bilo koju komponentu u stablu kako biste istaknuli odgovarajući DOM element na stranici, ili kliknite element na stranici kako biste pronašli njegovu komponentu u stablu. To je poput React DevToolsa ili Vue DevToolsa, ali ugrađeno izravno u vašu stranicu kao lagani plutajući panel koji radi bez instaliranja zasebnog ekstenzije specifičnog za framework za svaki projekt koji pregledavate.
Detekcija radi čak i na minificiranim, produkcijskim buildovima stranica gdje su nazivi komponenata i varijabli izmiješani i nečitljivi — alat traži strukturne potpise umjesto da se oslanja na čitljiv izvorni kod, zbog čega nastavlja raditi na stranicama koje nikada nisu objavile source mapu. Osim četiri glavna frameworka, prepoznaje i meta-frameworke izgrađene na njima, poput Next.js i Nuxt, te ih prijavljuje kao zaseban sloj odvojen od temeljnog React ili Vue runtimea. Zbog toga je ovo brz prvi korak kad god naiđete na nepoznatu bazu koda ili stranicu konkurencije i trebate razumjeti s čime se suočavate prije nego što zaronite dublje.
Automatski otkriva React (uključujući Next.js, Gatsby, Remix), Vue (uključujući Nuxt), Angular, Svelte (uključujući SvelteKit), Preact, Solid i ostale frameworke. Prikazuje naziv frameworka, točan broj verzije i način renderiranja (klijentski, SSR ili hibridni).
Prikazuje cjelokupnu hijerarhiju komponenti u skupivom prikazu stabla. Vidite kako komponenta App na najvišoj razini sadrži Navbar, koji sadrži NavLinks, koji sadrže pojedinačne Link komponente. Dubina ugniježđenja i odnosi roditelja i djeteta savršeno su jasni.
Za React i Vue komponente pregledajte trenutne vrijednosti props i state proslijeđene svakoj komponenti. Vidite da komponenta Dashboard prima title="Overview", loading=false i columns=2. Neprocjenjivo za razumijevanje toka podataka.
Kliknite bilo koju komponentu u ploči stabla kako biste istaknuli njezin odgovarajući DOM element na stranici obojenim prekrivačem. Ili kliknite bilo koji element na stranici kako biste pronašli i odabrali njezinu nadređenu komponentu u stablu. Navigirajte u smjeru koji vam je prirodan.
Vidite ukupan broj komponenti prikazanih na stranici, koliko ih je jedinstvenih nasuprot ponavljajućih instanci i koje se komponente pojavljuju najčešće. Korisno za razumijevanje složenosti stranice i prepoznavanje obrazaca ponovne upotrebe.
Otkriva frameworke čak i na minificiranim produkcijskim buildovima. React-ovo fiber stablo, Vue-ovi __vue__ markeri i Angular-ovi ng atributi ostaju u produkcijskom načinu — Component Detector ih čita bez obzira na konfiguraciju builda.
Posjetite bilo koju web stranicu i odmah saznajte je li izgrađena s React-om, Vue-om, Angular-om ili Svelte-om — uključujući točnu verziju. Kombinirajte sa Site Stack za potpunu reviziju tehnologije uključujući CDN, analitiku i CMS informacije.
Proučavajte kako produkcijske aplikacije rastavljaju korisničko sučelje na komponente. Vidite kako Stripe strukturira svoju stranicu s cijenama, kako Linear organizira svoju nadzornu ploču ili kako bilo koja dobro izgrađena aplikacija razdvaja raspored, navigaciju i sadržaj u komponente.
Komponenta se ne prikazuje ispravno? Pregledajte njezine props i state kako biste vidjeli koje podatke zapravo prima. Usporedite očekivane vrijednosti sa stvarnim kako biste identificirali gdje tok podataka puca — bez console.log naredbi.
Pripremate se za frontend intervju? Pregledajte produkcijske stranice kako biste vidjeli stvarne obrasce komponenti — podjele container/presentational, upotreba render prop, context provideri i HOC omotači svi su vidljivi u stablu komponenti.
Posjetite slične proizvode izgrađene s različitim frameworkima i usporedite njihove strukture komponenti. Vidite kako React aplikacija nasuprot Vue aplikaciji pristupa istom UI obrascu — navigacija, forme, tablice podataka, modalni prozori — i razumijte arhitektonske razlike.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Component Detectora. Alat skenira DOM stranice tražeći markere specifične za framework i gradi stablo komponenti.
Zaglavlje ploče prikazuje otkriveni framework (React, Vue, Angular, Svelte), njegovu verziju i način renderiranja. Ako nije otkriven nijedan framework, stranica se prikazuje kao vanilla HTML/CSS/JS.
Proširujte i skupljajte komponente u stablu kako biste istražili hijerarhiju. Nazivi komponenti pojavljuju se s dubinom ugniježđenja naznačenom uvlačenjem. Ponavljajuće komponente prikazuju broj instanci.
Kliknite bilo koju komponentu u stablu kako biste vidjeli njezine trenutne vrijednosti props i state u odjeljku s pojedinostima ispod. Za React: props, state i hooks. Za Vue: props, data i computed properties.
Kliknite bilo koju komponentu kako biste istaknuli njezin odgovarajući DOM element na stranici obojenim rubom i poluprovidnim prekrivačem. Kliknite element na stranici kako biste ga pronašli u stablu.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
