Eseguire JavaScript nella console

Kayce Basques

Twitter GitHub Glitch

Questo tutorial interattivo mostra come eseguire JavaScript nella console Chrome DevTools. Consulta la pagina Introduzione ai messaggi di Logging per scoprire come registrare i messaggi nella console. Consulta la sezione Introduzione a JavaScript di debug per scoprire come mettere in pausa il codice JavaScript e descriverlo una riga alla volta.

Figura 1. La console.

Panoramica

La console è una REPL, che significa lettura, valutazione, stampa e loop. Legge il codice JavaScript che inserisci, valuta il codice, stampa il risultato della tua espressione e quindi torna indietro al primo passaggio.

Configura DevTools

Questo tutorial è progettato per consentirti di aprire la demo e provare personalmente tutti i flussi di lavoro. Se segui fisicamente, è più probabile che ricordi i flussi di lavoro in seguito.

1. Premi Comando+Opzione+J (Mac) o Ctrl+Maiusc+J (Windows, Linux, ChromeOS) per aprire la Console, proprio qui in questa pagina.

   

   Figura 2. Questo tutorial a sinistra e DevTools a destra.

Visualizzare e modificare il codice JavaScript o DOM della pagina

Durante la creazione o il debug di una pagina, spesso è utile eseguire istruzioni nella console per modificarne l'aspetto o l'esecuzione.

1. Osserva il testo nel pulsante qui sotto.

   Hello World!

2. Digita document.getElementById('hello').textContent = 'Hello, Console!' nella console, quindi premi Invio per valutare l'espressione. Nota come cambia il testo all'interno del pulsante.

   

   Figura 3. L'aspetto della console dopo aver valutato l'espressione precedente.

   Sotto il codice che hai valutato vedi "Hello, Console!". Ricorda i 4 passaggi di REPL: lettura, valutazione, stampa, loop. Dopo aver valutato il codice, un REPL stampa il risultato dell'espressione. Quindi "Hello, Console!" deve essere il risultato della valutazione document.getElementById('hello').textContent = 'Hello, Console!'.

Eseguire codice JavaScript arbitrario non correlato alla pagina

A volte potresti volere un parco giochi in cui testare parte del codice o provare nuove funzionalità JavaScript con cui non hai familiarità. La console è il posto perfetto per questo tipo di esperimenti.

1. Digita 5 + 15 nella console. Il risultato 20 verrà visualizzato sotto l'espressione (a meno che la valutazione dell'espressione richieda troppo tempo).
2. Premi Enter per valutare l'espressione. La console stampa il risultato dell'espressione sotto il codice. La Figura 4 riportata di seguito mostra come dovrebbe apparire la console dopo aver valutato questa espressione.

3. Digita il codice seguente nella console. Prova a digitarlo carattere per carattere, invece di copiarlo e incollarlo.

   function add(a, b=20) {
     return a + b;
   }
   

   Se non non hai dimestichezza con la sintassi b=20, consulta Definizione dei valori predefiniti per gli argomenti delle funzioni.

4. Ora, chiama la funzione che hai appena definito.

   add(25);
   

   

   Figura 4. L'aspetto della console dopo aver valutato le espressioni sopra riportate.

   add(25) restituisce 45 perché quando la funzione add viene chiamata senza un secondo argomento, b il valore predefinito è 20.

Non potrai eseguire codice in questa sessione della console fino a quando la funzione non viene restituita. Se questo richiede troppo tempo, puoi utilizzare Task Manager per annullare il calcolo che richiede molto tempo. Tuttavia, questo comporterà anche un errore della pagina corrente e tutti i dati inseriti andranno persi.

Passaggi successivi

Consulta Eseguire JavaScript per esplorare altre funzionalità relative all'esecuzione di JavaScript nella console.

DevTools consente di mettere in pausa uno script durante l'esecuzione. Mentre è in pausa, puoi utilizzare la console per visualizzare e modificare i valori window o DOM della pagina in quel momento. Questo rende un flusso di lavoro di debug efficace. Consulta Introduzione a JavaScript di debug per un tutorial interattivo.

La console supporta inoltre una serie di identificatori di formato. Per scoprire tutti i metodi per formattare e applicare stili ai messaggi della console, consulta Formattare e applicare stili ai messaggi nella console.

A parte questo, la console dispone anche di una serie di funzioni che semplificano l'interazione con una pagina. Ad esempio:

• Anziché digitare document.querySelector() per selezionare un elemento, puoi digitare $(). Questa sintassi è ispirata a jQuery, ma in realtà non è jQuery. È solo un alias per document.querySelector().
• debug(function) imposta in modo efficace un punto di interruzione sulla prima riga di tale funzione.
• keys(object) restituisce un array contenente le chiavi dell'oggetto specificato.

Consulta il riferimento sull'API Console Utilities per esplorare tutte le funzioni.