Modifichi il CSS su un sito live, passi a un'altra pagina e tutte le modifiche spariscono. Frustrante? Decisamente sì. Il pannello Elementi di Chrome DevTools è ottimo per modifiche rapide a stili e markup, ma fino a poco tempo fa qualsiasi esperimento durava esattamente fino al primo F5. E tornare all'editor di codice, ricompilare e fare il deploy solo per testare un'ipotesi è una perdita di tempo che nessuno apprezza.

Per fortuna Chrome ha un meccanismo integrato che risolve questo problema. Si chiama Sostituzioni locali e permette di salvare le modifiche in locale in modo che il browser le applichi anche dopo aver ricaricato la pagina. La funzionalità è apparsa con Chrome 65, ma nel corso degli anni ha acquisito nuove capacità: ora puoi sovrascrivere non solo i file ma anche gli header di risposta HTTP e simulare richieste API direttamente dal browser.

In questa guida, dall'attivazione al tracciamento delle modifiche: tutto ciò che serve a uno sviluppatore per lavorare in modo produttivo con le sostituzioni locali.

💡 Panoramica rapida:

• Attiva le Sostituzioni locali nella scheda Sources e scegli una cartella dove salvare i file sovrascritti.
• Modifica CSS, JS o HTML nella scheda Sources, le modifiche vengono salvate automaticamente in locale.
• Ricarica la pagina o naviga su un'altra, Chrome continua ad applicare le tue modifiche.
• Tieni traccia delle differenze nella scheda Modifiche e gestisci i file tramite Sostituzioni.

Come attivare le sostituzioni locali

Apri DevTools (F12 o Ctrl+Shift+I) e vai alla scheda Sources. Nella parte sinistra del pannello trova la scheda Sostituzioni. Se non è visibile, clicca sull'icona >> per mostrare le schede nascoste.

Clicca il pulsante Seleziona cartella per le sostituzioni. Chrome chiederà il permesso di accedere al file system, scegli una cartella esistente o creane una nuova. È qui che verranno salvati tutti i file sovrascritti.

Dopo aver selezionato la cartella, la casella Attiva sostituzioni locali si attiverà automaticamente. Nota: nella scheda Network apparirà un'icona di avviso, segnala che alcune richieste di rete potrebbero essere intercettate e sostituite con versioni locali dei file. È normale e significa che le sostituzioni sono attive.

Come fare e salvare le modifiche

Ora la parte interessante, la modifica. Apri un file qualsiasi tramite la scheda Sources: trova il CSS o il JavaScript che ti serve nell'albero dei file a sinistra e fai doppio clic. Apporta le modifiche e premi Ctrl+S, il file verrà salvato nella tua cartella locale e Chrome inizierà a usare la versione locale al posto di quella del server.

Sfumatura importante: modifica il markup specificamente nella scheda Sources, non in Elementi. Il pannello Elementi è comodo per il lavoro visivo sul DOM, ma le modifiche HTML fatte lì non vengono salvate come sostituzioni locali. Passa a Sources, trova il file HTML che ti serve e modificalo lì, un punto viola accanto al nome del file confermerà che il file è stato sovrascritto.

Ricarica la pagina o naviga su un'altra, Chrome continuerà ad applicare le tue modifiche. Vuoi ripristinare l'originale? Elimina il file dalla cartella delle sostituzioni o deseleziona Attiva sostituzioni locali.

Vale la pena menzionare a parte la sovrascrittura degli header HTTP, una capacità aggiunta nelle versioni più recenti di Chrome. Vai alla scheda Network, clicca con il tasto destro su una richiesta e seleziona Sovrascrivi header. Chrome creerà un file .headers nella tua cartella locale dove puoi impostare header di risposta personalizzati. È prezioso per testare policy CORS, Content-Security-Policy e caching senza modifiche lato server.

Come tracciare le modifiche fatte

Quando sovrascrivi attivamente decine di file, è facile dimenticare cosa esattamente è stato cambiato e dove. Per questo DevTools offre due strumenti utili.

La scheda Sostituzioni (nel pannello Sources) mostra un elenco completo dei file sovrascritti raggruppati per domini. Da qui puoi aprire qualsiasi file per ulteriori modifiche o eliminare una sostituzione non necessaria, tasto destro → Elimina.

La scheda Modifiche si trova nella parte inferiore di DevTools, accanto alla scheda Console. Mostra il diff tra il file originale e la tua versione locale, riga per riga, come in Git. Comoda per un audit rapido: cosa hai cambiato esattamente in ogni file e quanto le modifiche differiscono dall'originale.

Consiglio rapido: prima di fare refactoring o esperimenti su un sito live, scatta un'istantanea delle modifiche tramite Modifiche, è il tuo "commit" locale a cui puoi sempre tornare.

Le sostituzioni come strumento di test delle performance

Oltre alla comoda prototipazione, le Sostituzioni locali aprono uno scenario interessante per l'analisi delle performance. Hai la possibilità di cambiare codice su un sito non locale e misurare immediatamente l'impatto di queste modifiche sulla velocità di caricamento e sul rendering.

Ad esempio, sospetti che uno script di analytics di terze parti stia rallentando il rendering della prima schermata. Sovrascrivi la richiesta, sostituisci lo script originale con un file vuoto o una versione differita ed esegui Lighthouse. La differenza nelle metriche mostrerà chiaramente se l'ottimizzazione è giustificata.

Un altro scenario: i font. Sovrascrivi il file CSS, rimuovendo @font-face per un font personalizzato, e verifica quanto cambia l'LCP (Largest Contentful Paint). Oppure sperimenta con l'ordine di caricamento degli script, sposta JS critico da <head> alla fine di <body> e confronta le metriche.

Harry Roberts e Umar Hansa, noti esperti di performance web, hanno pubblicato screencast con esempi chiari di questo approccio. Le loro dimostrazioni mostrano: le Sostituzioni locali trasformano il browser in un sandbox per ipotesi di performance dove ogni iterazione richiede secondi, non minuti.

Se lavori con un server di sviluppo locale, il valore delle sostituzioni è minore, controlli già i sorgenti. Ma quando devi testare rapidamente un'idea in produzione o sul sito di qualcun altro senza accesso al codebase, questo strumento è indispensabile.

⁉️🤔 Domande frequenti

Le sostituzioni locali vengono salvate dopo la chiusura del browser?

Sì, tutti i file sono archiviati nella cartella che hai scelto su disco. Dopo aver riavviato Chrome, le sostituzioni vengono riprese automaticamente, a condizione che la casella Attiva sostituzioni locali sia rimasta selezionata. I file stessi non spariscono da nessuna parte, poiché sono normali file nel tuo file system.

Posso sovrascrivere una risposta API (JSON), non solo file statici?

Sì, a partire da Chrome 117 funziona. Nella scheda Network, clicca con il tasto destro su una richiesta e seleziona Sovrascrivi contenuto, Chrome creerà un file locale con il corpo della risposta che puoi modificare. Alla richiesta successiva, il browser restituirà la tua versione locale invece della risposta del server.

Perché le mie modifiche fatte nel pannello Elementi si azzerano dopo il refresh?

Il pannello Elementi modifica il DOM in memoria, non i file sorgente. Per far sì che le modifiche sopravvivano a F5, passa alla scheda Sources, trova il file corrispondente e modificalo lì. Salva con Ctrl+S e Chrome creerà una sostituzione locale.

Come condivido le sostituzioni locali con un collega?

Basta inviare il contenuto della cartella delle sostituzioni. Il collega mette i file nella sua cartella, la specifica in DevTools tramite Seleziona cartella per le sostituzioni e tutte le modifiche si applicano sulla sua macchina. Per il lavoro in team è comodo tenere la cartella delle sostituzioni nel repository Git del progetto.

Posso usare le Sostituzioni locali in Firefox o altri browser?

Firefox non ha un analogo delle Sostituzioni locali, il salvataggio delle modifiche tra un ricaricamento e l'altro non è supportato. Edge, basato su Chromium, ha la stessa funzionalità di Chrome poiché utilizza il codebase comune di DevTools. Anche Brave e Opera supportano le sostituzioni in quanto browser Chromium.

Perché ti servono davvero le sostituzioni locali

Le Sostituzioni locali in Chrome DevTools non sono solo una "funzionalità comoda". Sono un modo per trasformare il browser in un ambiente completo per la prototipazione rapida e il test di ipotesi senza toccare il codice di produzione. Risparmi i cicli "modifica → build → deploy → verifica" e ottieni risultati immediati.

Prova subito: apri un sito qualsiasi, attiva le sostituzioni e cambia il colore di un titolo. Ricarica la pagina. Vedi che il colore è rimasto? Ecco qual era lo scopo di tutto questo.