Esegui snippet di JavaScript

Sofia Emelianova
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.

La home page della documentazione DevTools prima di eseguire lo snippet. Il pulsante Esegui è evidenziato.

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

La home page dopo l&#39;esecuzione dello snippet.

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 &gt; Altre schede. &gt; Snippet.

    Il menu Altre schede nel riquadro Origini.

  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.

    Seleziona Mostra snippet dal menu dei comandi.

Il riquadro Origini&gt;Snippet mostra un elenco degli snippet salvati, vuoto in questo esempio.

Un riquadro degli snippet vuoto.

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. Nuovo snippet.
  3. Inserisci un nome per lo snippet e premi Invio per salvare.

    Assegna un nome a uno snippet.

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.

    Seleziona Crea nuovo snippet dal menu di 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.

    Uno snippet aperto nell&#39;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.

    Un asterisco accanto al nome dello snippet che indica il codice non salvato.

  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. Esegui nella barra delle azioni nella parte inferiore dell'editor. oppure premi Ctrl+Invio (Windows/Linux) o Comando+Invio (Mac).

    Pulsante Esegui.

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.

    Esecuzione di uno snippet dal menu Apri.

  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.