A cosa servono Chrome DevTools?

Chrome DevTools è un file set di strumenti per la creazione e il debug di siti Web integrati in Google Chrome. Ovviamente possiamo anche usarli nella sua versione open source; Cromo.

È possibile accedere agli strumenti di Chrome per sviluppatori premendo la combinazione di tasti Ctrl + Maiusc + I, anche passando con il mouse su un elemento e facendo clic con il tasto destro su Ispeziona.

Componenti

Quando apriamo Chrome DevTools vediamo che appare un pannello a destra della pagina che stiamo navigando. Da parte sua, questo pannello eÈ suddiviso in schede corrispondenti a ciascuno degli strumenti. A loro volta, gli strumenti sono divisi in sezioni.
Le sezioni sono:

• Elementi: mostra i diversi componenti della pagina.
• Console: consente di eseguire la diagnostica durante lo sviluppo o di interagire con il codice Javascript come si farebbe con il terminale Linux.
• Fonti: semplifica il debug del codice Javascript e il lavoro con i file locali.
• Rete: aiuta a monitorare e migliorare le prestazioni della pagina.
• Sequenza temporale: consente la registrazione e l'esplorazione dei diversi eventi che si verificano durante la visita a un sito.
• Applicazione: esamina tutte le risorse caricate; tra gli altri, database IndexedDB o Web SQL, archiviazione locale e di sessione, cookie, cache delle app, immagini, caratteri e fogli di stile.
• Sicurezza: rileva i problemi di sicurezza nel codice.

Vediamo per cosa possiamo utilizzare Chrome DevTools

Correggi ciò che non funziona

È successo a tutti gli sviluppatori. Scrivi il codice, controlla gli errori e tuttavia quando arriva il momento critico la pagina non funziona come dovrebbe. Lo strumento Console mostra quale errore si sta verificando al momento dell'esecuzione.

Riduci il tempo di caricamento

Se una pagina impiega molto tempo per caricarsi, l'utente si stanca e va su un altro sito. Fortunatamente, l'era del Web Flash e delle sue introduzioni animate è finita. Ad ogni modo, la scheda Networks di Chrome DevTools rende più facile scoprire quali elementi stanno ritardando il carico. Possiamo ripetere il test per diverse velocità di connessione.

Modifica il codice

Nella scheda Elementi possiamo visualizzare gli elementi di una pagina, il relativo codice html e le proprietà css. Possiamo anche cambiarli.

Possiamo modificare il testo di una pagina usando il comando

document.designMode = 'on';

Prova schermi di dimensioni diverse

Tablet, smartphone, smart TV, computer desktop. Cresce l'elenco dei dispositivi con cui navighiamo in Internet. Con Chrome DevTools possiamo verifica se una pagina ha un bell'aspetto in dimensioni diverse.

Benchmarking

In Management il termine benchmarking significa imparare dalle migliori pratiche di chi fa come noi. Con Chrome DevTolls, se ci piace il design di un sito web possiamo farlo visualizzare il codice html e i fogli di stile css e copiarli sul nostro sito.

Ottenere Chrome DevTools

Chrome DevTools è disponibile sui browser Google Chrome e Chromium. Chromium è nei repository delle principali distribuzioni. Può anche essere installato dagli store di Scatto. Per quanto riguarda Google Chrome puoi arrivare qui. in formato DEB e RPM