Eseguire JavaScript nella console

Kayce Basques

Questo tutorial interattivo mostra come eseguire JavaScript nella console di Strumenti per sviluppatori di Chrome. Consulta Iniziare a utilizzare i messaggi di log per scoprire come registrare i messaggi nella Console. Consulta la Guida introduttiva al debug di JavaScript per scoprire come mettere in pausa il codice JavaScript e seguire i passaggi da una riga alla volta.

Figura 1. La console.

Panoramica

La console è un REPL, che sta per Read, Evaluate, Print e Loop (Leggi, valuta, stampa e ripeti). Legge il codice JavaScript che digiti, valuta il codice, stampa il risultato dell'espressione e torna al primo passaggio.

Configurare DevTools

Questo tutorial è progettato in modo che tu possa aprire la demo e provare tutti i flussi di lavoro. Se segui la procedura, è più probabile che ricordi i flussi di lavoro in un secondo momento.

1. Premi Command + 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. Fai attenzione al testo nel pulsante di seguito.

   Ciao mondo!

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

   

   Figura 3. Aspetto della console dopo la valutazione dell'espressione precedente.

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

Eseguire JavaScript arbitrario non correlato alla pagina

A volte, ti serve solo un'area di test in cui puoi testare del codice o provare nuove funzionalità di JavaScript con cui non hai dimestichezza. 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 la valutazione dell'espressione non richieda troppo tempo).
2. Premi Enter per valutare l'espressione. La console stampa il risultato dell'espressione sotto il codice. La Figura 4 di seguito mostra come dovrebbe essere la console dopo la valutazione di 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;
   }
   

   Consulta Definire valori predefiniti per gli argomenti delle funzioni se non hai dimestichezza con la sintassi di b=20.

4. A questo punto, richiama la funzione appena definita.

   add(25);
   

   

   Figura 4. Aspetto della console dopo la valutazione delle espressioni precedenti.

   add(25) restituisce 45 perché quando la funzione add viene chiamata senza un secondo argomento,b per impostazione predefinita è 20.

Non potrai eseguire alcun codice in questa sessione della console finché la funzione non sarà stata restituita. Se questa operazione richiede troppo tempo, puoi utilizzare Task Manager per annullare il calcolo che richiede molto tempo; tuttavia, la pagina corrente non riuscirà e tutti i dati inseriti andranno persi.

Passaggi successivi

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

DevTools ti consente di mettere in pausa uno script durante l'esecuzione. Durante la pausa, puoi utilizzare la console per visualizzare e modificare il window o il DOM della pagina in quel momento. Ciò si traduce in un flusso di lavoro di debug potente. Per un tutorial interattivo, consulta Guida introduttiva al debug di JavaScript.

La console supporta anche una serie di indicatori di formato. Consulta Formattare e applicare stili ai messaggi nella console per scoprire tutti i metodi per formattare e applicare stili ai messaggi della console.

Oltre a questo, la console dispone anche di 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 non è jQuery. È solo un alias per document.querySelector().
• debug(function) imposta effettivamente un punto di interruzione nella prima riga della funzione.
• keys(object) restituisce un array contenente le chiavi dell'oggetto specificato.

Consulta la documentazione di riferimento dell'API Console Utilities per scoprire tutte le funzioni di utilità.