Come usare console.log in Javascript

Come usare console.log in Javascript

Attivare la console di Firebug (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 HS (CTRL J). 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.

Si tratta di una delle caratteristiche più importanti del succitato Firebug, 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)

Ti piace questo articolo?

0 voti

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.