Eseguire JavaScript nella console

Kayce Basques

Questo tutorial interattivo mostra come eseguire JavaScript nella console Chrome DevTools. Consulta Inizia a utilizzare i messaggi di logging per scoprire come registrare i messaggi nella console. Consulta la Guida introduttiva Con Debug di JavaScript, puoi scoprire come mettere in pausa il codice JavaScript e seguirlo di una riga alla pagina una volta.

Figura 1. La console.

Panoramica

La console è una REPL, che significa lettura, valutazione, stampa e loop. Legge JavaScript digitato, valuta il codice, stampa il risultato expression, 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 seguirai fisicamente, probabilmente ricorderai più facilmente i flussi di lavoro in seguito.

1. Premi Comando+Opzione+J (Mac) o Ctrl+Maiusc+J (Windows, Linux, ChromeOS) per aprire 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 per modificare l'aspetto o la modalità di visualizzazione della pagina.

1. Nota il testo nel pulsante qui sotto.

   Ciao mondo!

2. Digita document.getElementById('hello').textContent = 'Hello, Console!' nella console e quindi 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. "Hello, Console!" deve quindi essere il risultato della valutazione 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 nuovo JavaScript funzioni 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 la tua 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 seguente mostra come dovrebbe essere la console dopo aver valutato questa espressione.

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

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

   Consulta definire i valori predefiniti per gli argomenti delle funzioni se non hai dimestichezza con il b=20 a riga di comando.

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, ciò comporterà anche l'errore nella pagina corrente 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 utilizzare nella console per visualizzare e modificare i window o DOM della pagina in quel momento. Ciò rende per un flusso di lavoro di debug avanzato. Consulta la Guida introduttiva al debug di JavaScript per una sessione tutorial di Google Cloud.

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 $(). Questo si ispira a jQuery, ma in realtà non è jQuery. È solo un alias di 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.