Javascript console.log – cos’è e come funziona

In questo breve articolo cercheremo di spiegare cos’è e come funziona la console degli errori durante lo sviluppo di applicazioni lato client con Javascript e suoi derivati (come ad esempio jQuery).

Cos’è la console?

Iniziamo col dire che console non è un oggetto di Javascript ma una variabile globale (utilizzata da tool di sviluppo come Firebug) presente in tutte le pagine caricate nel browser (ad esempio Firefox se stiamo utilizzando Firebug). Più correttamente si tratta di un oggetto "attaccato" all’oggetto window al momento del caricamento della pagina.

A cosa serve la console?

Questa variabile è utilizzata per il logging degli eventi e degli errori di un’applicazione Javascript al fine di aiutare lo sviluppatore durante la fase di debug.

I metodi dell’oggetto console

L’oggetto console (che come abbiamo detto appartiene ai tool di sviluppo) possiede diversi metodi, il principale è log().

console.log()

Attraverso la sintassi console.log(), in parole semplici, andiamo a scrivere qualcosa nella console di Firebug (o tool assimilati).

Ad esempio:

$(function() { 
  $('p').bind('click mouseover', function(event){ 
    console.log(event.type);        
  });
})

Questo codice registra nella console uno dei due eventi indicati (click – mouseover) su ogni tag <p> della pagina.

Facciamo un altro esempio:

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Quanti nodi di testo abbiamo creato? Risposta: " + a.childNodes.length);

In questo caso abbiamo creato dinamicamente un paragrafo ed aggiunto due nodi di testo registrando nella console l’operazione.

Ovviamente gli esempi proposti sono molto semplici ma credo rendano l’idea del tipo di operazioni (anche complesse) che sia possibile registrare nella console.

Negli esempi visti sopra ci siamo limitati ad inviare alla console un semplice messaggio, ma avremmo potuto anche inviare un elemento della pagina:

console.log(document.body.firstElementChild);

il quale sarebbe stato stampato in console con una formattazione XML.

Utilizzare una notazione in stile printf

Il metodo log() – così come altri metodi che vedremo in seguito – accettano anche una notazione in stile printf per la costruzione dei messaggi da registrare in console. Vediamo un esempio:

console.log('Stampo una %s ed il numero %d','stringa', 76);

Il messaggio che verrà stampato in console sarà:

Stampo una stringa ed il numero 76

I format ammessi sono:

Vediamo un esempio di quest’ultimo:

console.log('%cFormatto in blu e scrivo in grande', 'color: blue; font-size: x-large');

console.debug()

E’ simile al metodo log() ma più dettagliato in quanto viene inserito in console anche il riferimento alla linea di codice.

console.error(), console.warn() e console.info()

I metodi error(), warn() e info() sono utilizzati, rispettivamente, per stampare nella console un messaggio d’errore (icona con X rossa), un warning (alert in giallo) oppure una info (una "i" in azzurro). Questi metodi sono utili per visualizzare immediatamente eventuali messaggi importanti (aventi diversi livelli di gravit&agrave) all’interno della console.

Vediamo un esempio:

var url_sbagliata = "http://foo/bar.json"; // URL inesistente !!!
$.ajax({
  url: url_sbagliata,
  dataType: 'json',
  success: function(jsonResponse, textStatus, jqXHR) {
    // ...
    console.info('Ajax ha funzionato correttamente!');
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // ...
    console.error('Ajax NON ha funzionato!');
  }
})

console.assert()

Stampa un messaggio in console (specificato come secondo argomento) solo se una data condizione (primo argomento) risulta falsa. Vediamo un esempio:

console.assert(a.childNodes.length < 5, "Il numero dei nodi è maggiore di 5 !!!");

console.dir()

Il metodo dir() è utilizzato per stampare in console un elemento della pagina sotto forma di elemento Javascript espandibile. Ad esempio:

console.dir(document.body.firstElementChild);

Si noti che questa sintassi è equivalente a:

console.log('%O', document.body.firstElementChild);

console.time() e console.timeEnd()

Questi due metodi sono utilizzati per misurare il tempo di esecuzione di uno script. Vediamo un esempio:

console.time("Esecuzione ciclo");
var array= new Array(10000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
console.timeEnd("Esecuzione ciclo");

console.clear()

Il metodo clear() è utilizzato per svuotare la console.

Conclusioni

Quelli esposti in questo articolo sono i metodi principali dell’oggetto console il quale, tuttavia, ne possiede numerosi altri seppur di minore importanza e di minor utilizzo. Per una documentazione completa suggerisco la lettura delle specifiche dell’oggetto console a questa pagina sul sito di Firebug.