Come usare console.log in Javascript

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)

1 voto


Informazioni sull'autore

Salvatore Capolupo

Consulente SEO, ingegnere informatico e fondatore di Trovalost.it, Pagare.online, Lipercubo.it e tanti altri. Di solito passo inosservato e non ne approfitto.