In un certo senso, il lavoro degli sviluppatori e dei designer web è quello di convincere gli utenti che un sito web è un’entità unica, più di una serie di elementi HTML formattati per apparire belli. Con gli strumenti giusti, tuttavia, anche i non sviluppatori possono sollevare il sipario su qualsiasi sito web per vedere cosa sta realmente accadendo dietro le quinte.
Si potrebbe avere familiarità con il classico trucco di “visualizzare il sorgente della pagina”, che visualizza il codice HTML grezzo di una pagina nella finestra del browser. Ma c’è un modo migliore per fare il vostro lavoro investigativo: La funzione di ispezione degli elementi ci permette di visualizzare e persino modificare il front-end di qualsiasi sito web, il che può essere molto utile quando si costruisce un sito o si impara come funzionano i siti web.
In questo post, spiegherò cosa significa “ispezionare” gli elementi della pagina, e come farlo su tre comuni browser web.
Cosa significa “ispezionare elementi”?
L’elemento Inspect è una caratteristica dei moderni browser web che permette a chiunque di visualizzare e modificare il codice sorgente di un sito web, compresi i suoi file HTML, CSS, JavaScript e media. Quando il codice sorgente viene modificato con lo strumento Inspect, le modifiche vengono mostrate dal vivo nella finestra del browser.
Inspect è l’arma segreta di un professionista del web. Sviluppatori, designer e marketer lo usano spesso per sbirciare all’interno di qualsiasi sito web (incluso il proprio) per vedere in anteprima le modifiche al contenuto e allo stile, per correggere i bug o per imparare come è costruito un particolare sito. Per esempio, se trovate un’interfaccia intrigante su un sito web concorrente, l’elemento inspect vi permette di vedere l’HTML e il CSS che lo compongono.
Potete anche pensare alla funzione inspect del vostro browser come una specie di “sandbox”: Giocate con una pagina web quanto volete – cambiate il contenuto, i colori, i caratteri, il layout, ecc. Quando hai finito, basta aggiornare la pagina per riportare tutto alla normalità. Inspect non cambia il sito web in sé – solo come appare nel tuo browser – quindi sentiti libero di sperimentare!
Inspect è anche uno strumento incredibilmente prezioso per chi sta imparando lo sviluppo web. Invece di visualizzare il semplice codice sorgente, usate inspect element per interagire con la pagina e vedere come ogni linea di codice corrisponde ad un elemento o stile. Comprendendo meglio ciò che costituisce la tipica pagina web, si può comunicare efficacemente con gli sviluppatori nel caso di un errore, o se si vuole fare un cambiamento.
Inspect può essere uno “strumento per sviluppatori”, ma non è necessario scrivere alcun codice o installare alcun software aggiuntivo per usarlo. Puoi fare tutto ciò che ho descritto proprio all’interno del tuo browser – impariamo come.
Come ispezionare gli elementi
Ogni moderno browser web ha uno strumento nativo per ispezionare gli elementi. Qui spiegherò come usare lo strumento di ispezione nei tre browser web desktop: Google Chrome, Safari di Apple e Mozilla Firefox.
Come ispezionare gli elementi in Chrome
Per usare l’ispettore in Google Chrome, per prima cosa naviga verso qualsiasi pagina web (in questi esempi userò HubSpot.com). Una volta lì, hai diversi modi per aprire lo strumento:
- Clicca con il tasto destro del mouse su qualsiasi parte della pagina e scegli Inspect. Cliccando con il tasto destro su un elemento specifico della pagina si aprirà quell’elemento nella vista dell’ispettore.
- Nella barra dei menu in alto, selezionare Visualizza > Sviluppatore > Strumenti di sviluppo.
- Aprire Personalizza e controlla Google Chrome cliccando l’icona a tre puntini nell’angolo in alto a destra della finestra del browser. Da lì, scegliete Altri strumenti > Strumenti di sviluppo.
- Utilizzate la scorciatoia control-shift-C su Windows o command-option-C su macOS.
Il pannello Chrome Developer Tools si aprirà nella parte inferiore della finestra del browser. Se vuoi cambiare la posizione del pannello, fai clic sull’icona a tre puntini nell’angolo in alto a destra del pannello (accanto all’icona X), quindi scegli la tua posizione dock preferita. Sceglierò Dock a destra – questo rende più facile visualizzare la pagina renderizzata e la sua fonte:
In cima al pannello di ispezione, vedrete le schede per Elements, Console, Sources, ecc. Questi sono tutti strumenti che possiamo utilizzare per valutare i contenuti e le prestazioni di una pagina. Comunque, tutto ciò di cui abbiamo bisogno per l’ispezione è sotto la scheda Elements.
La prossima area in basso è il sorgente HTML della pagina corrente. Prenditi un po’ di tempo per esplorare quest’area, e nota come il passaggio del cursore sul pezzo di codice evidenzia l’elemento corrispondente nella pagina. Il blu indica il contenuto di un elemento, il verde corrisponde al padding, e le aree in arancione sono i margini.
Possiamo anche fare il contrario – individuare un pezzo di codice dall’elemento della pagina. Per farlo, clicchiamo sull’icona di selezione degli elementi nell’angolo in alto a sinistra del pannello:
Poi clicchiamo su un elemento della pagina. Vedrete il codice sorgente rivelato nel pannello di ispezione.
Oltre a visualizzare, possiamo usare inspect per modificare il contenuto della pagina. Cominciamo cambiando un po’ di testo. Per prima cosa, troviamo un contenuto di testo nel codice sorgente. Poi, cliccate con il tasto destro sull’elemento e scegliete Edit Text – questo apre un input di testo in linea in cui potete scrivere quello che volete. Quando deselezionate l’input di testo, vedrete le modifiche avere effetto:
Oppure, che ne dite di nessun testo? Basta selezionare l’elemento nel codice sorgente e cancellarlo. L’H1 sparirà dalla pagina.
Non preoccupatevi però – riapparirà quando aggiornerete la pagina. Puoi anche nascondere qualsiasi elemento senza cancellarlo cliccando con il tasto destro sull’elemento nel codice sorgente e scegliendo Hide element.
Puoi anche aggiungere nuovi elementi alla pagina – clicca con il tasto destro su un elemento nel codice sorgente e scegli Edit as HTML. Vedrai un campo di testo dove puoi incollare l’HTML. Per esempio:
Muovendoci lungo il pannello Chrome inspect, vediamo la scheda Styles. Questo ci mostra quale stile CSS è stato applicato all’elemento selezionato. Cliccate sulle linee di codice per riscriverle, o attivate/disattivate certe dichiarazioni selezionando/deselezionando le caselle accanto ad esse. Facciamo questo per la proprietà font-weight del nostro <h1> elemento:
Finalmente, copriamo un’altra caratteristica della funzione inspect di Chrome, la visualizzazione mobile. Quando si costruisce un sito, i designer devono considerare come le sue pagine appaiono sugli schermi desktop, mobile e tablet. Fortunatamente, Chrome ti permette di visualizzare in anteprima la stessa pagina web in diverse risoluzioni dello schermo. Inizia cliccando sull’icona Toggle device nell’angolo in alto a sinistra del pannello:
Da qui, imposta la risoluzione dello schermo manualmente o scegli un preset di dispositivo dal menu, poi vedi come risponde il layout della pagina. Puoi anche ruotare lo schermo e persino vedere in anteprima le prestazioni a velocità “mid-tier mobile” e “low-tier mobile”.
Come ispezionare gli elementi in Safari
Per usare lo strumento di ispezione di Safari, Web Inspector, dobbiamo prima abilitare gli strumenti di sviluppo di Safari. Selezionare Safari > Preferenze. Nella finestra delle preferenze sotto Avanzate, selezionare la casella accanto a Mostra il menu Sviluppo nella barra dei menu. Vedrai un’opzione di sviluppo aggiunta al menu sopra.
Prossimo, vai alla pagina web desiderata. Ci sono tre modi per aprire Web Inspector:
- Clicca con il tasto destro su qualsiasi parte della pagina e scegli Ispeziona elemento. Cliccando con il tasto destro su un elemento specifico della pagina si aprirà quell’elemento nella vista dell’ispettore.
- Scegliere Sviluppa > Mostra Ispettore Web dalla barra dei menu in alto.
- Utilizzare la scorciatoia comando-opzione-I.
L’ispettore di Safari si apre in fondo alla finestra per default. Per cambiare questa configurazione, fare clic sull’icona per agganciare il display sul lato destro o per aprirlo in una finestra separata – entrambe si trovano accanto all’icona X nell’angolo in alto a sinistra del display.
Il pannello dell’ispettore di safari comprende due colonne. La prima mostra il sorgente HTML, e la seconda mostra il CSS della pagina. Usate il vostro cursore per esplorare il sorgente HTML e vedere quali linee di codice corrispondono ad ogni regione della pagina (il blu evidenzia il contenuto, il verde evidenzia il padding, e l’arancione evidenzia i margini):
Si può anche ispezionare direttamente la pagina. Fare clic sull’icona di selezione degli elementi nella parte superiore del pannello:
Ora, quando si fa clic su un elemento della pagina, Web Inspector rivela il codice sorgente corrispondente.
Come l’ispettore di Chrome, Safari ci permette di modificare, aggiungere e rimuovere elementi della pagina. Per modificare la pagina, fai clic con il tasto destro su un elemento HTML nel pannello di ispezione, quindi scegli un’opzione dal menu Modifica. Web Inspector ti chiederà di inserire un nuovo testo, quindi visualizzerà le tue modifiche in tempo reale:
Oppure, aggiungi un nuovo elemento alla pagina cliccando con il tasto destro su una riga di codice e scegliendo un’opzione dal menu Add. In questo esempio, ho aggiunto un nuovo elemento figlio <h1> ad un <div> esistente:
Se vuoi cancellare un elemento della pagina, seleziona semplicemente del codice e cancellalo. Oppure, clicca con il tasto destro e scegli Toggle Visibility per nascondere un elemento senza cancellarlo.
A destra abbiamo la colonna Stili, dove possiamo cambiare o attivare/disattivare le dichiarazioni CSS per qualsiasi elemento, così:
Quando si testano i contenuti e le modifiche di stile, si vuole vedere l’effetto sugli schermi mobili così come sui desktop. La modalità Responsive Design di Safari ti permette di vedere l’anteprima di un sito web sui dispositivi più comuni.
Per usarla, scegli Sviluppa > Entra in modalità Responsive Design. In questa modalità, è possibile utilizzare gli stessi strumenti dell’ispettore sulle pagine formattate per i dispositivi Apple, o impostare le dimensioni da soli:
Come ispezionare gli elementi in Firefox
Per aprire l’ispettore di Firefox, è possibile:
- Cliccare con il tasto destro su qualsiasi parte della pagina e scegliere Inspect Element. Cliccando con il tasto destro su un elemento specifico della pagina si aprirà quell’elemento nella vista dell’ispettore.
- Selezionare Strumenti > Sviluppatore Web > Ispettore dalla barra dei menu in alto.
- Utilizzare la scorciatoia control-shift-C in Windows o command-option-C in macOS.
L’ispettore Firefox appare lungo la parte inferiore della finestra per impostazione predefinita. Per cambiare la sua posizione, selezionare l’icona a tre puntini nell’angolo in alto a destra dell’ispettore, quindi scegliere un’opzione di visualizzazione alternativa.
Il pannello dell’ispettore di Firefox è comparabile per caratteristiche a quello di Chrome e Safari. Il codice sorgente HTML indica l’elemento di pagina corrispondente con codici di colore – il contenuto è blu, il padding è viola, e i margini sono gialli:
Inoltre, è possibile trovare il codice selezionando elementi sulla pagina – per entrare in modalità selezione, fare clic sull’icona del cursore nell’angolo in alto a sinistra:
Clicca su qualsiasi elemento della pagina per rivelare la sua fonte nel pannello di ispezione.
Per modificare o eliminare un elemento della pagina, selezionare il suo codice nell’ispettore. Poi, o fai doppio clic per cambiare il testo, o fai clic destro e scegli Modifica come HTML o Crea nuovo nodo per aggiungere codice. O semplicemente cancellare il codice e vedere i cambiamenti risultanti nella pagina.
Per attivare lo stile di un elemento, usate la regione Filter Styles in fondo al pannello inspect. Deselezionate la casella accanto a una dichiarazione CSS per disattivarla (o scrivete voi stessi del nuovo codice):
Infine, gli strumenti di Firefox hanno anche un’opzione di anteprima mobile. Per usarla, cliccate sull’icona Responsive Design Mode nell’angolo in alto a destra del pannello:
Responsive Design Mode vi permette di scegliere tra diverse risoluzioni dello schermo preimpostate o di impostarne una vostra, e potete anche alternare la velocità di connessione e il rapporto pixel del dispositivo:
Guarda da vicino con Inspect
Una volta imparate le basi dello strumento Inspect del tuo browser, potresti renderti conto di quante informazioni sui tuoi siti web preferiti siano pubblicamente disponibili. Con pochi click, puoi esplorare esattamente come sono costruite le pagine web, quali stili usano, come si ottimizzano per i motori di ricerca, come si formattano sugli schermi mobili e molto altro ancora.
Per alcuni, Inspect è solo una curiosità divertente. Per altri, è una risorsa chiave per imparare come funzionano altri siti concorrenti. Chiunque tu sia, è una grande abilità da avere, e può fornire intuizioni oltre la visualizzazione della pagina web stessa.
