I Chrome Developer Tools consentono di effettuare il debug avanzato di applicazioni front-end in maniera semplice e veloce
L’espansione del front-end ha fatto in modo che sempre più tool fossero sviluppati per semplificare ed ottimizzare lo sviluppo di applicazioni web. Tra i tool più conosciuti vi è FireBug di Mozilla, un’estensione del browser FireFox, e il debugger messo a disposizione da Google: Chrome Developer Tools. Questi ultimi sono accessibili da Google Chrome digitando il tasto F12 della tastiera ed è possibile effettuare numerose operazioni come visualizzare il sorgente di una pagina. Ecco cosa vedremo aprendo il tab Elements:
Dal tab Elements è possibile selezionare un elemento utilizzando il puntatore in alto a sinistra in modo da recuperare direttamente il codice ad esso associato.
Posizionandoci su un elemento contenuto in Elements, il corrispettivo elemento nella pagina web sarà evidenziato in blu:
In alternativa, per poter individuare un elemento è possibile cliccare con il tasto destro del mouse su un elemento e selezionare “Ispeziona elemento“.
Sempre nel tab Elements è possibile esaminare nella colonna di destra le regole di stile (CSS) degli elementi. Eventualmente è possibile applicare determinate proprietà come l’hover su un elemento.
Nel tab Console è possibile visualizzare i vari messaggi della console come eventuali errori:
Nel tab Network dei Chrome Developer Tools è possibile esaminare le richieste inviate al server, nelle URL individuate troveremo tutte le informazioni come i parametri passati nell’Header.
In Timeline è possibile esaminare cosa succede quando si carica la pagina ed esaminare il tempo di caricamento degli elementi.
Infine nel tab Resources possiamo esaminare i dati memorizzati nei vari file, come i dati contenuti in sessione e nei cookie:
Debuggare il codice tramite Chrome con i breakpoint
Una delle funzionalità più importanti dei Chrome Developer Tools è la possibilità di debuggare il codice. Nel tab Sources è possibile recuperare i file caricati all’interno della pagina nella colonna Sources sulla sinistra oppure tramite il comando Ctrl + P.
All’interno dei file è possibile posizionare dei breakpoint, questi indicano al compilatore di fermarsi in quel punto quando si sta eseguendo quel file e di restare in attesa di istruzioni.
Alcuni dei comandi messi a disposizione per debuggare il codice in Google Chrome sono:
- F8: utilizzato per mandare avanti l’esecuzione o metterla in pausa;
- F10: indica al dubugger di saltare direttamente alla funzione successiva;
- F11: consente di andare alla prima riga della funzione successiva;
- Shift + F11: indica di uscire dalla funzione in cui mi trovo e di andare alla prima riga di codice successiva dopo la funzione;
- Ctrl + F8: consente di disattivare momentaneamente i breakpoint.
Ecco un esempio in cui il debugger si è fermato sul breakpoint indicato ed è in attesa di nostre istruzioni.
Infine, cliccando il tasto destro su una riga del codice nel tab Sources è possibile aggiungere breakpoint condizionali, ovvero dei breakpoint che si attivano solo se la condizione verificata è verificata (ad esempio se ci si vuole fermare solo quando il valore contenuto in una variabile myVar è negativo, nella condizione scriveremo: myVar < 0).
Un’estensione molto utile messa a disposizione da Google Chrome è Postman per effettuare velocemente chiamate API.
