Chrome DevTools: da zero ad esperto

In questo corso studieremo gli strumenti messi a disposizione dai DevTools di Google Chrome per analizzare, effettuare il debug e migliorare il codice delle nostre applicazioni.

Inizieremo studiando la scheda Elements che ci permette di fare tutte le operazioni che vogliamo sul codice HTML e CSS, come nascondere o rimuovere elementi, copiarli o duplicarli, modificare gli attributi ecc.

Passeremo subito dopo ad analizzare la scheda Console, molto cara a noi programmatori JavaScript.

Proseguiremo poi con la scheda Sources (Sorgenti) che ci permette di visualizzare il contenuto dei file, ma anche modificarli al volo. Inoltre possiamo effettuare il debug del codice JavaScript, in modo professionale, evitando i classici console.log() sparsi nel nostro codice.

Non poteva mancare l'analisi della scheda Network, per ispezionare le attività di rete che avvengono tra client e server.

Infine, studieremo la scheda Lighthouse per analizzare e avere suggerimenti su come migliorare perfomance, accessibilità, best practices e SEO delle nostre pagine web.

Durante il corso svilupperemo piccoli applicativi, laddove necessari allo studio delle varie schede dei DevTools.

Creeremo anche un piccolo web server con Node per capire il comportamento del browser in caso di risorse bloccanti del rendering.

Il corso quindi non si limita ad una mera esplorazione dei vari strumenti dei DevTools.