El Detector de components identifica automàticament quin entorn de treball (framework) de frontend utilitza un lloc web i revela el seu arbre de components complet. Mira els noms dels components de React, Vue, Angular i Svelte, els seus valors de props/estat i la jerarquia de niuament — tot des d'un únic panell d'inspecció.
T'has preguntat mai amb quin framework està construït un lloc web? O has volgut veure com una interfície d'usuari complexa es descompon en components? El Detector de components respon a ambdues preguntes a l'instant. Escaneja la pàgina a la recerca de signatures específiques dels frameworks (nodes fiber de React, instàncies de components de Vue, marcadors de zona d'Angular, metadades de components de Svelte) i identifica el framework, la seva versió i l'arbre de components complet. Per a React i Vue, va més enllà — mostrant les props dels components i els valors d'estat perquè puguis entendre quines dades impulsen cada peça de la interfície. Fes clic a qualsevol component de l'arbre per ressaltar l'element DOM corresponent a la pàgina, o fes clic a un element de la pàgina per localitzar el seu component a l'arbre. És com les React DevTools o les Vue DevTools, però integrat a la teva pàgina com un panell flotant lleuger.
Detecta automàticament React (incloent Next.js, Gatsby, Remix), Vue (incloent Nuxt), Angular, Svelte (incloent SvelteKit), Preact, Solid i altres frameworks. Mostra el nom del framework, el número de versió exacte i el mode de renderització (al costat del client, SSR o híbrid).
Renderitza la jerarquia completa de components en una vista d'arbre col·lapsable. Mira com el component App de nivell superior conté una Navbar, que conté NavLinks, que contenen components Link individuals. La profunditat de niuament i les relacions pare-fill són totalment clares.
Per als components de React i Vue, visualitza les props actuals i els valors d'estat passats a cada component. Mira com el component Dashboard rep title="Overview", loading=false i columns=2. Inestimable per entendre el flux de dades.
Fes clic a qualsevol component del panell de l'arbre per ressaltar el seu element DOM corresponent a la pàgina amb una superposició de color. O clica qualsevol element de la pàgina per trobar i seleccionar el seu component pare a l'arbre. Navega en la direcció que et resulti més natural.
Consulta el nombre total de components renderitzats a la pàgina, quants són instàncies úniques vs repetides i quins components apareixen amb més freqüència. Útil per entendre la complexitat de la pàgina i identificar patrons de reutilització.
Detecta frameworks fins i tot en compilacions de producció minificades. L'arbre fiber de React, els marcadors __vue__ de Vue i els atributs ng d'Angular persisteixen en mode de producció — el Detector de components els llegeix independentment de la configuració de la compilació.
Visita qualsevol lloc web i saps a l'instant si està construït amb React, Vue, Angular o Svelte — incloent-hi la versió exacta. Combina-ho amb Site Stack per a una auditoria tecnològica completa que inclogui informació sobre CDN, analítica i CMS.
Estudia com les aplicacions de producció descomponen la seva interfície en components. Mira com Stripe estructura la seva pàgina de preus, com Linear organitza el seu tauler o com qualsevol aplicació ben construïda separa el disseny, la navegació i el contingut en components.
Un component no es renderitza correctament? Inspecciona les seves props i estat per veure quines dades està rebent realment. Compara els valors esperats amb els reals per identificar on es trenca el flux de dades — sense instruccions console.log.
T'estàs preparant per a una entrevista de frontend? Navega pels llocs de producció per veure patrons de components del món real — divisions contenidor/presentació, ús de render props, proveïdors de context i embolcalls HOC, tot és visible a l'arbre de components.
Visita productes similars construïts amb diferents frameworks i compara les seves estructures de components. Mira com una aplicació de React vs una aplicació de Vue aborden el mateix patró d'interfície — navegació, formularis, taules de dades, modals — i entén les diferències arquitectòniques.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Detector de components. L'eina escaneja el DOM de la pàgina a la recerca de marcadors específics de frameworks i construeix l'arbre de components.
La capçalera del panell mostra el framework detectat (React, Vue, Angular, Svelte), la seva versió i el mode de renderització. Si no es detecta cap framework, informa de la pàgina com a HTML/CSS/JS pur.
Expandeix i col·lapsa els components de l'arbre per explorar la jerarquia. Els noms dels components apareixen amb la seva profunditat de niuament indicada pel sagnat. Els components repetits mostren un recompte d'instàncies.
Fes clic a qualsevol component de l'arbre per veure les seves props actuals i valors d'estat a la secció de detalls de sota. Per a React: props, estat i hooks. Per a Vue: props, dades (data) i propietats computades.
Fes clic a qualsevol component per ressaltar l'element DOM corresponent a la pàgina amb una vora de color i una superposició semitransparent. Clica un element a la pàgina per localitzar-lo a l'arbre.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
