Il pannello Elements è suddiviso in due distinte aree, una di destra e una di sinistra. E’ possibile allargare o diminuire la porzione di spazio riservata a ciascuna di queste due aree. Portandosi con il mouse sulla loro linea di separazione il cursore assumerà la forma di due piccole frecce. Tenendo premuto il tasto sinistro del mouse e trascinando il cursore verso destra o verso sinistra sarà possibile ridimensionare le due aree secondo le proprie specifiche esigenze.

Nella parte sinistra viene visualizzato il DOM della pagina web, ossia il suo codice HTML così come lo vede il browser, organizzato all’interno di una ben precisa struttura gerarchica ad albero dove ogni elemento HTML presente nella pagina rappresenta un ben preciso nodo della struttura stessa.

Il codice sorgente della pagina web potrebbe essere visualizzato anche attraverso l’apposita funzione “Visualizza Sorgente” presente nel menu contestuale che si apre effettuando un click col tasto destro del mouse in un qualsiasi punto della pagina.

In questo caso però quello che si visualizza è esattamente il codice della pagina così come è stato scritto o generato dallo strumento di gestione del sito quindi non necessariamente ben formattato e comunque non organizzato all’interno di una struttura gerarchia e quindi, generalmente, di difficile utilizzo.

All’interno del pannello Elements inoltre è possibile selezionare i vari elementi della pagina e navigare tra di essi in maniera interattiva. Cliccando sulla piccola freccia posta a fianco di questi elementi è possibile aprire o chiudere il relativo nodo individuando quindi immediatamente l’elemento padre, gli elementi posti allo stesso livello di quello selezionato ed eventuali elementi Figlio.

Come vedremo nel successivo capitolo di questa guida è inoltre possibile spostare i vari elementi presenti all’interno dell’albero, eliminarli, crearne di nuovi ecc…

Nella parte destra del pannello Elements vengono invece visualizzate, suddivise all’interno delle relative sezioni, le proprietà CSS, le caratteristiche del DOM e gli eventi javascript che agiscono sull’elemento attualmente selezionato all’interno della pagina web ed evidenziato anche nella parte sinistra di questo stesso pannello.

In particolare:

• La sezione denominata Styles è sicuramente quella più utilizzata in fase di sviluppo di un sito web. E’ qui infatti che possiamo vedere e modificare il codice CSS dell’elemento selezionato. Quando è presente, ad esempio, una proprietà come “background-image” che contiene un url, questo è cliccabile così da poter visualizzare la risorsa da esso linkata. Se è presente un colore nella proprietà CSS, come ad esempio in “color” questo viene visualizzato inizialmente come definito nel CSS, poi, cliccandoci sopra, lo si potrà visualizzare anche negli altri formati come rgb o hsl

Per ogni dichiarazione CSS è presente anche un link che ci permette di visualizzarla nel contesto dell’intero documento CSS nel quale è definita.

In fase di modifica quando cominciamo a digitare una proprietà CSS all’interno di questa sezione, i Developer Tools ci suggeriscono il suo completamento, rendendo quindi più facile e veloce il nostro lavoro.

Se una proprietà non è supportata o se non è riconosciuta da Chrome, questa ci viene segnalata con un triangolino giallo con un punto esclamativo bianco al suo interno. Infine se vogliamo disattivare una proprietà CSS non dovremo fare altro che cliccare sul checkbox alla destra della proprietà stessa.

Nel seguito di questa guida, più precisamente all’interno del capitolo “Lavorare con gli stili” vedremo comunque più nel dettaglio come utilizzare questa sezione

• Il pannello Computed consente di visualizzare l’elenco completo di tutte le proprietà CSS effettivamente applicate all’elemento selezionato indipendentemente da dove queste proprietà possano arrivare. All’interno di questa sezione non verranno quindi elencate, come avviene invece per il pannello Styles, proprietà CSS sovrascritte da altre proprietà analoghe ma a priorità maggiore.

Il check “Show inherited” consente di visualizzare, sempre in relazione all’elemento attualmente selezionato, le informazioni di stile ereditate direttamente dal set di stili di default del browser

Nella parte alta di questo pannello (e anche nella parte bassa del pannello Styles) vengono inoltre visualizzati una serie di rettangoli concentrici che rappresentano il cosiddetto Box Model dell’elemento selezionato e che permettono quindi di visualizzare in maniera chiara i valori di padding, margini, bordi, larghezza ed altezza di questo elemento.

Ogni valore presente all’interno di questi rettangoli può essere modificato con un doppio click e le modifiche apportate verranno visualizzate in tempo reale all’interno della pagina web.

• Il pannello Event Listeners consente di visualizzare i cosiddetti “Ascoltatori di Evento”. E’ possibile visualizzare gli ascoltatori registrati per tutti gli elementi HTML presenti nel DOM della pagina web oppure solo quelli presenti per l’elemento attualmente selezionato (per selezionare una di queste due opzioni è sufficiente agire dalla piccola icona posta in alto a destra del pannello)

ATTENZIONE! Per operare all’interno di questo pannello è necessaria una certa conoscenza a livello javascript per cui i dettagli relativi ad un suo utilizzo non saranno oggetto di questa guida.

Possiamo comunque chiarire alcuni concetti e dare alcune interessanti definizioni che risulteranno utili anche agli utenti meno esperti. In questo senso quindi possiamo dire che:

• Un evento è un oggetto che rappresenta il verificarsi di un’azione dell’utente o del sistema (es click del mouse, click su un tasto della tastiera, eventi temporizzati ecc.)
• Un listener (anche detto ascoltatore o ricevitore di evento) è un oggetto che attende il verificarsi di un dato evento, riceve una notifica quando questo si verifica ed esegue una certa azione in risposta al verificarsi di questo stesso evento

Eventi ed ascoltatori di eventi sono quindi elementi di fondamentale importanza per l’interfaccia utente di un sito web, perché è attraverso questi elementi che si può intercettare e gestire l’interazione dell’utente con la pagina web.

Cliccando sulla piccola freccia posta a fianco di ogni ascoltatore di evento presente all’interno di questo pannello è possibile visualizzare diverse informazioni in relazione ad esso. Tra queste quelle più utili per utenti meno esperti sono sicuramente le seguenti:

• isAttribute: parametro settato a True nel caso in cui l’evento in questione è stato registrato attraverso un attributo del DOM (es. onclick)
• node: il nodo del DOM su cui è stato registrato l’evento in questione. Passando con il mouse sopra questa informazione verrà evidenziato all’interno della pagina web il corrispondente elemento
• type: tipo dell’evento per il quale il listener è stato posto in ascolto (es. click)
• Il pannello DOM Breakpoints consente di visualizzare tutti i breakpoints impostati direttamente sul DOM della pagina web.

Un breakpoint impostato sul DOM della pagina web è in tutto e per tutto simile ai breakpoints normalmente impostati all’interno della sezione Sources degli Strumenti per Sviluppatori ed è utilizzato, come tutti i breakpoint, per mettere in pausa l’esecuzione del codice della pagina al verificarsi di determinate condizioni

In particolare un breakpoint javascript è impostato su di una specifica linea del relativo codice javascript e verrà scatenato solo ed esclusivamente nel momento in cui, in fase di esecuzione dovesse essere raggiunta quella specifica linea di codice.

Un DOM breakpoint è impostato invece su di un certo elemento HTML presente all’interno della pagina e viene scatenato, bloccando l’esecuzione del codice della pagina, solo ed esclusivamente nel momento in cui quello stesso elemento verrà in qualche modo modificato.

Per impostare un DOM breakpoint è sufficiente portarsi nel lato sinistro del pannello Elements, cliccare con il tasto destro del mouse in corrispondenza dell’elemento HTML in relazione al quale si vuole impostare il breakpoint e selezionare poi dal successivo menu contestuale la voce Break on

E’ possibile impostare tre diverse tipologie di breakpoint:

• Subtree modifications: questo tipo di breakpoint verrà scatenato, interrompendo l’esecuzione del codice della pagina, nel momento in cui dovesse essere spostato, aggiunto o eliminato un elemento figlio di quello in relazione al quale è stato impostato il breakpoint
• Attributes modifications: questo tipo di breakpoint verrà scatenato, interrompendo l’esecuzione del codice della pagina, nel momento in cui verrà apportata una qualche modifica ad un qualche attributo (es. id, class, name ecc…) dell’elemento in relazione al quale è stato impostato il breakpoint
• Node Removal: questo tipo di breakpoint verrà scatenato, interrompendo l’esecuzione del codice della pagina, nel momento in cui l’elemento in relazione al quale è stato impostato il breakpoint dovesse essere eliminato dalla pagina.

Come è semplice comprendere anche questo pannello, al pari del precedente richiede, per poter essere utilizzato in maniera appropriata, una certa conoscenza a livello di programmazione per cui, anche in questo caso, non entreremo in ulteriori dettagli

• Il pannello Properties consente, infine, di visualizzare (ed eventualmente modificare) tutte le proprietà (DOM, CSS, javascript ecc..) dell’elemento attualmente selezionato all’interno della pagina web e/o nella parte sinistra del pannello Elements.

Ora che abbiamo analizzato tutte le componenti e le diverse tipologie di informazioni presenti all’interno del pannello Elements possiamo passare ad esaminare un po’ più nel dettaglio come questo pannello possa essere utilizzato nella realizzazione delle nostre pagine web ponendo particolare attenzione alla gestione e alla modifica degli stili.