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 koji framework koristi neka web stranica? Ili ste željeli vidjeti kako se složeno korisničko sučelje rastavlja na komponente? Component Detector na oba pitanja odgovara trenutačno. Skenira stranicu tražeći potpise specifične za framework (React fiber čvorovi, Vue instance komponenti, Angular zone markeri, Svelte metapodaci komponenti) i identificira framework, njegovu verziju i cjelokupno stablo komponenti. Za React i Vue ide dalje — prikazuje vrijednosti props i state komponenti kako biste razumjeli koji podaci pokreću svaki dio korisničkog 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. Kao React DevTools ili Vue DevTools, ali ugrađen u vašu stranicu kao lagana plutajuća ploča.
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 39+ razvojnih alata za svoj preglednik.
