Utilizzare lo strumento "Ispeziona" di Google Chrome per la diagnostica dei siti web

Google Chrome non è solo un browser veloce per i consumatori: nasconde anche una serie di funzionalità per sviluppatori. Puoi rivelare parte di questo potere con lo strumento “Ispeziona”. Anche se inizialmente può sembrare opprimente, lo strumento ti offre una visione di come sono costruiti i siti web e può aiutarti a eseguire il debug dei tuoi siti.

Accesso allo strumento Ispeziona

Lo strumento Ispeziona si trova nel menu contestuale di Chrome.

Fai clic destro su qualsiasi elemento nel tuo browser e seleziona “Ispeziona” nel menu contestuale.

Una finestra apparirà sul lato del browser Chrome come mostrato di seguito. Questo è chiamato il pannello DevTools. Se hai mai usato Firebug su Firefox, potresti riconoscere alcune parti di esso.

C’è molto qui, quindi esaminiamo i singoli pezzi.

Ispezionare l’Ispezionatore

Il pannello di ispezione è diviso in diverse schede che sono visibili nella parte superiore della finestra. Ci concentreremo sulla scheda predefinita Elementi.

Ci sono due pulsanti utili accanto a queste schede. Il primo è lo strumento Ispeziona elemento.

Questo strumento ti consente di passare il mouse e selezionare diversi elementi DOM da ispezionare.

Il secondo pulsante attiva la modalità Anteprima dispositivo. In questa modalità puoi vedere come appare la tua pagina web a diverse risoluzioni e dimensioni dello schermo.

Se fai clic su quel pulsante, vedrai la tua pagina web adattarsi a una nuova visualizzazione.

Puoi quindi utilizzare il menu a discesa sopra l’anteprima della pagina o le maniglie sui lati dell’anteprima della pagina per ridimensionare la finestra di anteprima del dispositivo.

Visualizzazione HTML

La maggior parte della scheda DevTools è occupata dal pannello HTML.

Questo pannello è come una “Visualizza sorgente” superpotente. È strutturato secondo il DOM, con elementi annidati all’interno dei loro elementi genitori.

Vedrai che l’elemento che hai “ispezionato” all’inizio è automaticamente evidenziato con uno sfondo grigio o blu. Qui, ho ispezionato un’immagine contenuta in un link. Come previsto, vedo un tag di ancoraggio evidenziato.

Ma dov’è la mia immagine? Posso rivelare qualsiasi elemento DOM annidato nel tag di ancoraggio facendo clic sul triangolo di espansione accanto ad esso. In questo caso, la freccia rivela il tag che mi aspettavo di trovare.

Noterai anche una piccola barra di menu nella parte inferiore del pannello HTML.

Questa è chiamata la “traccia di navigazione” e ti mostra tutti gli elementi genitori dell’elemento selezionato. Per navigare verso uno di quegli elementi, fai semplicemente clic su di esso.

Stili

Sotto la visualizzazione HTML vediamo anche un pannello che mostra eventuali regole CSS che si applicano al nostro elemento. Questo è chiamato pannello Stili, e in questo caso vediamo tutte le regole che si applicano al tag di ancoraggio che ho ispezionato in precedenza.

Puoi attivare o disattivare una regola passando il mouse sopra di essa e facendo clic sulla casella di controllo accanto.

Vedrai questo cambiamento riflesso immediatamente nell’anteprima della pagina. E se fai clic direttamente su una regola, puoi cambiarne il nome e il valore.

Puoi anche cercare regole particolari utilizzando la casella di ricerca Filtra.

Il pannello Stili è in grado di fare molto di più di questo, però. Controlla la documentazione di Google per una spiegazione completa delle molte funzioni del pannello Stili.

Modello di Box e Stile Calcolato

Accanto alla visualizzazione degli stili c’è il modello di box per il mio elemento selezionato. Se non sei familiare, il modello di box è una rappresentazione astratta del margine, del bordo, del padding e della dimensione del contenuto applicati a un particolare elemento.

In questo caso posso vedere che il mio elemento ha una dimensione primaria di 461 x 209 pixel. Non contiene regole di margine, bordo o padding, quindi quelle caselle sono vuote.

Se scegli un elemento con alcune regole di posizione, margine, bordo o padding, il tuo modello di box potrebbe apparire più simile a questo.

Puoi anche vedere un modello di box in situ se passi il mouse sugli elementi DOM con lo strumento Ispeziona elemento attivato.

Sotto il modello di box c’è un elenco di tutte le regole di stile che si applicano a questo particolare elemento. Questo è leggermente diverso dal pannello Stili. Non visualizza le righe effettive di CSS, ma solo gli effetti di quelle regole. Questo è chiamato lo “stile calcolato” dell’oggetto, ed è il risultato combinato del tuo CSS.

Infine, puoi cercare regole particolari digitando nella casella Filtra.

Conclusione

Se lavori frequentemente con le pagine web, lo strumento Ispeziona di Chrome vale sicuramente la pena esplorare. E le altre schede in DevTools, come Console e Rete, possono essere inestimabili per gli sviluppatori. C’è molto di più di quanto possiamo coprire in questo momento, ma la documentazione di Google è completa e utile.