Come usare il tool "ispeziona elemento" in Google Chrome

Lo strumento che approfondiamo nel video tutorial di oggi (di cui trovi il link in fondo all’articolo) è “Ispeziona elemento” nativo di Google Chrome e di cui esiste anche una corrispondente versione per Firefox (firebug).

Analizzeremo alcune delle sue numerose funzioni per comprendere in che modo ci possa essere utile.

Come attivare il tab ispezione elemento

Ecco come iniziare a utilizzare Ispeziona elemento:

1. Durante la navigazione, clicchiamo con il tasto destro del mouse in qualsiasi punto della pagina > Ispeziona. In alternativa è possibile utilizzare il comando veloce Ctrl+Maiusc+I
2. All’apertura il pannello di Ispeziona elemento è suddiviso in due sezioni. A sinistra vediamo la tab Elements che è già selezionata ed è quella che ci interessa adesso (non andremo ad approfondirle tutte in questo tutorial) e mostra il codice HTML della pagina.
3. A destra troviamo invece la tab Styles (che si apre automaticamente ed è quella che prenderemo in considerazione) con i CSS ossia gli stili applicati alla pagina e ai suoi elementi.

Ispeziona elemento per simulare modifiche al sito

Lo scopo di questo strumento è consentirci di apportare modifiche e simularle all’interno delle pagine senza renderle live. Se il risultato sul browser ci soddisfa, andremo ad applicare tali modifiche in maniera effettiva inserendole nel template del sito.

Supponiamo ad esempio di voler modificare il colore del titolo principale dell’articolo e la grandezza e il tipo di font dei paragrafi.

• Cliccando sul primo pulsante “Select” in alto a sinistra del pannello principale (riconoscibile da una freccina), attivo lo strumento per selezionare con precisione l’elemento della pagina che mi interessa.
• Con il mouse posso raggiungere i vari elementi e clicco sul titolo che voglio modificare.
  Una volta cliccato, la tab Elements mostrerà l’esatto punto in cui si trova l’elemento, nel nostro caso la titolazione H1.
• Per cambiare il colore ci trasferiamo nella sezione CSS a destra e individuiamo la regola che definisce il colore. In questo caso notiamo che la regola applica il colore non solo al titolo H1 ma anche ad altre titolazioni, H2, H3 etc.
• Per applicare la modifica al colore della sola titolazione H1 ed effettuare la simulazione, elimino l’H1 dal raggruppamento e vado a definire la regola colore in una regola già esistente che fa riferimento al solo H1.

Passiamo ora alla modifica del paragrafo per quanto riguarda dimensioni e tipo di font.

• Clicco di nuovo sullo strumento Select in alto a sinistra nel primo pannello e vado a selezionare il paragrafo, cliccandoci sopra.
• Notiamo quindi che nella sezione CSS compaiono tutte le regole di stile inerenti il tag p che identifica appunto il paragrafo. Da qui individuo scorrendo la regola font-size e modifico il valore, che può essere espresso anche in pixel.
• Una volta trovata la dimensione preferita è possibile riportare la regola nel foglio di stile css del nostro sito.
• Per cambiare il tipo di font, cerco invece la regola font-family e intervengo digitando la nuova famiglia di font. Anche in questo caso le modifiche possono essere riportate sul file css del sito per portarle in live.

Aspetto responsive: la toggle device toolbar di Ispeziona elemento per simulare i dispositivi mobili

Un altro trucchetto interessante presente in questo tool è il secondo pulsante in alto a sinistra, accanto al select che abbiamo già utilizzato e denominato “Toggle device toolbar“. Il sito viene così visualizzato in modalità responsive e dal menu a tendina che compare in alto a sinistra della pagina sopra al sito, potremo selezionare anche un dispositivo specifico (ad esempio un iPad) per vedere come il sito viene mostrato.

Accanto al menu a tendina troviamo i pulsanti per zoommare il contenuto e per orientare in modalità verticale o orizzontale il sito sul dispositivo mobile selezionato.

Ispeziona elemento è un tool utilissimo e spero di averti fornito alcune informazioni interessanti in questa panoramica molto veloce e generale.

Videotutorial: Come usare il tool “ispeziona elemento” in Google Chrome