Esegui snippet di JavaScript

Kayce Basques

Sofia Emelianova

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 Origini ed eseguirli su qualsiasi pagina e in modalità Incognito.

Nota: DevTools memorizza gli snippet come preferenze locali. DevTools non sincronizza gli snippet con le impostazioni e non è possibile accedervi tramite il file system.

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

Ecco il codice sorgente dello snippet che registra un messaggio e sostituisce il corpo HTML della home page con un elemento <p> che contiene 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 mostrare il messaggio Hello, Snippets! registrato dallo snippet e i contenuti della pagina cambiano.

Apri il riquadro Snippet

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

1. Vai a Origini > > Snippet.

   

2. Dal Menu Comando:

   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 Sources>Snippets mostra un elenco di 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.

Crea 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.

   

Crea uno snippet dal menu Comando

1. Posiziona il cursore in un punto qualsiasi 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 se vuoi assegnare un nome personalizzato al nuovo snippet.

Modifica gli snippet

1. Apri il riquadro Snippet.

2. Nel riquadro Snippet, fai clic sul nome dello snippet che vuoi 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 per la creazione di uno snippet, puoi eseguirlo sia nel riquadro Snippet sia dal Menu comando.

Esegui uno snippet nel riquadro Origini

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

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

   

Esegui uno snippet dal menu Comando

1. Posiziona il cursore in un punto qualsiasi 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 che vuoi eseguire.

   

4. Premi Invio per eseguire lo snippet.

Rinomina 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.