Eseguire JavaScript nella console

Kayce Basques

Questo tutorial interattivo mostra come eseguire JavaScript nella console Chrome DevTools. Consulta la guida introduttiva ai messaggi di Logging 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 è una REPL, che significa lettura, valutazione, stampa e loop. Legge il codice JavaScript che hai digitato, valuta il codice, stampa il risultato dell'espressione, quindi torna al primo passaggio.

Configura DevTools

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

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

   

   Figura 2. il 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. Nota il testo nel pulsante qui sotto.

   Ciao mondo!

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

   Sotto il codice che hai valutato è presente "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 di document.getElementById('hello').textContent = 'Hello, Console!'.

Esegui JavaScript arbitrario non correlato alla pagina

A volte, ti serve solo un parco giochi in cui testare del codice o provare nuove funzionalità JavaScript che non conosci. 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 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 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;
   }
   

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

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

   add(25);
   

   

   Figura 4. Aspetto della console dopo la valutazione delle espressioni sopra riportate.

   add(25) restituisce 45 perché quando la funzione add viene chiamata senza un secondo argomento, il valore predefinito di b è 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 consente di mettere in pausa uno script durante l'esecuzione. Mentre sei in pausa, puoi usare la console per visualizzare e modificare i window o DOM della pagina in quel momento. Ciò si traduce in un flusso di lavoro di debug potente. Per un tutorial interattivo, consulta Inizia a eseguire il debug di JavaScript.

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

Oltre a questo, la console offre anche una serie di pratiche funzioni che semplificano l'interazione con la pagina. Ad esempio:

• Anziché digitare document.querySelector() per selezionare un elemento, puoi digitare $(). Questa sintassi si ispira 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 quella funzione.
• keys(object) restituisce un array contenente le chiavi dell'oggetto specificato.

Consulta la documentazione di riferimento dell'API Console Utilities per esplorare tutte le funzionalità utili.