Come usare console.log in Javascript

Attivare la console di un browser (disponibile sia per Chrome che per Firefox) permette di sviluppare lato web in maniera molto più pratica, e senza essere costretti a visualizzare gli errori manualmente via Javascript (premendo contemporaneamente CTRL e J).

La funzione console.log

Quando si sviluppa codice in JS, in effetti, l’uso che possiamo fare della funzione:

console.log

permette di fare diverse cose, tra cui:

  1. visualizzare l’andamento del codice in punti critici;
  2. effettuare un debug rapido;
  3. visualizzare eventuali warning o errori nel codice.

Modalità sviluppatore: come si accede?

Premendo contemporaneamente CTRL e J, tenendo il browser aperto.

Modalità sviluppatore: cos’è?

Si tratta di una delle caratteristiche più importanti di Firebug (oggi si chiama Modalità sviluppatore ed è presente su qualsiasi browser come Chrome o Firefox), presente per la verità anche in altri componenti aggiuntivi, e che permette di tenere sotto controllo l’esecuzione di istruzioni a tempo di run.

Ad esempio, usando jQuery:

$( '#unBottone' ).click ( function () {
console.log ( 'hai cliccato unBottone!' );
// fai quello che devi...
} );

sarà possibile loggare l’evento di click su #unBottone non appena quest’ultimo avvenga, in basso alla pagina in modo da tenere tutto sotto osservazione.

Di seguito un esempio tratto da un’app che sto migliorando in questi giorni:

Screen 2014-07-27 alle 21.16.02

 

È inoltre possibile checkare se la console sia disponibile o meno, in modo da passare agevolmente dalla fase di produzione a quella finale di rilascio:

if ( window.console && window.console.log ) {
// [...]
}

Oltre al succitato tool, per fare debugging del codice si possono usare una delle seguenti alternative:

  1. https://developer.chrome.com/devtools/index (per Chrome)
  2. https://developer.apple.com/technologies/safari/developer-tools.html (per Safari)
  3. http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
  4. http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx (entrambi per IE)
  5. http://www.opera.com/dragonfly/ (per Opera)
  6. http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html (per Apple mobile, iOS / iPhone)

Si possono inoltre sfruttare funzioni differenti che siano ben distinguibili a seconda dello stato, ad esempio:

console.log( var, "Log ordinario...");
console.info( var, "Informazioni: ...");
console.warn( var, "warning...");
console.debug( var, "Debug...");
console.error( var, "errore...");

Photo by Nemo (Pixabay)

2 voti