F12: un caccia bombardiere per sviluppatori web!

In questo post voglio parlarvi degli strumenti messi a disposizione da ogni browser moderno per i programmatori web.

Qualche anno fa, era abbastanza complicato mettere a posto del codice errato scritto in javascript, tenendo anche conto che è un linguaggio interpretato che lascia molta libertà al programmatore.

Lo strumento più in voga era l'utilizzo dell' alert, disseminato in vari punti del codice, per tracciare il valore delle variabili durante l'esecuzione, nell'arduo tentativo di capire cosa non andasse; chissà quante volte ho scordato poi alcuni alert in giro in produzione.

Per fortuna oggi abbiamo a disposizione potenti strumenti per capire cosa succede durante l'esecuzione del nostro codice js: premete F12 su qualsiasi browser: et voilà!

Io uso da una vita chrome, ma più o meno le stesse funzionalità sono presenti su tutti gli altri browser presenti sul mercato: gli strumenti di sviluppo si visualizzeranno in fondo alla pagina, potete poi decidere se visualizzare a tutto schermo o aprire il tutto inn una finestra dedicata tramite i pulsanti presenti in fondo a destra.

Quando il browser esegue del codice js, tenete sempre sott'occhio il tab Console: se ci sono errori durante l'esecuzione, l'interprete js del browser visualizza su questa Console messaggi che possono aiutare a capire cosa non va.

Facciamo un esperimento: inserirò in questa stessa pagina del codice js errato, tentando di accedere a proprietà di un oggetto non definito

 <script>  
   var ivan;  
   console.log(ivan.cognome);  
 </script>  

Aprite la console con f12 -> Console e dovreste, eventualmente tra altri errori generati dal sito blogger.com, vedere il seguente messaggio: Uncaught TypeError: Cannot read property 'cognome' of undefined 

Nel vostro codice, potete sempre scrivere sulla Console utilizzando l'oggetto globale console, magari per tracciare il valore di determinati oggetti.

 <script>  
   var persona;  
      persona.nome = 'ivan';  
      persona.cognome = 'saracino';  
      console.log(persona);  
 </script>  

Sulla Console degli strumenti, dovreste visualizzare tutte le informazioni dell'oggetto persona.

Lo strumento più in utile in assoluto è il debugger js che ci permette di eseguire il nostro codice passo dopo passo, eventualmente ispezionando i valori delle varibili del nostro programma dopo ogni istruzione eseguita.

Per attivare questa funzionalità, click sul tab Sources, selezionare a sinistra la pagina che contiene i nodi <script> inline che si vogliono analizzare o i file esterni javascript collegati alla pagina.

Nella parte centrale, se selezionate la index.html del sito blogger, troverete tutto html molto complesso in cui è presente il frammento

 <script>  
   var ivan;  
   console.log(ivan.cognome);  
 </script>  

Magari utilizzate il campo di ricerca, inserendo la parola ivan, per arrivare a visualizzare il frammento di codice in questione

Nel mio caso, ho attivato un punto d'interruzione (breakpoint) in corrispondenza della linea che cerca di usare la console, ho ricaricato la pagina con ctrl+F5, l'esecuzione si interrompe prima dell'esecuzione della linea di codice inn question: avete la possibililtà, col mouse, di visualizzare i valori delle varibili: in questo caso ho evidenziato il valore undefined della variabile ivan.

Per continuare con l'esecuzione potete utilizzare i seguenti pulsanti

Il primo pulsante continua l'esecuzione fino, eventualmente, al prossimo punto d'interruzione impostato.
Il secondo pulsante esegue (step on to) l'istruzione successiva interrompendosi all'istruzione successiva: se l'istruzione successiva è una intera funzione, viene eseguita in un colpo solo.
Il terzo pulsante esegue (step in to) l'istruzione successiva interrompendosi all'istruzione successiva: se l'istruzione successiva è una intera funzione, l'esecuzione si interrompe alla prima istruzione della funzione stessa.
Il quarto pulsante esegue (step out), senza interrompersi, la funzione corrente, fino alla prima istruzione fuori dalla funzione stessa.
Il quinto pulsante disabilità tutti i punti d'interruzione impostati.
L'ultimo pulsante abilita la modalità di pausa forzata nel caso di errori.

Esiste poi la sezione watch

che vi permette di definire qualsiasi espressione da valutare durante l'esecuzione passo passo.

Alla prox.
Ivan