Esegui snippet di JavaScript

Kayce Basques

Sofia Emelianova

Se ti capita di eseguire lo stesso codice più volte nella console, valuta la possibilità di salvare il codice come snippet. Gli snippet hanno accesso al contesto JavaScript della pagina. Sono un'alternativa ai bookmarklet.

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

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

Di seguito è riportato 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, in cui vengono visualizzati il messaggio Hello, Snippets! registrato dallo snippet e le modifiche ai contenuti della pagina.

Apri il riquadro Snippet

Nel riquadro Snippet sono elencati i tuoi snippet. Per modificare uno snippet, aprilo in uno dei due modi seguenti:

1. Vai a Origini > > Snippet.

   

2. Nel menu dei comandi:

   1. Premi Ctrl+Maiusc+P (Windows/Linux) o 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 degli snippet salvati, vuoto in questo esempio.

Crea snippet

Puoi creare 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 dei comandi

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

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

   

Consulta 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. Per salvare, premi Ctrl+S (Windows/Linux) o Comando+S (Mac).

Esegui snippet

Come per la creazione di uno snippet, puoi eseguirlo sia dal riquadro Snippet sia dal menu dei comandi.

Esegui 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).

   

Esegui uno snippet dal menu dei comandi

1. Imposta lo stato attivo del 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.