Ci sono numerose e preziose risorse per imparare lo sviluppo web: libri, video, corsi online, e molto altro. Imparare a usare lo strumento Ispeziona Elemento (Inspect Element) del browser è una di questi potenti strumenti. È uno strumento di apprendimento inestimabile, sempre a portata di mano e accessibile.

Con la funzione Inspect Element, potete vedere il funzionamento interno di qualsiasi sito web. Anche se potete vedere solo il markup frontend come HTML, CSS, e a volte JavaScript, potete comunque osservare come il team di sviluppo ha costruito un determinato sito web.

In questo articolo, vi mostreremo come usare lo strumento Inspect Element e alcune delle tecnologie, caratteristiche e funzionalità correlate che incontrerete. Per prima cosa, diamo un’introduzione formale allo strumento Inspect Element.

Introduzione allo Strumento Ispeziona elemento

Nei primi tempi del web, c’era solo un modo per leggere il codice di un sito web: la funzione Visualizza sorgente (View Source).

La pagina Kinsta con View Source

La pagina “View Source” di Kinsta.com.

Questa situazione era prevalente prima che arrivassero i Cascading Style Sheets (CSS) e il JavaScript. Chi lavorava nello sviluppo web usava l’HTML per tutti gli elementi del sito, incluso il contenuto, il design e… beh, tutto.

Una volta che il web ha iniziato a evolversi, e le tecnologie sottostanti sono aumentate di potenza, è stato necessario sviluppare strumenti migliori. Firebug di Firefox era una prima soluzione per scoprire come un sito web si comportava e funzionava sotto il cofano:

I loghi di Firefox e Firebug.

I loghi di Firefox e Firebug.

Dopo un po’, questa funzionalità ha trovato la sua strada in quasi tutti i browser. Oggi conosciamo questa funzionalità con il nome di Inspect Element o Ispeziona Elemento (a seconda della lingua del vostro browser):

Lo strumento Inspect Element usato sul sito di Kinsta.

Lo strumento Inspect Element sul sito di Kinsta.

È un modo potente per vedere la tecnologia sottostante il codice di un sito web. Come tale, potete trovarlo in alcuni luoghi diversi: attraverso un menu della barra degli strumenti, facendo clic con il tasto destro su una pagina e selezionando l’opzione, o con una scorciatoia da tastiera.

Mentre lo strumento Inspect Element si concentra principalmente sull’HTML e il CSS di una pagina, c’è molto altro che potete fare con esso.

Con lo strumento Ispeziona Elemento del tuo browser, puoi scoprire il funzionamento interno di qualsiasi sito web, dal codice HTML al CSS 👀 Scopri come usarlo ⬇️Click to Tweet

Un Tour del Pannello Ispeziona Elemento

DevTools di Brave

DevTools di Brave.

Lo strumento Inspect Element è molto più di un modo per visualizzare il codice. Esistono spesso diversi pannelli a cui accedere:

Oltre a questo, ci sono altri pannelli che potete aggiungere:

Una lista di ulteriori pannelli all'interno dei DevTools di Brave.

Una lista di altri pannelli all’interno dei DevTools di Brave.

Ci sono pannelli semplici, come Media, e altri più complessi come il JavaScript Profiler e il Performance Monitor. Il nome dello strumento Ispeziona Elemento non rende la completezza di tutte le funzionalità che si trovano sotto il cofano. Ha un potere immenso e dovrebbe essere centrale nel flusso di lavoro di chiunque lavori nello sviluppo web.

Perché Usare Ispeziona Elemento

Lo strumento Ispeziona Elemento è quasi l’unica soluzione di cui avrete bisogno durante lo sviluppo. Approfondiremo i dettagli tecnici che spiegano il perché nel resto dell’articolo. Prima, però, vale la pena parlare delle motivazioni per usare Inspect Element.

Ci sono alcune ragioni per cui vorreste usare questo strumento:

In breve, imparare lo sviluppo web implica osservare buoni esempi di siti web e scoprire cosa li fa funzionare.

Lo strumento Ispeziona Elemento vi permette di controllare l’esatto HTML e CSS usato in un sito, dandovi una grande possibilità di implementare quegli aspetti e quelle tecniche nel vostro lavoro.

Come Trovare lo Strumento Ispeziona Elemento del Vostro Browser

La buona notizia è che trovare lo strumento Inspect Element è semplice. Nella maggior parte dei casi, si fa clic con il tasto destro del mouse su una pagina e si seleziona Ispeziona, Analizza o Ispeziona Elemento:

Scegliere lo strumento Ispeziona Elemento.

Scegliere lo strumento Ispeziona Elemento.

Per impostazione predefinita, si aprirà lo strumento in una sezione divisa della stessa schermata. Spesso si apre in modo predefinito sul lato destro. Ma è possibile personalizzare questo comportamento a proprio piacimento e anche far comparire lo strumento in una finestra separata:

Lo strumento Ispeziona Elemento nella sua finestra.

Lo strumento Ispeziona Elemento nella sua finestra.

Naturalmente, potete anche accedere a Ispeziona Elemento dalla barra degli strumenti del browser o attraverso una scorciatoia da tastiera. La posizione esatta varia a seconda del browser. Per esempio, in Firefox, troverete il Web Developer Tools nel menu Tools > Browser Tools. Al contrario, Brave (e altri browser basati su Chromium) hanno l’opzione DevTools nel menu View > Developement:

Il menu della barra degli strumenti di Brave, che mostra i suoi strumenti di sviluppo.

Il menu della barra degli strumenti di Brave, che mostra i suoi strumenti di sviluppo.

Le scorciatoie da tastiera sono spesso simili da un browser all’altro: Command + Shift + C (Control + Shift + C per Windows). Questa scorciatoia vi permette di richiamare rapidamente gli strumenti che vi servono per lavorare subito.

Se non avete mai aperto lo strumento Inspect Element prima, lo troverete spesso visualizzato sul lato destro del vostro menu, come abbiamo detto prima. Per cambiare questo comportamento, fate clic sul menu a semaforo nella barra degli strumenti di Ispeziona Elemento. Qui potete cambiare il lato in cui viene visualizzato il “dock”:

L'opzione lato Dock nello strumento Ispeziona Elemento.

Le opzioni “lato Dock” nello strumento Ispeziona Elemento.

Si noti che Firefox usa anche una vista “triplo pannello” per impostazione predefinita, che aiuta a ottenere quante più informazioni possibili nello strumento Ispeziona Elemento:

La vista a triplo riquadro di Firefox.

La vista a triplo riquadro di Firefox.

Ora che avete lo strumento aperto, è una buona idea scoprire cosa potete fare con esso. Ne parleremo dopo.

3 Situazioni per Usare lo Strumento Ispeziona Elemento

Abbiamo toccato alcuni modi in cui userete lo strumento Ispeziona Elemento, ma possiamo andare oltre per offrire alcuni casi d’uso. Discutiamoli in breve.

1. Ricerca di Elementi Specifici in una Pagina Web

L’obiettivo primario dello strumento Ispeziona Elemento è rivelato già dal nome: ispezionare gli elementi di un sito web. Per farlo, andate alla pagina web desiderata e poi scegliete il modo in cui volete aprire gli strumenti per lo sviluppo.

Una volta che il pannello è aperto, fate clic sulla freccia che funge da selettore per il vostro elemento desiderato:

L'icona della freccia dell'ispettore.

L’icona della freccia dell’ispettore.

Da qui, potete passare il mouse su qualsiasi elemento della pagina, e lo vedrete evidenziato nella finestra Inspector/Elements:

Evidenziare un elemento nel pannello degli strumenti di sviluppo.

Evidenziare un elemento nel pannello degli strumenti di sviluppo.

È un processo semplice, e questo è uno dei motivi per cui lo strumento Ispeziona Elemento è così prezioso e popolare tra gli sviluppatori web.

2. Emulare un Dispositivo, uno Schermo e un Browser

Ispeziona Elemento funziona anche come una sorta di emulatore di dispositivi. In altre parole, potete vedere come appare un sito web su un dispositivo specifico. Le opzioni sono numerose:

Una lista di dispositivi emulati in Brave.

Una lista di dispositivi emulati mostrati in Brave.

Questo emulatore è ottimo per valutare se la vostra strategia mobile-first o di responsive design è accurata e funziona. È inestimabile e anche più conveniente che avere 200 dispositivi intorno alla vostra scrivania.

Spesso si accede all’emulazione del dispositivo da una piccola icona da qualche parte nel pannello Ispeziona Elemento:

Emulazione di un dispositivo con lo strumento Ispeziona Elemento.

Emulazione di un dispositivo con lo strumento Ispeziona Elemento.

Facendo clic su questa icona, il vostro sito verrà visualizzato come appare sul dispositivo che avete selezionato:

Scegliere un dispositivo da emulare dallo strumento Ispeziona Elemento.

Scegliere un dispositivo da emulare dallo strumento Inspect Element.

Approfondiremo questo aspetto più tardi, ma è una tecnica solida come una roccia per rendere il vostro design coerente tra i vari dispositivi.

3. Verificare le Prestazioni della Pagina Web

Lo strumento Ispeziona Elemento può anche aiutarvi a verificare velocità e prestazioni di un sito web attraverso il pannello Performance:

Il pannello Performance dentro Ispeziona Elemento.

Il pannello Performance dentro Ispeziona Elemento.

Questa funzione “registra” i tempi di caricamento di specifici elementi e script. I browser basati su Chromium si comportano brillantemente nell’offrire queste informazioni. Registrate la pagina mentre viene caricata, e poi visualizzate i risultati in un formato di linea temporale.

È un modo eccellente per accertare se una pagina è performante a livello generale. A quel punto usate uno strumento come Google PageSpeed Insights o Lighthouse per lavorare ulteriormente sulle prestazioni del vostro sito. I browser basati su Chromium avranno un generatore di report Lighthouse integrato:

Un rapporto Google Lighthouse integrato.

Un rapporto Google Lighthouse integrato.

Potete anche vedere un riassunto del test delle prestazioni all’interno di alcune altre schede. Per esempio, potete visualizzare un Call Tree, un riepilogo generale e un registro degli eventi:

Il registro eventi di Ispeziona Elemento.

Il registro eventi di Ispeziona Elemento.

È possibile che non abbiate bisogno di nessun altro strumento per valutare come il vostro sito web si comporta o come funziona. Imparare come funziona in pratica è qualcosa che discuteremo in seguito.

Trucchi e Suggerimenti per Usare lo Strumento Ispeziona Elemento

Abbiamo già parlato di come lo strumento Ispeziona Elemento sia più potente di quanto possa sembrare a prima vista. Diamo un’occhiata ad alcuni trucchi e consigli per ottenere il meglio dal suo set di funzionalità, iniziando dalle basi.

Modificare le Proprietà, i Valori e gli Stati degli Elementi

Finora abbiamo solo sfiorato il concetto di usare lo strumento Ispeziona Elemento per apportare modifiche temporanee a un sito. Vediamo come farlo in modo più dettagliato.

I passi sono semplici. Per prima cosa, usate l’icona della freccia per selezionare l’elemento scelto. Vedrete una sovrapposizione che evidenzia i vari componenti quando ci passate sopra il mouse:

Selezione degli elementi nello strumento Ispeziona Elemento.

Selezione degli elementi nello strumento Ispeziona Elemento.

Una volta arrivati all’elemento desiderato, potete fare doppio clic quasi ovunque vediate un tag all’interno del pannello Elements e digitare una modifica. Per esempio, vogliamo sostituire il testo originale dell’hero sulla homepage di Kinsta con qualcosa di diverso:

Modifica del testo sulla homepage di Kinsta.

Modifica del testo sulla homepage di Kinsta.

Potete anche lavorare con i CSS allo stesso modo dell’HTML. Per esempio, prendete i pulsanti call to action (CTA) sulla homepage di Kinsta:

Selezione di un pulsante sulla homepage di Kinsta.

Selezione di un pulsante sulla homepage di Kinsta.

Se selezionate il pulsante usando il puntatore, potete vedere il suo CSS relativo nel pannello Styles a destra:

Il pannello Styles nello strumento Ispeziona Elemento.

Il pannello Styles nello strumento Ispeziona Elemento.

Come per gli elementi HTML, potete cambiare i valori e aggiungere anche il vostro CSS:

Cambiare il colore del pulsante nel pannello Styles.

Cambiare il colore del pulsante nel pannello Styles.

Naturalmente, per elementi come i pulsanti, potreste voler lavorare con i suoi vari stati. In questo caso, vale la pena cambiare anche lo stato :hover. Per farlo, fate clic sul link :hov nel pannello Styles. Scegliendo questa opzione si aprirà una lista di stati degli elementi, e potete selezionare quelli per cui volete vedere il CSS di hover-state:

Visualizzare le opzioni degli stati nel pannello Styles.

Visualizzare le opzioni “Stati” nel pannello Styles.

La pagina web mostrerà l’aspetto dello stato senza che dobbiate agire. Qui abbiamo cambiato i colori di hover per differenziarlo dallo stato predefinito del pulsante:

Modifica dei colori dello stato hover nel pannello Styles.

Modifica dei colori dello stato hover nel pannello Styles.

Potete anche prendere gli URL delle immagini e scambiarli con altri. Sulla homepage di Kinsta, mostriamo uno screenshot del cruscotto di MyKinsta:

Il cruscotto di MyKinsta sulla homepage di Kinsta.

Il cruscotto di MyKinsta sulla homepage di Kinsta.

Individuando l’elemento e cambiando l’URL di origine dell’immagine, potete provare altre immagini al suo posto:

Cambiare un'immagine sulla homepage di Kinsta.

In questo caso, il cambiamento è avvenuto in pochi minuti (fonte dell’immagine: Pixabay).

Come ci si aspetterebbe, questi cambiamenti non sono permanenti, e con un rapido aggiornamento della pagina è possibile far tornare le cose alla normalità. In alternativa, potete anche copiare l’HTML e il CSS sul vostro editor e includerli nel vostro codice per rendere queste modifiche permanenti.

Ricerca degli Elementi

Prima di poter modificare un elemento potreste aver bisogno di trovarlo. Lo strumento Ispeziona Elemento ha una funzionalità di ricerca diretta che può aiutarvi a trovare qualsiasi elemento di una pagina web.

Detto questo, è difficile da trovare se non si sa dove guardare. Il modo “ufficiale” nei browser basati su Chromium è quello di andare al menu a forma di semaforo sul lato destro della pagina e selezionare l’opzione Search:

L'opzione Search nei DevTools di Brave.

L’opzione Search nei DevTools di Brave.

Usando questa opzione si aprirà il pannello Console, con una scheda Ricerca. Da qui, digitate il tag desiderato nella casella di testo, e vedrete una lista di elementi associati nella pagina:

Hai bisogno di un hosting eccezionale, rapido e sicuro per il tuo nuovo sito web? Kinsta offre server velocissimi e un supporto di prima classe 24/7 da parte di esperti del web. Dai un’occhiata i nostri piani.

Ricerca degli elementi nei DevTools di Brave.

Ricerca degli elementi nei DevTools di Brave.

Si noti che in altri browser si può trovare la funzionalità altrove. Per esempio, Firefox include una casella Search in cima al suo pannello Inspector:

Ricerca di elementi nel pannello Firefox Inspector.

Ricerca di elementi nel pannello Firefox Inspector.

Ecco un altro suggerimento veloce: è possibile effettuare l’espansione ricorsiva dei vari punti nodali ed elementi facendo clic con il tasto destro del mouse all’interno del pannello Elements, e scegliendo Expand recursively:

L'opzione Expand recursively nel pannello Elements.

L’opzione Expand recursively nel pannello Elements.

Se date un’occhiata al pannello Styles, noterete anche una casella di testo Filter. Questo campo vi permette di filtrare per proprietà CSS, e diventa quindi un ottimo compagno per la funzionalità di ricerca globale:

Filtro per proprietà nel pannello Styles.

Filtro per proprietà nel pannello Styles.

Nel complesso, non dovrebbe essere difficile trovare quello che vi serve con due strumenti di filtro e ricerca dedicati.

Una Rapida Introduzione al Box Model

Uno dei modi migliori in cui lo strumento Ispeziona Elemento può aiutarvi a imparare di più su come le proprietà CSS agiscono sugli elementi è il pannello visivo “Box Model”.

Il Box Model.

Il Box Model.

Questa panoramica vi dà una rappresentazione di come uno specifico box (come “element” o “div”) appare sullo schermo. In altre parole, è una panoramica di come i margini, il padding, il bordo e il contenuto si combinano per diventare la sezione che vedete sullo schermo.

Spiegare il modello completo di box CSS e come interagisce con l’HTML di una pagina web va oltre lo scopo di questo articolo, anche se Mozilla ha una fantastica guida ai pro e contro del concetto.

Spesso troverete il pannello Box Model all’interno delle sezioni Layout o Computed del pannello di destra dello strumento Ispeziona Elemento:

Il pannello Box Model nello strumento Ispeziona Elemento.

Il pannello “Box Model” nello strumento Ispeziona Elemento.

Come per ogni elemento e proprietà, potete anche cambiare i valori e le impostazioni di un particolare box. Ci sarà anche una lista di altre proprietà che vi aiuteranno a posizionare il box, impostare uno z-index, applicare le impostazioni di float e di visualizzazione, e molto altro.

Mentre si lavora con il modello di box, si può anche trarre beneficio dal vedere il sistema a griglia in azione sulla pagina. Per farlo, date un’occhiata al pannello Layout, e vedrete che le opzioni che vi servono sono sotto il menu Grid:

Il menu delle impostazioni Grid.

Il menu delle impostazioni Grid.

Fate clic sulle impostazioni di visualizzazione desiderate e poi scegliete un overlay pertinente; lo vedrete apparire sullo schermo, così potrete prendere decisioni più accurate grazie al Box Model da usare per manipolare gli elementi del sito.

Emulare i Dispositivi Usando l’Elemento Ispeziona

Sono ormai parole d’ordine che sentiamo usare spesso, ma “responsive” e “mobile-friendly” sono fattori chiave dello sviluppo web. Per questo lo strumento Ispeziona Elemento affronta questo aspetto grazie ad alcune delle sue funzionalità.

Nella maggior parte dei browser, lo strumento Ispeziona Elemento avrà un’icona per dispositivi mobili lungo la barra degli strumenti superiore:

Allineare la visualizzazione responsive mobile all'interno di Brave.

Allineare la visualizzazione responsive mobile all’interno di Brave.

Safari, invece, è diverso. C’è un toggle Enter/Exit Responsive Design Mode nel menu Develop:

L'opzione Exit Responsive Design Mode in Safari.

L’opzione “Exit Responsive Design Mode” in Safari.

Indipendentemente da come ci si arriva, una volta scelta l’opzione, la pagina web verrà visualizzata come se la si stesse guardando su un dispositivo più piccolo:

Una vista del layout del dispositivo mobile in Firefox.

Una vista del layout del dispositivo mobile in Firefox.

Mentre Safari vi dà solo la possibilità di scegliere tra diversi dispositivi Apple, gli altri browser scavano per fornirvi gli strumenti necessari per progettare con i principi mobile-first. Per esempio, è possibile scegliere l’orientamento del viewport, così come quale dispositivo si desidera emulare:

La lista di emulazione per i dispositivi in Brave.

La lista “Emulazione del dispositivo” in Brave.

Ci sono altre due caratteristiche interessanti qui. Prima di tutto è possibile scegliere una velocità di rete emulata. Safari non include alcuna opzione per questo, e i browser basati su Chromium offrono una scelta molto ridotta per emulare le limitazioni della rete (network throttling):

Le opzioni di network throttling in Brave.

Le opzioni di throttling in Brave.

Firefox è quello che dà più scelta e offre una buona selezione di opzioni di rete tra cui scegliere:

Le opzioni di throttling in Firefox.

Le opzioni di throttling in Firefox.

Per completare le cose, potete simulare anche il feedback aptico e il riconoscimento dei sensori. È un’opzione di default nei browser basati su Chromium, mentre in Firefox dovete attivarlo:

L'opzione haptic feedback in Firefox.

L’opzione haptic feedback in Firefox.

Firefox qui rimane indietro, mentre Chrome, Brave, e altri mostrano il cursore come una piccola sovrapposizione a forma di dito. La funzionalità non è perfetta per nessun browser, anche se è un modo affidabile per determinare in che modo il vostro sito potrebbe agire su altri dispositivi.

Questo tipo di test cade spesso nel dimenticatoio di molti sviluppatori web. Detto questo, non ci sono scuse ora che i browser offrono soluzioni complete come questa.

Scorciatoie da Tastiera Quando Si Usa lo Strumento Ispeziona Elemento

La maggior parte delle scorciatoie da tastiera sono spesso le stesse in tutti i browser. Questa è una buona notizia se passate da uno strumento all’altro per testare i vostri siti.

Ecco una rapida lista di alcune delle scorciatoie più popolari (e preziose):

Aprire lo strumento Ispeziona Elemento Command + Shift + C per Mac, Control + Shift + C per Windows
Spostarsi tra i punti nodali Freccia su e giù
Espandere il punto nodale selezionato Freccia Destra
Collassare il punto nodale selezionato Freccia a sinistra
Espandere e collassare ricorsivamente i punti nodali Option + Click per Mac, Alt + Click per Windows
Spostarsi all’interno di un punto nodale per lavorare con gli attributi Invio o Return
Passare attraverso gli attributi di un punto nodale Tab
Tornare indietro tra gli attributi di un punto nodale Shift + Tab
Nascondi o mostra il punto nodale selezionato H
Modificare e interrompere la modifica di un punto nodale come HTML F2
Quando una proprietà CSS è selezionata, aumentare il valore di uno Freccia su
Quando una proprietà CSS è selezionata, diminuire il valore di uno Freccia giù
Quando una proprietà CSS è selezionata, aumentare il valore di 10 Shift + freccia su
Quando una proprietà CSS è selezionata, diminuire il valore di 1 Shift + freccia giù
Quando una proprietà CSS è selezionata, aumentare il valore di 0,1 Opzione + freccia su per Mac, Alt + freccia su per Windows
Quando una proprietà CSS è selezionata, diminuire il valore di 0,1 Opzione + freccia giù per Mac, Alt + freccia giù per Windows

Naturalmente, ci sono molte altre scorciatoie disponibili. Mozilla ha una documentazione eccezionale per Firefox, mentre Chrome, Brave, Edge, e altri condividono le scorciatoie. Apple è meno utile con le scorciatoie per chi sviluppa con Safari, dato che non c’è una lista definita nelle loro pagine di supporto. Suggeriamo invece di leggere la documentazione ufficiale per gli strumenti di sviluppo di Safari.

Scopri tutto quello che c’è da sapere sulla funzione Ispeziona Elemento del browser (e tutti gli strumenti che ha in serbo) in questa guida completa 🔎Click to Tweet

Riepilogo

Lo sviluppo web non riguarda più solo HTML. Ci sono molte tecnologie coinvolte. Anche attenendovi alla santa trinità di HTML, CSS e JavaScript, avrete comunque bisogno di vedere come un sito web mette insieme tutti questi componenti.

Lo strumento Ispeziona Elemento del browser è uno dei modi migliori per guardare sotto il cofano di un sito web e scoprire in dettaglio come funziona. È fantastico come aiuto per l’apprendimento, ma può anche aiutarvi a testare le modifiche al vostro sito e scoprire come funziona su diversi dispositivi e reti mobili.

Usate spesso lo strumento Ispeziona Elemento? Se sì, quali sono le vostre caratteristiche preferite? Condividete le vostre opinioni nella sezione dei commenti!


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.