Detector Componente identifică automat ce framework frontend folosește un site și dezvăluie arborele complet de componente. Vizualizează numele componentelor React, Vue, Angular și Svelte, valorile props/state și ierarhia de imbricare — toate dintr-un singur panou de inspecție.
Ți-ai dorit vreodată să știi cu ce framework este construit un site? Sau ai vrut să vezi cum este descompusă o interfață complexă în componente? Detector Componente răspunde la ambele întrebări instantaneu. Scanează pagina după semnături specifice framework-ului (noduri fiber React, instanțe de componente Vue, markeri Angular zone, metadate componente Svelte) și identifică framework-ul, versiunea sa și arborele complet de componente. Pentru React și Vue, merge mai departe — arătând valorile props și state ale componentelor pentru ca tu să înțelegi ce date determină fiecare parte a interfeței. Apasă pe orice componentă din arbore pentru a evidenția elementul DOM corespunzător pe pagină, sau apasă pe un element de pe pagină pentru a localiza componenta sa în arbore. Este ca React DevTools sau Vue DevTools, dar integrat în pagina ta ca un panou flotant ușor.
Detectează React (inclusiv Next.js, Gatsby, Remix), Vue (inclusiv Nuxt), Angular, Svelte (inclusiv SvelteKit), Preact, Solid și alte framework-uri automat. Afișează numele framework-ului, numărul exact al versiunii și modul de randare (client-side, SSR sau hibrid).
Redă ierarhia completă a componentelor într-o vizualizare arbore reductibilă. Vezi cum componenta App de la nivel superior conține un Navbar, care conține NavLinks, care conțin componente individuale Link. Adâncimea imbricării și relațiile părinte-copil sunt perfect clare.
Pentru componentele React și Vue, vizualizează valorile curente ale props și state transmise fiecărei componente. Vezi că componenta Dashboard primește title="Overview", loading=false și columns=2. Extrem de valoros pentru înțelegerea fluxului de date.
Apasă pe orice componentă din panoul arbore pentru a evidenția elementul DOM corespunzător pe pagină cu o suprapunere colorată. Sau apasă pe orice element de pe pagină pentru a găsi și selecta componenta sa părinte din arbore. Navighează în oricare direcție ți se pare naturală.
Vezi numărul total de componente redate pe pagină, câte sunt unice față de instanțe repetate și care componente apar cel mai frecvent. Util pentru înțelegerea complexității paginii și identificarea modelelor de reutilizare.
Detectează framework-urile chiar și pe build-uri de producție minificate. Arborele fiber al React, markerii __vue__ ai Vue și atributele ng ale Angular persistă în modul de producție — Detector Componente le citește indiferent de configurația de build.
Vizitează orice site și află instantaneu dacă este construit cu React, Vue, Angular sau Svelte — inclusiv versiunea exactă. Combină cu Site Stack pentru un audit tehnologic complet, inclusiv CDN, analiză și informații CMS.
Studiezi cum descompun aplicațiile de producție interfața în componente. Vezi cum Stripe își structurează pagina de prețuri, cum Linear își organizează dashboard-ul, sau cum orice aplicație bine construită separă layout-ul, navigarea și conținutul în componente.
O componentă nu se randează corect? Inspectează props și state pentru a vedea ce date primește efectiv. Compară valorile așteptate cu cele reale pentru a identifica unde se rupe fluxul de date — fără instrucțiuni console.log.
Te pregătești pentru un interviu frontend? Navighează site-uri de producție pentru a vedea modele reale de componente — separările container/prezentare, utilizarea render prop, furnizorii context și wrapper-ele HOC sunt toate vizibile în arborele de componente.
Vizitează produse similare construite cu framework-uri diferite și compară structurile lor de componente. Vezi cum o aplicație React față de o aplicație Vue abordează același model de interfață — navigare, formulare, tabele de date, modale — și înțelege diferențele arhitecturale.
Deschide dock-ul flotant DevSuite Pro și apasă pe iconița Detector Componente. Instrumentul scanează DOM-ul paginii după markeri specifici framework-ului și construiește arborele de componente.
Antetul panoului arată framework-ul detectat (React, Vue, Angular, Svelte), versiunea sa și modul de randare. Dacă nu este detectat niciun framework, raportează pagina ca HTML/CSS/JS vanilla.
Extinde și restrânge componentele din arbore pentru a explora ierarhia. Numele componentelor apar cu adâncimea lor de imbricare indicată prin indentare. Componentele repetate afișează un număr de instanțe.
Apasă pe orice componentă din arbore pentru a-i vedea valorile curente ale props și state în secțiunea de detalii de mai jos. Pentru React: props, state și hooks. Pentru Vue: props, data și proprietăți computed.
Apasă pe orice componentă pentru a evidenția elementul DOM corespunzător pe pagină cu un contur colorat și o suprapunere semi-transparentă. Apasă pe un element de pe pagină pentru a-l localiza în arbore.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
