Avete notato che continuate a copiare lo stesso JavaScript nella console dei DevTools più e più volte? Uno snippet di debug, l'estrazione di dati da una pagina, una rapida modifica del DOM, e ogni volta dovete digitarlo a mano o incollarlo da un blocco note.

Chrome DevTools dispone da diversi anni di un editor di snippet integrato direttamente nella scheda Sources. Scrivete lo script una volta, gli date un nome e lo eseguite su qualsiasi pagina con un solo clic o una scorciatoia. Funziona più velocemente di un bookmarklet e non richiede estensioni.

Percorreremo l'intero ciclo passo dopo passo: dall'apertura del pannello Snippets fino a esempi pratici pronti all'uso che potete fare vostri.

💡 Panoramica rapida:

• Aprite il pannello Snippets tramite la scheda Sources o il menu dei comandi
• Create un nuovo snippet e dategli un nome significativo
• Scrivete il JavaScript nell'editor di codice e salvate con Ctrl+S
• Eseguite lo snippet con il pulsante Run o tramite il menu dei comandi con !
• Esaminate esempi pratici: pulire una pagina, raccogliere dati, modificare stili

Cosa sono gli snippet e perché vi servono

Uno snippet è un frammento di JavaScript salvato direttamente in Chrome DevTools. A differenza del codice nella console, non scompare quando ricaricate la pagina o chiudete il browser; rimane nella scheda Sources in attesa di essere eseguito.

Il vantaggio principale rispetto alla console: uno snippet viene eseguito nel contesto della pagina corrente e ha pieno accesso al suo DOM, alle variabili e alle API. Potete scrivere uno script per estrarre dati da qualsiasi sito, modificare il layout o automatizzare attività ripetitive ed eseguirlo quando volete senza riscriverlo.

Un approccio alternativo sono i bookmarklet (segnalibri con javascript: nell'URL), ma sono limitati dalla lunghezza dell'URL e scomodi per codice su più righe. In Firefox l'equivalente era Scratchpad, ma è stato rimosso dal browser a partire dalla versione 70 e sostituito con l'editor multi-linea della console.

Guardate questo breve video tutorial sugli snippet; è in inglese, ma tutte le azioni sono mostrate a schermo e corrispondono esattamente ai passaggi descritti di seguito.

Ecco come si presenta un tipico flusso di lavoro con gli snippet: lo screenshot mostra la pagina originale a sinistra e il codice nell'editor a destra.

Il codice sorgente di questo esempio fa tre cose: registra un messaggio nella console, svuota document.body e inserisce un nuovo paragrafo:

1
console.log('Hello, Snippets!');
2
document.body.innerHTML = '';
3
var p = document.createElement('p');
4
p.textContent = 'Hello, Snippets!';
5
document.body.appendChild(p);

Dopo l'esecuzione, la pagina cambia completamente: Hello, Snippets! appare nella console e il contenuto del body viene sostituito con un singolo paragrafo.

Come aprire il pannello degli snippet

Il pannello Snippets si trova all'interno della scheda Sources. Ci sono due modi per arrivarci: con il mouse e tramite il menu dei comandi.

Metodo uno: con il mouse

Apri DevTools (F12 o Ctrl+Shift+I) e vai alla scheda Sources. A sinistra vedrai il pannello Page con l'albero dei file della pagina; è aperto di default.

Clicca sulla scheda Snippets nella stessa colonna di sinistra. Se la scheda non è visibile, clicca sulla freccia More tabs (>>); si aprirà un elenco a discesa con le schede nascoste, inclusa Snippets.

Metodo due: menu comandi

Il menu comandi è il modo più veloce per navigare in DevTools se ricordi la scorciatoia.

• Porta il focus in qualsiasi punto dentro DevTools.
• Premi Ctrl+Shift+P (Windows/Linux) o Cmd+Shift+P (Mac) per aprire il menu comandi.
• Inizia a digitare snippets e seleziona Show Snippets, poi premi Enter.

Creare un nuovo snippet

Il pannello Snippets è aperto; ora aggiungiamo il primo script.

Tramite il pannello Sources

Nel pannello Snippets clicca il pulsante New snippet. Inserisci il nome dello snippet e premi Enter; apparirà nell'elenco a sinistra.

Il nome dovrebbe essere significativo; tra un mese non ricorderai cosa fa snippet-3. Scrivi "clear-page-and-log", "extract-product-prices" o "toggle-dark-mode".

Tramite il menu comandi

La stessa scorciatoia Ctrl+Shift+P / Cmd+Shift+P, ma ora digita snippet e seleziona Create new snippet, poi Enter.

Il nuovo snippet viene creato con un nome predefinito; rinominalo cliccando con il tasto destro e selezionando Rename.

Modificare il codice di uno snippet

Clicca sul nome dello snippet nel pannello di sinistra; l'editor di codice si aprirà a destra. È un editor completo con evidenziazione della sintassi, numeri di riga e autocompletamento per JavaScript.

Scrivi il codice come faresti in qualsiasi editor. Tutte le API standard del browser sono disponibili: oggetti document e window, funzioni fetch e console, storage localStorage. L'intero insieme di ciò che la pagina vede.

Quando il codice non è salvato, appare un asterisco accanto al nome dello snippet. Salva: Ctrl+S (Windows/Linux) o Cmd+S (Mac).

Usa Ctrl+Z / Cmd+Z per annullare; la cronologia delle modifiche funziona all'interno della sessione di editing.

Eseguire uno snippet

Con il pulsante Run nel pannello Sources

Apri lo snippet desiderato nell'editor. Clicca il pulsante Run (icona Play) in fondo al pannello:

Oppure premi Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Lo snippet verrà eseguito nel contesto della pagina attualmente aperta.

Tramite il menu comandi con un punto esclamativo

Apri il menu comandi (Ctrl+Shift+P / Cmd+Shift+P), cancella il simbolo >, digita ! e inizia a inserire il nome dello snippet. DevTools mostrerà le opzioni corrispondenti:

Seleziona quella che ti serve e premi Enter. Questo metodo è comodo quando non vuoi passare alla scheda Sources.

Rinominare ed eliminare

Entrambe le operazioni si fanno dal pannello Snippets cliccando con il tasto destro sul nome dello snippet:

• Rename: imposta un nuovo nome,
• Remove: elimina definitivamente lo snippet.

L'eliminazione non chiede conferma, quindi fai attenzione. Prima di eliminare uno script complesso, copia il codice in un file di testo.

Esempi pratici di snippet

Abbiamo coperto la teoria; ora ecco alcuni script già pronti che puoi copiare, salvare come snippet e usare subito.

Pulire una pagina per uno screenshot

Rimuove tutto il contenuto e inserisce uno sfondo bianco pulito, utile quando si fanno screenshot per il portfolio o la documentazione:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Raccogliere tutti i link da una pagina

Estrae tutti gli URL e li stampa nella console come elenco. Utile per fare audit di una pagina o raccogliere dati:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Modalità scura su qualsiasi sito

Applica l'inversione all'intera pagina, funziona anche dove non esiste un tema scuro nativo:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Evidenziare tutti i pulsanti su una pagina

Delinea ogni <button> e input[type="submit"] con un bordo rosso, comodo per verificare il layout:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Tutti questi snippet possono essere combinati ed estesi per le tue esigenze. Si salvano una volta, si usano per anni.

⁉️🤔 Domande frequenti

Dove vengono salvati fisicamente gli snippet di Chrome DevTools?

Gli snippet sono salvati nel profilo Chrome, nel file Preferences (JSON), al percorso %LocalAppData%\Google\Chrome\User Data\Default\Preferences su Windows o ~/Library/Application Support/Google/Chrome/Default/Preferences su Mac. NON sono sincronizzati tramite l'account Google; se cambi computer o reinstalli il browser, gli snippet vanno persi. Per trasferirli manualmente, copia la sezione devtools.preferences.snippets da un file Preferences all'altro mentre il browser è chiuso.

In cosa uno snippet è diverso da un bookmarklet?

Un bookmarklet è un segnalibro con un URL che inizia con javascript:, limitato dalla dimensione dell'URL (circa 2000 caratteri) e scomodo da modificare. Uno snippet è un vero e proprio editor integrato in DevTools, senza limiti di lunghezza, con evidenziazione della sintassi e persistenza tra le sessioni. Uno snippet può anche essere eseguito con la scorciatoia Ctrl+Enter senza togliere le mani dalla tastiera.

Si può eseguire automaticamente uno snippet al caricamento della pagina?

Non direttamente. Uno snippet richiede sempre l'esecuzione manuale. Se hai bisogno di automazione al caricamento, usa un'estensione Chrome (content script) o Tampermonkey/Violentmonkey con userscript; questi si attivano all'evento di caricamento della pagina e non richiedono intervento manuale.

Come faccio il backup dei miei snippet prima di reinstallare Chrome?

Apri DevTools, vai su Sources → Snippets, clicca con il tasto destro su ogni snippet e seleziona Salva con nome; questo salverà un file .js su disco. In alternativa, apri chrome://version/, individua il percorso del profilo, chiudi Chrome e copia la sezione JSON devtools.preferences.snippets dal file Preferences.

Perché il mio snippet non vede le variabili della console?

Uno snippet viene eseguito nel proprio ambito di visibilità; non ha accesso alle variabili dichiarate nella console tramite var/let/const nell'ambito globale. Per passare dati, assegna un valore direttamente a window: window.myData = {...} nella console, poi leggi window.myData nello snippet. O viceversa: lo snippet può impostare dati su window e la console può leggerli.

Vale la pena imparare gli snippet nel 2026?

Gli snippet sono uno di quegli strumenti che non cambiano per anni ma accelerano radicalmente il lavoro di routine, se non ti dimentichi di usarli. Cinque minuti spesi a creare uno script per raccogliere link o pulire una pagina fanno risparmiare decine di operazioni manuali ogni mese.

Inizia con tre semplici snippet: raccolta dati da tabelle su una pagina, pulizia rapida del DOM per screenshot ed evidenziazione di un elemento tramite selettore. Salvali e la prossima volta che devi estrarre dati da un sito di terze parti o verificare il layout, finirai in pochi secondi invece di passare mezz'ora a fare copia e incolla.

Ricorda solo di fare il backup: gli snippet non sono sincronizzati tra dispositivi e, senza una copia del file Preferences, spariranno quando reinstallerai il sistema.