Esempi di Console.log() in JavaScript – Come stampare sulla console in JS

Articolo originale: https://www.freecodecamp.org/news/javascript-console-log-example-how-to-print-to-the-console-in-js/

La visualizzazione di messaggi sulla console è un modo molto semplice per diagnosticare e risolvere i problemi minori nel codice.

Ma lo sapevi che oltre a un semplice log c'è di più in console? In questo articolo, ti mostrerò come stampare sulla console in JS, e inoltre tutte le cose che console può fare e che probabilmente non sai .

Editor Multi-line della Console di Firefox

Se non hai mai utilizzato la modalità editor multilinea in Firefox, dovresti provarlo subito!

Basta aprire la console, Ctrl+Shift+K o F12, e in alto a destra vedrai un pulsante che dice "Switch to multi-line editor mode". In alternativa, puoi premere Ctrl+B.

Questo ti dà un editor di codice multilinea direttamente all'interno di Firefox.

console.log

Iniziamo con un esempio di log molto semplice.

let x = 1
console.log(x)

Scrivilo nella console di Firefox ed esegui il codice. Puoi fare clic sul pulsante "Run" o premere Ctrl+Enter.

In questo esempio, dovremmo vedere "1" nella console. Abbastanza semplice, vero?

Valori multipli

Sapevi che puoi includere più valori? Aggiungi una stringa all'inizio per identificare facilmente cosa stai stampando.

let x = 1
console.log("x:", x)

Ma cosa succede se abbiamo più valori che vogliamo visualizzare?

let x = 1
let y = 2
let z = 3

Invece di digitare console.log() tre volte, possiamo includerli tutti. Se lo desideriamo, possiamo anche aggiungere una stringa prima di ciascuno di essi.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

Ma è troppo lavoro. Basta racchiuderli in parentesi graffe! Ora ottieni un oggetto con i valori nominati.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Puoi fare la stessa cosa con un oggetto.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

Il primo log stamperà le proprietà all'interno dell'oggetto user. Il secondo identificherà l'oggetto come "user" e ne stamperà le proprietà.

Se stai visualizzando molte cose sulla console, questo può aiutarti a identificare ogni log.

Variabili all'interno del log

Sapevi che puoi utilizzare porzioni del tuo log come variabili?

console.log("%s is %d years old.", "John", 29)

In questo esempio, %s fa riferimento al parametro stringa presente dopo il valore iniziale. Questo si riferirebbe a "John".

E %d si riferisce al parametro numerico presente dopo il valore iniziale. Questo si riferirebbe a 29.

L'output di questo codice sarà: "John is 29 years old.".

Varianti di log

Ci sono alcune varianti di log. Il più usato è console.log(). Ma ci sono anche:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

Queste varianti aggiungono stile ai nostri log nella console. Ad esempio, warn sarà colorato di giallo e error sarà colorato di rosso.

Nota: gli stili variano da browser a browser.

Log opzionali

Possiamo stampare i messaggi sulla console in modo condizionale con console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

Se il primo argomento è false, il messaggio verrà stampato.

Se dovessimo cambiare isItWorking in true, il messaggio non verrà visualizzato.

Conteggio

Sapevi che puoi contare con la console?

for(i=0; i<10; i++){
  console.count()
}

Ogni iterazione di questo ciclo stamperà un conteggio sulla console. Vedrai "default: 1, default: 2" e così via fino a raggiungere 10.

Se esegui di nuovo lo stesso ciclo, vedrai che il conteggio riprende da dove era stato interrotto; 11 - 20.

Per azzerare il contatore possiamo usare console.countReset().

E, se vuoi assegnare al contatore un nome diverso da "default", puoi farlo!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Ora che abbiamo aggiunto un'etichetta, vedrai "Counter 1, Counter 2" e così via.

E per azzerare questo contatore, dobbiamo passare il nome in countReset. In questo modo puoi avere più contatori in funzione contemporaneamente e azzerare solo quelli specifici.

Traccia il tempo

Oltre a contare, puoi anche cronometrare qualcosa come un cronometro.

Per avviare un timer possiamo usare console.time(). Questo non farà nulla da solo. Quindi, in questo esempio, useremo setTimeout()per emulare il codice in esecuzione. Quindi, entro il timeout, fermeremo il nostro timer utilizzando console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

Come ti aspetteresti, dopo 5 secondi avremo un log di fine timer di 5 secondi.

Possiamo anche registrare l'ora corrente del nostro timer mentre è in esecuzione, senza fermarlo. Lo facciamo usando console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

In questo esempio, otterremo prima il timeLog ai 2 secondi, quindi il timeEnd ai 5 secondi.

Proprio come il contatore, possiamo etichettare i timer e averne più in esecuzione contemporaneamente.

Gruppi

Un'altra cosa con cui puoi fare con i log è raggrupparli.

Iniziamo un gruppo usando console.group(). E chiudiamo un gruppo con console.groupEnd().

console.log('I am not in a group')

console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()

console.log('I am not in a group')

Questo gruppo di log sarà collassabile. Ciò semplifica l'identificazione di insiemi di log.

Per impostazione predefinita, il gruppo non è compresso. Puoi impostarlo su compresso usando console.groupCollapsed() al posto di console.group().

Le etichette possono anche essere passate all'interno di group() per identificarle meglio.

Traccia dello Stack

Puoi anche eseguire la traccia di uno stack con console. Basta aggiungerlo in una funzione.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

In questo esempio, abbiamo funzioni molto semplici che si chiamano a vicenda. Quindi, nell'ultima funzione, chiamiamo console.trace().

Tabelle

Ecco uno degli usi più strabilianti della console: console.table().

Qui impostiamo alcuni dati da stampare:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Ora stamperemo questi dati usando console.table(devices).

Ma aspetta: possiamo fare di più!

Se vogliamo solo i marchi, basta console.table(devices, ['brand'])!

Che ne dici di un esempio più complesso? In questo esempio useremo jsonplaceholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()
 
  console.table(data, ['name', 'email'])
}

getUsers()

Qui stiamo solo stampando il "name" e la "email". Se stampi tutti i dati con console.log, vedrai che ci sono molte più proprietà per ogni utente.

Stile

Sapevi che puoi utilizzare le proprietà CSS per definire lo stile dei tuoi log?

Per fare ciò, utilizziamo %c per specificare che abbiamo degli stili da aggiungere. Gli stili vengono passati al secondo argomento di log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Puoi usarlo per far risaltare i tuoi log.

Clear

Se stai cercando di risolvere un problema utilizzando i log, potresti avere la necessità aggiornare molto spesso se la tua console e affollata.

Basta aggiungere console.clear() all'inizio del tuo codice e avrai una console pulita ogni volta che aggiorni.

Basta non aggiungerlo in fondo al codice, lol.

Grazie per aver letto!

Se vuoi rivisitare i concetti in questo articolo tramite video, puoi dare un'occhiata a questa versione video che ho realizzato qui .

Sono Jesse dal Texas. Dai un'occhiata agli altri miei contenuti e fammi sapere come posso aiutarti nel tuo viaggio per diventare uno sviluppatore web.