Guida avanzata sulla console Javascript

Mattepuffo's logo
Guida avanzata sulla console Javascript

Guida avanzata sulla console Javascript

La console di Javascript la conosciamo tutti, e tutti in genere usiamo queste 4 funzioni:

  • console.log()
  • console.error()
  • console.debug()
  • console.info()
  • console.warn()

Anzi, ad essere sincero io uso solo la prima!

Comunque la differenza tra queste funzioni è il livello di informazioni a cui si riferisce.

Ma oltre questo c'è parecchio di più!

Cominciamo ad esempio con la formattazione del messaggio:

console.log('%s %i', 'Numero', 13);
console.log('%s %f', 'Decimale', 13.982398329);

Come vedete abbiamo usato:

  • %s per le stringhe
  • %i per i numeri interi
  • %f per i decimali

Inoltre possiamo usare regole CSS:

console.log('%cAttenzione!', 'color:red');

Con %c e poi la regola di stile; adesso avrete la scritta rossa in console.

----------

Altra cosa utile è il raggruppamento dei dati, che può partire collapsed o non; ecco due esempi:

console.group('inizio');
console.log('1');
console.log('2');
console.log('3');
console.groupEnd('inizio');

console.groupCollapsed('inizio_chiuso');
console.log('1');
console.log('2');
console.log('3');
console.groupEnd('inizio_chiuso');

Abbiamo usate group e groupCollapsed per iniziare i gruppi, e groupEnd per chiuderli; dovete solo passargli la label corretta.

----------

Con time contiamo quanto tempo di mette uno script:

console.time('tempo');
for (let i = 0; i < 200000; i += 1) {
    i * 2000;
}
console.timeEnd('tempo');

Anche qui abbiamo timeEnd per la chiusura.

----------

Poi abbiamo assert che è simile alle funzioni sopra, ma ci permette di usare una condizione booleana:

let value = 10;
console.assert(value > 13, 'ERRORE');

----------

Se vogliamo contare quante volta appare un valore / funzione?

Usiamo la funzione indicando cosa contare:

console.count('CONTAMI!');
console.count('CONTAMI!');
console.count('CONTAMI!');
console.count('CONTAMI');
console.countReset('CONTAMI!')

Con countReset, facciamo il reset del conteggio.

----------

Ho trovato molto utile anche la funziona table; come potete capire ci permette di intabellare i dati:

let myArray = [
    'roma', 'milano', 'bologna'
];
console.table(myArray);

let myObj = {
    1: 'roma', 2: 'milano', 3: 'bologna'
};
console.table(myObj);

Nel primo caso, array, l'indice viene creato in automatico; nel secondo, object, viene preso dall'oggetto stesso.

----------

Infine:

console.clear();

Questa pulirà la console.

----------

Per adesso è tutto!

Si accettano suggerimenti!

Enjoy!


Share this Post

Commentami!