La funzione “Ispeziona elemento” del browser è uno degli strumenti fon­da­men­ta­li quando si lavora con siti e ap­pli­ca­zio­ni web. Nota anche come “Analizza elemento”, essa rientra tra gli strumenti per svi­lup­pa­to­ri di Chrome.

Cosa sono gli strumenti per svi­lup­pa­to­ri di Chrome?

La fun­zio­na­li­tà “Ispeziona elemento” rientra tra gli strumenti di sviluppo web del browser, co­no­sciu­ti su Chrome anche come “Chrome DevTools”. Questi sono il risultato di una lunga storia di sviluppo iniziata con “Firebug” in Firefox e “Web Inspector” in WebKit (Safari) intorno al 2006.

Di per sé, non si tratta quindi di una funzione autonoma, ma serve sem­pli­ce­men­te come punto di partenza per aprire i Chrome DevTools. Infatti, qui è inclusa una raccolta di strumenti es­sen­zia­li per lavorare con le pagine web, uti­liz­za­ti nelle aree di pro­get­ta­zio­ne, sviluppo, analisi e ot­ti­miz­za­zio­ne. Gli altri browser con­ten­go­no fun­zio­na­li­tà equi­va­len­ti:

Immagine: Ispeziona elemento su Chrome
La funzione “Ispeziona elemento” in Chrome su macOS.
Immagine: Ispeziona elemento in Firefox su macOS
La funzione “Ispeziona elemento” in Firefox su macOS.
Immagine: Ispeziona elemento in Safari
La funzione “Ispeziona elemento” in Safari su macOS.
N.B.

In tutto il testo uti­liz­zia­mo come esempio il sito web “https://en.wikipedia.org/wiki/Web_de­ve­lo­p­ment_tools”.

So­li­ta­men­te, un documento HTML è la struttura di base di ogni sito web. In esso sono integrati il contenuto vero e proprio, prin­ci­pal­men­te testo e immagini, nonché altre risorse come fogli di stile, script e font. Il browser combina tutte le in­for­ma­zio­ni di una pagina web ela­bo­ran­do in tal modo il suo aspetto visivo.

Tra­di­zio­nal­men­te, la com­pren­sio­ne delle relazioni tra i com­po­nen­ti di una pagina web ri­chie­de­va l’analisi del documento HTML e del codice sorgente delle altre risorse. Oggi questa ope­ra­zio­ne risulta pra­ti­ca­men­te im­pos­si­bi­le, poiché sui siti moderni si uti­liz­za­no pre­va­len­te­men­te CSS e Ja­va­Script. Qui entrano in gioco gli strumenti per svi­lup­pa­to­ri di Chrome: se si vuole esaminare un sito web, i DevTools per­met­to­no di dare uno sguardo dietro le quinte. Infatti, con­sen­to­no l’analisi di tutti gli aspetti di un sito web:

Aspetto web Mezzo di co­mu­ni­ca­zio­ne o lingua
Contenuti testo, immagini, elementi mul­ti­me­dia­li, ecc.
Struttura HTML
Pre­sen­ta­zio­ne grafica CSS
Com­por­ta­men­to Ja­va­Script

“Ispeziona elemento”: spie­ga­zio­ne della funzione Chrome DevTools

Un browser recupera un documento HTML da un server e lo vi­sua­liz­za. L’HTML definisce la struttura del documento: quali elementi sono presenti e come sono annidati l’uno nell’altro. Il documento si trova sul server sotto forma di codice sorgente, che ne co­sti­tui­sce solo la base.

Partendo da questo, il browser crea il co­sid­det­to Document Object Model (DOM). Se si guarda solo al codice sorgente, non tutte le in­for­ma­zio­ni sono di­spo­ni­bi­li o fa­cil­men­te visibili. È facile com­pren­de­re la struttura HTML dei singoli elementi uti­liz­zan­do editor di markdown.

Consiglio

Volete saperne di più su HTML e CSS? Abbiamo gli articoli giusti per voi:

A cosa servono i Chrome DevTools?

Per capire l’utilità della funzione “Ispeziona elemento”, vale la pena di con­fron­tar­la con quella “Vi­sua­liz­za sorgente”, ancora esistente, che apre il codice sorgente di un documento HTML nel browser. Questa ormai risulta utile solo in parte, poiché mostra solo una piccola parte delle in­for­ma­zio­ni di una pagina web. Ad esempio, mancano tutti gli elementi che vengono inseriti di­na­mi­ca­men­te nella pagina da Ja­va­Script.

Solo tramite “Ispeziona elemento” o i Chrome DevTools è possibile ottenere una rap­pre­sen­ta­zio­ne di tutti gli elementi DOM, sia quelli definiti sta­ti­ca­men­te nell’HTML che quelli generati di­na­mi­ca­men­te da Ja­va­Script. Inoltre, viene vi­sua­liz­za­ta la struttura effettiva degli elementi, comprese le classi e gli ID. Gli strumenti per svi­lup­pa­to­ri di Chrome con­sen­to­no di ma­ni­po­la­re gli elementi e di rendere im­me­dia­ta­men­te visibili gli effetti.

Vi­sua­liz­za sorgente Ispeziona elemento
Rap­pre­sen­ta­zio­ne di codice sorgente DOM
Elementi integrati solo statici statici e dinamici
Pos­si­bi­li­tà di modifiche modifica del codice sorgente ma­ni­po­la­zio­ne degli elementi
Vi­sua­liz­za­zio­ne delle modifiche dopo aver ag­gior­na­to la pagina sin da subito

Gli strumenti per svi­lup­pa­to­ri di Chrome includono tutti i com­po­nen­ti di un sito web e vi­sua­liz­za­no l’andamento temporale del re­pe­ri­men­to delle risorse. È possibile valutare anche il processo di fusione e le pre­sta­zio­ni del processo, nonché la me­mo­riz­za­zio­ne dei dati del sito web nei cookie e nella memoria locale (Lo­cal­Sto­ra­ge).

Come si accede agli strumenti per svi­lup­pa­to­ri di Chrome?

La funzione “Ispeziona elemento” dipende dal contesto: fate clic con il pulsante destro del mouse su un elemento e se­le­zio­na­te la voce “Ispeziona elemento” dal menu con­te­stua­le che appare. In questo caso si tratta dei browser Chrome e Firefox:

Immagine: Menu contestuale con la voce “Ispeziona elemento” su Chrome
La funzione “Ispeziona elemento” nel menu con­te­stua­le di Chrome.
Immagine: Menu contestuale con la voce “Ispeziona elemento” su Firefox
La funzione “Ispeziona elemento” nel menu con­te­stua­le di Firefox.

In Safari con macOS Monterey, gli strumenti per svi­lup­pa­to­ri sono di­sat­ti­va­ti per im­po­sta­zio­ne pre­de­fi­ni­ta. Per poter uti­liz­za­re “Ispeziona elemento”, attivate la funzione nelle im­po­sta­zio­ni alla voce “Avanzate”. Ora trovate la voce “Ispeziona elemento” nel menu con­te­stua­le:

Immagine: Menu per sviluppatori attivato nelle impostazioni avanzate di Safari
Attivate il menu per svi­lup­pa­to­ri nelle im­po­sta­zio­ni avanzate di Safari.
Immagine: Menu contestuale con la voce “Ispeziona elemento” su Safari
Attivando gli strumenti per svi­lup­pa­to­ri viene vi­sua­liz­za­ta la voce “Ispeziona elemento” nel menu con­te­stua­le.

Esistono anche una serie di scor­cia­to­ie da tastiera per aprire gli strumenti. Queste variano a seconda del browser e del sistema operativo; tuttavia, si sono affermati alcuni standard. In ciascuno dei tre browser più diffusi, Chrome, Firefox e Safari, funziona la scor­cia­to­ia [Cmd] + [Option] + [i] (Mac) o [Ctrl] + [Maiusc] + [i] (Windows e Linux).

A eccezione di Safari, il tasto F12 viene anche usato come scor­cia­to­ia al­ter­na­ti­va. Entrambe le scor­cia­to­ie sono dei co­sid­det­ti “Toggle” che aprono e chiudono Chrome DevTools quando vengono uti­liz­za­te ri­pe­tu­ta­men­te.

Browser Windows + Linux Mac
Chrome F12 / Ctrl+Maiusc+i F12 / Cmd+Option+i
Firefox F12 / Ctrl+Maiusc+i F12 / Cmd+Option+i
Safari – Cmd+Option+i

Quando si aprono i Chrome DevTools, ini­zial­men­te vengono vi­sua­liz­za­ti ag­gan­cia­ti nella stessa finestra. È possibile scegliere se vi­sua­liz­zar­li a destra, a sinistra o sotto la pagina web, ma anche in una finestra separata. Quando si lavora in­ten­si­va­men­te a un progetto, ciò risulta par­ti­co­lar­men­te pratico: è possibile po­si­zio­na­re il sito web e gli strumenti di sviluppo uno accanto all’altro oppure di­stri­bui­re le finestre su più schermi.

N.B.

Negli altri screen­shot mostriamo solo gli strumenti per svi­lup­pa­to­ri di Chrome.

Immagine: Menu degli strumenti per sviluppatori con la selezione dei DevTools
Scegliamo la posizione dei Chrome DevTools nel menu con tre punti.
Immagine: Gli strumenti per sviluppatori aperti in una finestra del browser
Aprite gli strumenti per svi­lup­pa­to­ri di Chrome in una finestra del browser.

È possibile ispe­zio­na­re un sito web con Chrome DevTools su uno smart­pho­ne?

Mentre la funzione “Ispeziona elemento” è standard in tutti i browser per il desktop, purtroppo non è di­spo­ni­bi­le sugli smart­pho­ne. In­nan­zi­tut­to, non c’è spazio suf­fi­cien­te per vi­sua­liz­za­re i DevTools a causa dello schermo più piccolo; inoltre, manca il mouse come di­spo­si­ti­vo di input preciso. In iOS, la si­tua­zio­ne rimane difficile perché tutti i browser sono limitati all’engine WebKit di Apple.

Invece di uti­liz­za­re i Chrome DevTools sullo smart­pho­ne, si uti­liz­za­no gli emulatori, ovvero si imita un di­spo­si­ti­vo mobile nel browser per il desktop. So­prat­tut­to, la modalità re­spon­si­ve degli strumenti per svi­lup­pa­to­ri di Chrome è estre­ma­men­te pratica. Inoltre, per iOS e Android è possibile collegare uno smart­pho­ne fisico al computer desktop. Anche in questo caso, il sito web caricato viene esaminato nel browser per il desktop. Per iOS, questo richiede un Mac e lo stesso account iCloud su entrambi i di­spo­si­ti­vi.

Immagine: Modalità responsive degli strumenti per sviluppatori
Con la modalità re­spon­si­ve si possono emulare diversi di­spo­si­ti­vi mobili. Qui viene vi­sua­liz­za­to un esempio con l’iPad Mini.

Come si usano gli strumenti per svi­lup­pa­to­ri di Chrome?

Gli strumenti per svi­lup­pa­to­ri di Chrome fun­zio­na­no per tutti i contenuti vi­sua­liz­za­ti nel browser e sono molto utili nelle aree di sviluppo, design e SEO. Grazie alla dif­fu­sio­ne della tec­no­lo­gia web, si sono affermate altre possibili ap­pli­ca­zio­ni. Di seguito forniamo un riepilogo delle funzioni e delle ap­pli­ca­zio­ni.

Sviluppo web

Gli strumenti per svi­lup­pa­to­ri di Chrome sono uti­liz­za­ti nello sviluppo web per la creazione di prototipi, per i test e per il debug. Un uso comune è quello di definire una nuova regola di stile CSS e ap­pli­car­la agli elementi. Ne diamo una di­mo­stra­zio­ne con l’esempio di una classe di debug. Se as­se­gnia­mo la classe a un elemento, tutti gli elementi figli vengono vi­sua­liz­za­ti con un carattere rosso. Inoltre, gli elementi sono dotati di un bordo dorato. In questo modo è possibile dia­gno­sti­ca­re gli errori di layout. Di seguito il codice CSS da uti­liz­za­re:

.debug * {
    color: red !important;
    outline: 1px solid gold;
}
CSS
Immagine: Interfaccia per la definizione di nuove regole di stile
Fate clic sul pulsante “+” per definire nuove regole di stile.
Immagine: Selettore per la regola dello stile di debug
Inserite “.debug *” come selettore. Non di­men­ti­ca­te il punto prima di “debug”.
Immagine: Codice CSS per la regola dello stile di debug
Fate clic tra le parentesi graffe e incollate il codice CSS.
Immagine: Effetto della regola di stile di debug sull’elemento body
Se­le­zio­na­te prima un elemento. Facendo clic su “.cls” si apre un campo di im­mis­sio­ne per le classi, nel quale si inserisce “debug”. Im­por­tan­te: il nome della classe non deve essere preceduto da un punto. L’effetto è im­me­dia­ta­men­te visibile sul lato sinistro.

Per uti­liz­za­re gli strumenti per svi­lup­pa­to­ri di Chrome per il debug e l’analisi, as­si­cu­ra­te­vi di di­sa­bi­li­ta­re la cache del browser. In caso contrario, le risorse po­treb­be­ro essere caricate dalla cache locale e quindi gli elementi vi­sua­liz­za­ti po­treb­be­ro non ri­flet­te­re le con­di­zio­ni reali. L’im­po­sta­zio­ne per di­sat­ti­va­re la cache si trova nella scheda Rete, adatta anche per ana­liz­za­re errori del tipo ERR_SSL_PROTOCOL_ERROR.

Immagine: Disattivare la cache del browser quando si utilizzano i Chrome DevTools
L’im­po­sta­zio­ne che prevede la di­sat­ti­va­zio­ne della cache del browser deve essere sempre attiva.

Spesso è utile accedere all’elemento esaminato nella console Ja­va­Script degli strumenti per svi­lup­pa­to­ri di Chrome. Con­ven­zio­nal­men­te, il browser fornisce la variabile $0, che fa ri­fe­ri­men­to all’elemento esaminato. È un normale oggetto DOM alle cui proprietà e metodi possiamo accedere. Di seguito alcuni esempi di in­te­ra­zio­ni utili con l’elemento esaminato:

# currently inspected element
$0
# get classes of inspected element
$0.classList
# get ID of inspected element
$0.getAttribute('id')
Ja­va­Script
Immagine: L’elemento ispezionato nella console di JavaScript
Accedete all’elemento ispe­zio­na­to dalla console di Ja­va­Script.
Consiglio

De­si­de­ra­te creare il vostro sito web? IONOS offre diverse soluzioni per aiutarvi ad avviare la vostra attività sul web. Per esempio, create un sito web con un dominio personale in pochi clic. Con un pacchetto Web Hosting di IONOS siete poi par­ti­co­lar­men­te fles­si­bi­li.

Web design

Gli strumenti per svi­lup­pa­to­ri di Chrome sono am­pia­men­te uti­liz­za­ti nel web design. Risultano es­sen­zia­li, so­prat­tut­to per la creazione di design re­spon­si­ve con framework di utilità come Tailwind CSS. Per­met­to­no di attivare e di­sat­ti­va­re ra­pi­da­men­te le classi di un elemento e di vi­sua­liz­zar­ne im­me­dia­ta­men­te gli effetti. Inoltre, è possibile leggere i valori CSS calcolati dell’elemento esaminato.

Immagine: Modalità responsive degli strumenti per sviluppatori di Chrome
Quando la modalità re­spon­si­ve è attivata (in rosso), il viewport della pagina è re­go­la­bi­le ra­pi­da­men­te. È possibile se­le­zio­na­re un’im­po­sta­zio­ne pre­de­fi­ni­ta (turchese) o tra­sci­na­re il cursore (verde).
Immagine: Campo della classe degli strumenti per sviluppatori di Chrome
Le classi CSS possono essere aggiunte ra­pi­da­men­te o attivate e di­sat­ti­va­te tramite il campo della classe. Qui l’esempio con la nostra classe di debug.
Immagine: Proprietà CSS calcolate dell’elemento esaminato
Le proprietà CSS calcolate con­ten­go­no anche la spa­zia­tu­ra esterna e interna.
Consiglio

IONOS vi fornisce un valido aiuto per il vostro web design: con MyWebsite Now lavorate con template già pronti e costruite così un sito web pro­fes­sio­na­le anche senza co­no­scen­ze di CSS. Ad esempio, avete la pos­si­bi­li­tà di creare un sito aziendale com­pren­si­vo di avviso sui cookie e in­for­ma­zio­ni sulla privacy.

Ot­ti­miz­za­zio­ne per i motori di ricerca (SEO)

Gli strumenti per svi­lup­pa­to­ri di Chrome sono uti­liz­za­ti anche per l’ot­ti­miz­za­zio­ne per i motori di ricerca. Un’im­por­tan­te ca­rat­te­ri­sti­ca SEO on-page è il markup se­man­ti­ca­men­te corretto dei titoli. Uti­liz­za­te la funzione “Ispeziona elemento” per ana­liz­za­re la struttura dell’in­te­sta­zio­ne:

Immagine: Titolo analizzato con Ispeziona elemento
Nel caso dell’elemento ispe­zio­na­to si tratta di un titolo H1.

Le pre­sta­zio­ni del ca­ri­ca­men­to di una pagina sono un fattore cruciale per il po­si­zio­na­men­to sui motori di ricerca e per l’espe­rien­za utente. Uti­liz­zia­mo la scheda Rete degli strumenti per svi­lup­pa­to­ri di Chrome per ana­liz­za­re le risorse caricate, comprese le di­men­sio­ni e il tempo di ca­ri­ca­men­to:

Immagine: Scheda Rete degli strumenti per sviluppatori di Chrome
La scheda Rete elenca le risorse caricate e fornisce in­for­ma­zio­ni sulle di­men­sio­ni totali e i tempi di ca­ri­ca­men­to della pagina. A destra è rap­pre­sen­ta­to il com­por­ta­men­to di ca­ri­ca­men­to delle risorse nel tempo.

Nei Chrome DevTools è integrato anche lo strumento Google Lighthou­se, che sottopone una pagina a diverse verifiche rilevanti per la SEO. Le versioni desktop e mobile della pagina possono essere ana­liz­za­te se­pa­ra­ta­men­te:

Immagine: Scheda Lighthouse degli strumenti per sviluppatori di Chrome
La funzione Lighthou­se ha una propria scheda.
Immagine: Test per i dispositivi mobili con Lighthouse nei Chrome DevTools
L’analisi con Lighthou­se per la versione mobile di una pagina avviene con un mockup mobile.
Immagine: Risultato dell’audit con Lighthouse negli strumenti per sviluppatori di Chrome
Un audit con Lighthou­se fornisce risultati completi.

Per­so­na­liz­za­re la pagina

Oltre alle ap­pli­ca­zio­ni pro­fes­sio­na­li degli strumenti per svi­lup­pa­to­ri di Chrome già pre­sen­ta­te, questi sono adatti anche per per­so­na­liz­za­re una pagina web vi­sua­liz­za­ta nel browser. Questa funzione è par­ti­co­lar­men­te pratica per preparare le pagine per la stampa o gli screen­shot. Uno dei trucchi più comuni consiste nell’uti­liz­za­re “Ispeziona elemento” per in­di­vi­dua­re e na­scon­de­re de­ter­mi­na­ti elementi. In questo modo è possibile na­scon­de­re fa­sti­dio­si banner pub­bli­ci­ta­ri o per i cookie.

L’approccio più semplice consiste nell’assegnare la seguente proprietà CSS all’elemento da na­scon­de­re:

display: none;
CSS
Immagine: L’elemento da nascondere selezionato negli strumenti per sviluppatori di Chrome
Se­le­zio­na­te prima di tutto l’elemento da na­scon­de­re, in questo caso l’indice.
Immagine: Nascondere la visualizzazione dell’elemento tramite CSS
Uti­liz­zan­do una voce di stile, na­scon­dia­mo l’indice. Sebbene sia ancora presente nel DOM, non viene più vi­sua­liz­za­to.
N.B.

Per annullare una modifica al DOM, uti­liz­za­te la funzione Annulla come di consueto con le scor­cia­to­ie Ctrl+Z (Windows + Linux) o Cmd+Z (Mac). In al­ter­na­ti­va, ri­ca­ri­ca­te la pagina; tutte le modifiche locali al DOM andranno perse.

In al­ter­na­ti­va, se­le­zio­na­te l’elemento da na­scon­de­re con “Ispeziona elemento” e usate Ja­va­Script per assegnare la proprietà CSS. Qui uti­liz­zia­mo la variante in­te­rat­ti­va di “Ispeziona elemento”:

Immagine: Variante interattiva di Ispeziona elemento
Dopo aver cliccato sulla freccia, è possibile ispe­zio­na­re gli elementi di­na­mi­ca­men­te. 
# hide inspected element
$0.style.display = 'none'
# undo changes to inspected element
$0.style.display = 'revert'
Ja­va­Script

La modalità Aspetto può essere attivata anche tramite Ja­va­Script. In questo modo è possibile mo­di­fi­ca­re il testo della pagina come si è soliti fare con Word:

document.designMode = "on"
Ja­va­Script
Immagine: Attivazione della modalità Aspetto tramite JavaScript
Attivate la modalità Aspetto dalla console di Ja­va­Script.
Immagine: Modifica del testo della pagina in modalità Aspetto
In seguito, il testo della pagina può essere mo­di­fi­ca­to a piacere. Qui cambiamo il testo dell’in­te­sta­zio­ne.

Estrarre i contenuti

I siti web con­ten­go­no molti contenuti utili ai quali gli utenti hanno teo­ri­ca­men­te accesso. Ad esempio, si possono copiare i testi e scaricare le immagini. Non sempre questo è però suf­fi­cien­te, per esempio se si desidera estrarre un elenco o una tabella con in­for­ma­zio­ni. Uti­liz­zan­do la funzione “Copia elemento”, il contenuto e la struttura di un elemento, compresi i sot­toe­le­men­ti, possono essere esportati per essere mo­di­fi­ca­ti in editor di codice. I Chrome DevTools vengono uti­liz­za­ti anche per compilare le tabelle Google con ImportXML.

Immagine: Copia di un elemento negli strumenti per sviluppatori di Chrome
Dal menu con­te­stua­le copiamo l’HTML di un elemento.

I Chrome DevTools con­sen­to­no anche di fare degli screen­shot. In questo modo, è possibile esportare come grafica la ri­spet­ti­va finestra di vi­sua­liz­za­zio­ne, l’intera pagina o un singolo elemento. So­prat­tut­to in com­bi­na­zio­ne con la modalità re­spon­si­ve, è possibile ri­pro­dur­re la vi­sua­liz­za­zio­ne su diversi di­spo­si­ti­vi finali.

Immagine: Cattura di uno screenshot in modalità responsive degli strumenti per sviluppatori di Chrome
Il menu vi­sua­liz­za­to quando la modalità re­spon­si­ve è attiva contiene le opzioni per rea­liz­za­re screen­shot del viewport e dell’intera pagina.
Immagine: Cattura di uno screenshot di un elemento negli strumenti per sviluppatori di Chrome
Il menu con­te­stua­le può essere uti­liz­za­to per catturare uno screen­shot di un singolo elemento.
In sintesi

È im­pos­si­bi­le im­ma­gi­na­re i moderni flussi di lavoro per i siti web senza i Chrome DevTools con la funzione “Ispeziona elemento”. Per questo vale la pena di imparare a usare i vari strumenti.

Vai al menu prin­ci­pa­le