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 Javascript?

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 Javascript?

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:

Grazie a queste funzionalità, la console di JavaScript diventa uno strumento potente, flessibile e indispensabile per qualsiasi sviluppatore web. Utilizzando gli esempi sopra riportati, è possibile iniziare a esplorare e a sfruttare al massimo questo strumento fondamentale per il debugging. Da messaggi informativi a strutture dati complesse, la console offre un panorama vasto di possibilità per facilitare lo sviluppo e la manutenzione delle applicazioni web.