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.
Guarda la nostra Video Guida su come modificare un sito web con Ispeziona Elemento
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).
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:
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):
È 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.
Un Tour del Pannello Ispeziona Elemento
Lo strumento Inspect Element è molto più di un modo per visualizzare il codice. Esistono spesso diversi pannelli a cui accedere:
- Inspector: questo è chiamato Elements in alcuni browser. È la schermata principale dello strumento Inspect Element e vi mostra il codice della pagina, insieme al CSS specifico dell’elemento. Troverete anche ulteriori dettagli sul “sistema a griglia” di un sito e altri dettagli.
- Console: questo è un registro degli avvisi frontend di un sito, e vi potete anche inserire frammenti di codice per eseguire una prova rapida quando volete testare un’idea.
- Network: qui vedrete le richieste fatte da e verso un server, come tutte le richieste POST e GET.
- Performance: naturalmente un sito deve essere performante. Per questo c’è uno strumento dedicato che vi aiuta a misurare alcune metriche essenziali del sito. Alcuni browser funzionano meglio di altri in questo senso.
- Memory: questo pannello vi permette di vedere come un sito usa la memoria, e di nuovo, alcuni browser offrono metriche estese.
- Application: all’interno di questo pannello è possibile vedere tutta una serie di informazioni sulla cache del sito, sui servizi in background e altro ancora.
Oltre a questo, ci sono altri pannelli che potete aggiungere:
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:
- Potete sfogliare altri siti web per trarre ispirazione su come lavorare sul vostro.
- Apprenderete come altri siti o sviluppatori realizzano determinate tecniche.
- Vi dà la possibilità di sperimentare sul vostro sito senza conseguenze.
- Nella maggior parte degli strumenti Ispeziona Elemento, si ha la possibilità di eseguire il debug dei siti.
- È utile per scoprire di più sul sito in questione.
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.
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.
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.
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”:
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:
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:
Da qui, potete passare il mouse su qualsiasi elemento della pagina, e lo vedrete evidenziato nella finestra Inspector/Elements:
È 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:
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:
Facendo clic su questa icona, il vostro sito verrà visualizzato come appare sul dispositivo che avete selezionato:
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:
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:
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:
È 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.
1. 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:
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:
Potete anche lavorare con i CSS allo stesso modo dell’HTML. Per esempio, prendete i pulsanti call to action (CTA) sulla homepage di Kinsta:
Se selezionate il pulsante usando il puntatore, potete vedere il suo CSS relativo nel pannello Styles a destra:
Come per gli elementi HTML, potete cambiare i valori e aggiungere anche il vostro CSS:
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:
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:
Potete anche prendere gli URL delle immagini e scambiarli con altri. Sulla homepage di Kinsta, mostriamo uno screenshot del cruscotto di MyKinsta:
Individuando l’elemento e cambiando l’URL di origine dell’immagine, potete provare altre immagini al suo posto:
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.
2. 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:
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:
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:
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:
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:
Nel complesso, non dovrebbe essere difficile trovare quello che vi serve con due strumenti di filtro e ricerca dedicati.
3. 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”.
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:
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:
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.
4. 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:
Safari, invece, è diverso. C’è un toggle Enter/Exit Responsive Design Mode nel menu Develop:
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:
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:
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):
Firefox è quello che dà più scelta e offre una buona selezione di opzioni di rete tra cui scegliere:
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:
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.
5. 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 1 | Freccia su |
| Quando una proprietà CSS è selezionata, diminuire il valore di 1 | Freccia giù |
| Quando una proprietà CSS è selezionata, aumentare il valore di 10 | Shift + freccia su |
| Quando una proprietà CSS è selezionata, diminuire il valore di 10 | 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.
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!
Lascia un commento