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 Iniziare con il debug di JavaScript per scoprire come mettere in pausa il codice JavaScript ed esaminarlo 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. Quando segui la procedura, è più probabile che ricordi i flussi di lavoro in un secondo momento.

1. Premi Cmd+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

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

1. Fai attenzione al testo nel pulsante di seguito.

   Un saluto da Google!

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. Aspetto della console dopo la valutazione dell'espressione riportata sopra.

   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. Pertanto, "Hello, Console!" deve essere il risultato della valutazione 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 apparire 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. Ora chiama la funzione che hai appena definito.

   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 avrà restituito un valore. Se l'operazione richiede troppo tempo, puoi utilizzare Task Manager per annullare il calcolo che richiede molto tempo. Tuttavia, la pagina corrente non andrà a buon fine e tutti i dati inseriti andranno persi.

Passaggi successivi

Consulta 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ò consente un flusso di lavoro di debug efficace. Per un tutorial interattivo, consulta Guida introduttiva al debug di JavaScript.

Console supporta anche un insieme di specificatori 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à.