Il browser Mozilla Firefox integra una una ricca serie di strumenti indirizzati agli sviluppatori che permettono di analizzare a fondo i codici alla base di ogni pagina web. Uno di questi strumenti denominato “Analisi pagina” (Page Inspector nella versione inglese) permette di visualizzare dinamicamente gli elementi HTML ed i fogli di stile CSS presenti nelle pagine.
Richiamare la funzione “Analisi pagina” di Firefox
Per attivare lo strumento “Analisi pagina” dal menù principale di Firefox andiamo in “Sviluppo” e poi in “Analisi pagina”. In alternativa possiamo utilizzare la combinazione di tasti Ctrl+Maisc+c (in Windows) o Cmd-Option-C (in OS X).
In questo modo nella parte inferiore della finestra di Firefox apparirà l’area di analisi dei codici suddivisa in due box. A destra (elemento ‘a’ dell’immagine) è mostrato il codice HTML della pagina così come strutturato al momento della visualizzazione. Si tratta di una rappresentazione dinamica che non si limita a mostrare il sorgente della pagina ma evidenzia anche gli elementi caricati ad esempio tramite script. Il box sulla destra (b) invece contiene i codici dei fogli di stile CSS applicati ai vari elementi della pagina.
Muoversi tra i codici HTML e CSS
L’uso di base dello strumento “Analisi pagina” di Firefox è molto semplice. Portando il mouse su un qualsiasi elemento della pagina (ad esempio un titolo, un paragrafo, un box) verrà mostrato un piccolo messaggio che mostra gli elementi di stile applicati (c). Nell’immagine ad esempio si può notare come al testo evidenziato sia applicato il tag “h1” di HTML con le caratteristiche definite nel relativo foglio di stile.
Contemporaneamente nella parte inferiore della finestra di Mozilla Firefox la porzione di codice selezionata viene evidenziata nei box HTML e CSS per poterne analizzare in dettaglio le caratteristiche.