Esegui snippet di JavaScript

Se ti capita di eseguire ripetutamente lo stesso codice nella console, ti consigliamo di salvarlo come snippet. Gli snippet hanno accesso al contesto JavaScript della pagina. Sono un'alternativa ai bookmarklet.

Puoi creare snippet nel riquadro Fonti ed eseguirli in qualsiasi pagina e in modalità di navigazione in incognito.

Ad esempio, il seguente screenshot mostra la home page della documentazione di DevTools a sinistra e alcuni snippet di codice sorgente nel riquadro Origini > Snippet a destra.

Ecco il codice sorgente dello snippet che registra alcuni messaggi e sostituisce il corpo HTML della home page con un elemento <p> contenente il messaggio:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Quando fai clic sul pulsante Esegui , viene visualizzato il riquadro a scomparsa Console per visualizzare il messaggio Hello, Snippets! registrato dallo snippet e i contenuti della pagina modificati.

Apri il riquadro Snippet

Il riquadro Snippet elenca i tuoi snippet. Per modificare uno snippet, puoi aprirlo in uno dei due seguenti modi:

1. Vai a Origini > > Snippet.

   

2. Dal menu Comando:

   1. Premi Ctrl+Maiusc+P (Windows/Linux) oppure Comando+Maiusc+P (Mac) per aprire il menu Comando.
   2. Inizia a digitare Snippets, seleziona Mostra snippet e premi Invio.

   

Il riquadro Origini>Snippet mostra un elenco di snippet che hai salvato, vuoto in questo esempio.

Crea snippet

Puoi creare gli snippet nel riquadro Snippet o eseguendo il comando corrispondente dal menu Comando in qualsiasi punto di DevTools.

Il riquadro Snippet ordina gli snippet in ordine alfabetico.

Creare uno snippet nel riquadro Origini

1. Apri il riquadro Snippet.
2. Fai clic su Nuovo snippet.

3. Inserisci un nome per lo snippet e premi Invio per salvare.

   

Creare uno snippet dal menu Comando

1. Imposta lo stato attivo con il cursore in qualsiasi punto all'interno di DevTools.
2. Premi Ctrl+Maiusc+P (Windows/Linux) oppure Comando+Maiusc+P (Mac) per aprire il menu Comando.

3. Inizia a digitare Snippet, seleziona Crea nuovo snippet e premi Invio per eseguire il comando.

   

Consulta l'articolo Rinominare gli snippet per assegnare un nome personalizzato al nuovo snippet.

Modifica snippet

1. Apri il riquadro Snippet.

2. Nel riquadro Snippet, fai clic sul nome dello snippet da modificare. Il riquadro Origini lo apre nell'Editor di codice.

   

3. Utilizza l'editor di codice per modificare il codice nello snippet. Un asterisco accanto al nome dello snippet indica che non hai ancora salvato le modifiche.

   

4. Premi CTRL + S (Windows/Linux) o Comando + S (Mac) per salvare.

Esegui snippet

Come accade per la creazione di uno snippet, puoi eseguirlo sia nel riquadro Snippet sia dal menu Comando.

Eseguire uno snippet nel riquadro Origini

1. Apri il riquadro Snippet.
2. Fai clic sul nome dello snippet da eseguire. Il riquadro Origini lo apre nell'Editor di codice.

3. Fai clic su Esegui nella barra delle azioni nella parte inferiore dell'editor oppure premi Ctrl + Invio (Windows/Linux) o Comando + Invio (Mac).

   

Eseguire uno snippet dal menu Comando

1. Imposta lo stato attivo con il cursore in qualsiasi punto all'interno di DevTools.
2. Premi Ctrl+O (Windows/Linux) o Comando+O (Mac) per aprire il menu Comando.

3. Digita il carattere ! seguito dal nome dello snippet da eseguire.

   

4. Premi Invio per eseguire lo snippet.

Rinominare gli snippet

1. Apri il riquadro Snippet.
2. Fai clic con il tasto destro del mouse sul nome dello snippet e seleziona Rinomina.

Elimina snippet

1. Apri il riquadro Snippet.
2. Fai clic con il tasto destro del mouse sul nome dello snippet e seleziona Rimuovi.