Come utilizzare il debugger di Google Chrome

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:

Google Developer Tools - 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.

Google Developer Tools - Seleziona elemento

Posizionandoci su un elemento contenuto in Elements, il corrispettivo elemento nella pagina web sarà evidenziato in blu:

Google Developer Tools - Seleziona elemento

In alternativa, per poter individuare un elemento è possibile cliccare con il tasto destro del mouse su un elemento e selezionare “Ispeziona elemento“.

Google Developer Tools - Ispezione

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.

Google Developer Tools

Google Developer Tools

Nel tab Console è possibile visualizzare i vari messaggi della console come eventuali errori:

Google Developer Tools - Console

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.

Chrome Developer Tools - Network

In Timeline è possibile esaminare cosa succede quando si carica la pagina ed esaminare il tempo di caricamento degli elementi.

Google Developer Tools - Timeline

Infine nel tab Resources possiamo esaminare i dati memorizzati nei vari file, come i dati contenuti in sessione e nei cookie:

Google Developer Tools - 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.

Google Developer Tools - Breakpoint

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.

Google Developer Tools - Debugger

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *