Il Rilevatore componenti identifica automaticamente quale framework frontend usa un sito e rivela l'albero completo dei componenti.
Ti sei mai chiesto con quale framework è costruito un sito web? O hai voluto vedere come un'interfaccia complessa si scompone in componenti? Component Detector risponde a entrambe le domande all'istante. Analizza la pagina alla ricerca di firme specifiche dei framework (fiber node di React, istanze di componenti Vue, marcatori di zone Angular, metadati dei componenti Svelte) e identifica il framework, la sua versione e l'intero albero dei componenti. Per React e Vue va oltre — mostrando props e valori di stato dei componenti, così puoi capire quali dati alimentano ogni parte dell'interfaccia.
Clicca su qualsiasi componente nell'albero per evidenziare l'elemento DOM corrispondente nella pagina, oppure clicca su un elemento della pagina per individuare il suo componente nell'albero. È come React DevTools o Vue DevTools, ma integrato direttamente nella pagina come un leggero pannello fluttuante, senza dover installare un'estensione specifica per framework per ogni progetto che esamini.
Il rilevamento funziona anche su siti minificati e ottimizzati per la produzione, dove i nomi di componenti e variabili sono stati offuscati — lo strumento cerca firme strutturali invece di affidarsi a codice sorgente leggibile, motivo per cui continua a funzionare su siti che non hanno mai pubblicato una source map. Oltre ai quattro framework principali, riconosce anche i meta-framework costruiti sopra di essi, come Next.js e Nuxt, segnalandoli come livello separato rispetto al runtime React o Vue sottostante. Questo lo rende il primo passo più rapido ogni volta che ti trovi davanti a una codebase sconosciuta o al sito di un concorrente e devi capire cosa hai di fronte prima di approfondire.
Rileva React, Vue, Angular, Svelte, Preact, Solid e altri framework con numero di versione esatto.
Mostra la gerarchia completa dei componenti in una vista ad albero comprimibile.
Per React e Vue, visualizza i valori correnti di props e state di ogni componente.
Clicca qualsiasi componente nell'albero per evidenziare l'elemento DOM corrispondente sulla pagina.
Vedi il numero totale di componenti, quanti sono unici e quali appaiono più frequentemente.
Rileva framework anche su build di produzione minificate.
Visita qualsiasi sito e scopri istantaneamente se usa React, Vue, Angular o Svelte.
Studia come le applicazioni in produzione scompongono la loro UI in componenti.
Un componente non si renderizza correttamente? Ispeziona i suoi props e state.
Ti prepari per un colloquio frontend? Naviga siti in produzione per vedere pattern di componenti reali.
Visita prodotti simili costruiti con framework diversi e confronta le strutture dei componenti.
Apri il dock di DevSuite Pro e clicca sull'icona Rilevatore componenti.
L'header del pannello mostra framework rilevato, versione e modalità di rendering.
Espandi e comprimi componenti nell'albero per esplorare la gerarchia.
Clicca su qualsiasi componente per vederne i valori correnti di props e state.
Clicca su un componente per evidenziare l'elemento DOM corrispondente.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
