Eseguire JavaScript nella console

Kayce Basques

Questo tutorial interattivo mostra come eseguire JavaScript nella console di Chrome DevTools. Consulta la pagina Inizia a registrare i messaggi per scoprire come registrare i messaggi nella console. Consulta la pagina Inizia a eseguire il debug di JavaScript per scoprire come mettere in pausa il codice JavaScript ed eseguirlo passo passo, riga per riga.

Figura 1. La console.

Panoramica

La console è un REPL, acronimo di Read, Evaluate, Print e Loop. Legge il codice JavaScript che digiti, lo valuta, stampa il risultato della tua espressionee poi torna al primo passaggio.

Configurare DevTools

Questo tutorial è progettato in modo che tu possa aprire la demo e provare tutti i workflow. Se segui fisicamente i passaggi, è più probabile che ti ricorderai i workflow in un secondo momento.

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 il DOM della pagina

Quando crei o esegui il debug di una pagina, spesso è utile eseguire istruzioni nella console per modificare l'aspetto o l'esecuzione della pagina.

1. Nota il testo nel pulsante di seguito.

   Hello, World!

2. Digita document.getElementById('hello').textContent = 'Hello, Console!' nella console e 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 sopra.

   Sotto il codice che hai valutato viene visualizzato "Hello, Console!". Ricorda i 4 passaggi di REPL: read, evaluate, print, 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, vuoi solo un ambiente di test del codice in cui puoi testare del codice o provare nuove funzionalità JavaScript che non conosci. La console è il luogo ideale per questo tipo di esperimenti.

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

3. Digita il seguente codice nella console. Prova a digitarlo carattere per carattere anziché copiarlo e incollarlo.

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

4. Ora chiama la funzione che hai appena definito.

   add(25);
   

   

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

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

Non potrai eseguire alcun codice in questa sessione della console finché la funzione non avrà restituito un valore. Se l'operazione richiede troppo tempo, puoi utilizzare il Gestore attività per annullare il calcolo che richiede molto tempo; tuttavia, la pagina corrente non verrà caricata e tutti i dati inseriti andranno persi.

Passaggi successivi

Consulta la pagina Eseguire JavaScript per scoprire altre funzionalità correlate all'esecuzione di JavaScript nella console.

DevTools ti consente di mettere in pausa uno script a metà dell'esecuzione. Quando è in pausa, puoi utilizzare la console per visualizzare e modificare window o DOM della pagina in quel momento. Questo crea un workflow di debug efficace. Consulta la pagina Inizia a eseguire il debug di JavaScript per un tutorial interattivo.

La console supporta anche un insieme di specificatori di formato. Consulta la pagina Formattare e applicare stili ai messaggi nella console per scoprire tutti i metodi per formattare e applicare stili ai messaggi della console.

Oltre a ciò, la console ha anche un insieme di funzioni di utilità 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 effettivamente un punto di interruzione sulla prima riga della funzione.
• keys(object) restituisce un array contenente le chiavi dell'oggetto specificato.

Consulta la pagina Riferimento all'API delle utilità della console per scoprire tutte le funzioni di utilità.