ComponentLocator
Dal browser al codice, in un clic.
Un'estensione per Chrome e Firefox per chi sviluppa interfacce web: passa il mouse sulla tua app, scopri subito quale componente stai guardando e aprilo nel tuo editor con un semplice Alt+clic. Riconosce da sola il framework che usi. Basta cercare i file a mano.
- Next.js
- React
- Vue
- Svelte
- Astro
- Zero configurazione
- Nessun dato raccolto
Come funziona
1. Tieni premuto Alt
Mentre la tua app gira in locale, tieni premuto Alt e muovi il mouse: ogni elemento ti mostra il componente che lo disegna.
2. Alt+clic
Il file si apre nel tuo editor, già alla riga giusta. Niente ricerche tra le cartelle, niente grep.
3. Torna a creare
Non c'è nulla da configurare né da aggiungere al progetto: installi l'estensione e funziona.
Perché ti serve
Quanto tempo passi a chiederti «ma questo bottone in che file sta?». Su un progetto grande, trovare il componente giusto è spesso più lento che sistemarlo.
ComponentLocator elimina il problema alla radice: quello che vedi nel browser diventa la porta d'ingresso al tuo codice. Riconosce da solo il framework del progetto — Next.js, React, Vue, Svelte o Astro — e funziona anche con le versioni più recenti, dove gli strumenti storici hanno smesso di farlo.
Arrivi da un altro strumento click-to-component?
Se hai già usato uno strumento click-to-component conosci il gesto: clic su un elemento, salto al sorgente. ComponentLocator è l'alternativa moderna, pensata per gli stack di oggi: funziona con le versioni più recenti di React e Next.js (App Router compreso) e riconosce anche i componenti renderizzati lato server, dove gli strumenti storici si fermano.
Niente da aggiungere al progetto: nessun plugin, nessuna dipendenza, nessuna configurazione. E su Windows gestisce da sola i percorsi con parentesi dei segmenti dinamici e dei route group di Next.js, dove il protocollo del dev server si arrende.
Un solo strumento per Next.js, React, Vue, Svelte e Astro: l'estensione capisce da sola con quale framework stai lavorando.
Cosa lo rende utile
Trova all'istante
Dal pixel al file sorgente in un clic: mai più caccia al componente tra decine di cartelle.
Zero configurazione
Installi e usi: si aggancia da solo all'editor che hai già configurato per il tuo progetto.
Tutti i tuoi framework
Riconosce automaticamente Next.js, React, Vue, Svelte e Astro: un solo strumento per tutti i progetti, anche i più recenti dove gli altri si fermano.
Vede anche il server
Riconosce i componenti renderizzati lato server e te li segnala con un'etichetta dedicata.
Privacy totale
Lavora solo sul tuo computer, sulla tua app in sviluppo: non raccoglie e non invia alcun dato.
A modo tuo
Preferisci un altro tasto o un altro editor? Li scegli in due clic dalle impostazioni.
Funziona col tuo editor
Nessun setup: apre i file nell'editor che usi già. Supporto immediato per:
- VS Code
- Cursor
- Windsurf
- JetBrains / WebStorm
Buono a sapersi
Windows, Next.js e percorsi con parentesi
Su Windows il dev server di Next.js si rifiuta di aprire i file il cui percorso contiene parentesi quadre o tonde — cioè i segmenti dinamici e i route group, come app/[id]/(dashboard)/page.tsx — e lo segnala solo nel terminale. ComponentLocator aggira il problema da solo: riconosce il caso e apre il file direttamente nell'editor (vscode:// di default), ricavando il percorso del progetto in automatico. Se non ci riesce, ti avvisa: basta impostare il project root o un «Custom editor URL» nelle impostazioni.
Privacy
ComponentLocator funziona esclusivamente in locale, sulla tua app in sviluppo: nessun dato raccolto, nessun tracciamento, niente che lasci il tuo browser.
Leggi la privacy policy dell'estensione