Ispezione del box model con i DevTools del browser

Finora abbiamo scritto codice alla cieca, confidando che il browser lo interpretasse correttamente. Ma cosa fai quando un margine non funziona, un elemento è disallineato o compare una scrollbar orizzontale che non riesci a eliminare?

I professionisti non vanno per tentativi. Usano gli strumenti per sviluppatori integrati nel browser, i DevTools.

Cos’è l’Inspector?

In Chrome, Firefox, Edge o Safari, clicca col tasto destro su un qualsiasi elemento della pagina e seleziona “Ispeziona” (o “Analizza elemento”). Si aprirà un pannello.

Questo pannello è diviso tipicamente in due metà:

1. Pannello DOM (Elements): L’albero HTML effettivo della pagina.
2. Pannello Stili (Styles): Tutte le regole CSS applicate all’elemento che hai selezionato nell’albero HTML.

Visualizzare il Box Model in tempo reale

La funzione più utile dell’Inspector per la formattazione è il diagramma del Box Model. Nel pannello degli stili (spesso in fondo, o nella tab “Layout”/“Computed”), vedrai una rappresentazione grafica a scatole concentriche:

1. Rettangolo azzurro interno: Content (Dimensioni reali)
2. Cornice verde: Padding
3. Cornice gialla/arancione: Border
4. Cornice arancione/marroncina: Margin

Passando col cursore sopra ciascuna di queste aree nel DevTools, il browser evidenzierà con quel colore l’elemento direttamente sulla pagina web!

• Se vedi una zona arancione enorme sulla pagina, sai che c’è un margine esagerato.
• Se vedi un blocco verde dove non te lo aspettavi, sai che stai calcolando male il padding.

Come usare i DevTools per fare Debug

I DevTools non sono di sola lettura. Puoi usarli per modificare il sito in diretta!

1. Modifica valori al volo: Clicca sul valore di un margine nel pannello Styles e usa le frecce su/giù della tastiera per aumentare o diminuire i pixel e vedere il layout adattarsi in tempo reale.
2. Disabilita regole CSS: Ogni riga di CSS nel DevTools ha una checkbox accanto. Selezionala o deselezionala per attivare/disattivare regole specifiche (es. disabilita un margine per capire se è lui il colpevole della rottura del layout).
3. Forza lo stato Hover: A volte devi ispezionare un pulsante che cambia colore solo quando ci passi sopra col mouse. Nel DevTools c’è un pulsante speciale :hov che ti permette di “bloccare” lo stato dell’elemento su :hover, così puoi ispezionare il CSS che si attiva in quello stato.

Se non fai amicizia con i DevTools oggi, scriverai CSS tirando ad indovinare per il resto della tua carriera. Apri Ispeziona Elemento su questa stessa pagina che stai leggendo e prova a cambiare il colore di sfondo di questo testo!