Guida completa agli Strumenti per sviluppatori Chrome: le basi

Argomenti: SEO, Tools, Web Design

Guida completa agli Strumenti per sviluppatori Chrome: le basi

Ho deciso di scrivere questa guida completa agli Strumenti per sviluppatori Chrome poiché ho notato che in molti utilizzano solo una piccola parte degli strumenti messi a disposizione, oppure si utilizzano servizi esterni per testare le potenzialità di un sito, senza sapere che la soluzione migliore è sotto il naso.

Inoltre molti web developers e designer, utilizzando CMS per costruire i propri siti, difficilmente hanno l’esigenza di utilizzare funzionalità particolari dei DEV Tools, che risultano comunque utilissime.

Come accedere a Strumenti per sviluppatori

Ci sono diversi modi per accedere agli Strumenti per sviluppatori:

  • Premendo F12;
  • Premendo CTRL+SHIFT+I;
  • Accedendo dal menu di Crome in alto a destra, andando su Altri strumenti e quindi Strumenti per sviluppatori.
  • Cliccando con il tasto destro del mouse su qualsiasi elemento della pagina e selezionando Ispeziona.

Quest’ultimo metodo è utilissimo poiché ci permette di analizzare direttamente la struttura dell’elemento sul quale abbiamo cliccato.

Come accedere a strumenti per sviluppatori google chrome

Cambiare tipo di visualizzazione degli Strumenti per sviluppatori

Prima di iniziare ad analizzare le varie funzioni di Chrome Developer Tools, vi do un consiglio: impostate la visualizzazione che più vi aggrada dal menu in alto a destra.

cambiare visualizzazione google developer tools

Personalmente preferisco posizionare il pannello in basso su schermi piccoli, a destra su schermi grandi, e quando utilizzo due schermi è ottimo poter aprire Strumenti per sviluppatori in una nuova finestra.

Il pannello Elements di Strumenti per sviluppatori

Una volta aperto Chrome Developer Tools vi troverete davanti il primo tab, quello Elements, che mostra il codice HTML e quello CSS della pagina.

Esplorare il codice HTML con Strumenti per sviluppatori

Nell’immagine al paragrafo precedente, a destra trovate il codice HTML. Vi è un’esatta rappresentazione del DOM, il Document Object Model, composto da tutti i tag HTML visibili a Google Chrome. E cliccando sulle freccette grige a sinistra di ogni tag è possibile vedere gli elementi contenuti all’interno di ogni tag.

Nell’immagine precedente, ad esempio, aprendo il tag body possiamo vedere che esso contiene un div, un iframe, un altro div, ecc. Aprendo questi tag come abbiamo fatto per il body, possiamo vedere gli altri elementi, fino all’ultimo “figlio”.

Con una pagina molto piccola risulterebbe semplice trovare il tag che vogliamo modificare esplorando il DOM in questo modo. Ma con una complessa come quelle generate dai CMS?

Ci sono due diversi modi per facilitare l’esplorazione del DOM di pagine HTML molto complesse:

  • cliccare col tasto destro del mouse sull’elemento che vogliamo analizzare e cliccare su Ispeziona;
  • Cliccare sullo strumento per selezionare gli elementi del DOM direttamente sulla pagina.

strumenti per sviluppatori chrome per analisi del dom

Dopo aver cliccato sull’iconcina con la freccetta del mouse in alto a sinistra, passando con il mouse sulla pagina in esame, saranno evidenziati i tag del DOM che appaiono sulla pagina.

In questo modo, se non capite quale tag regola un particolare elemento, potete selezionarlo direttamente cliccandoci sopra.

Modificare il codice HTML con Strumenti per sviluppatori

Una volta selezionato l’elemento che ci interessa, possiamo modificarlo a piacimento.

Possiamo ad esempio trascinarlo all’interno del DOM per cambiare la sua posizione.

Cliccando due volte sul contenuto del tag, sugli attributi, e sul tag stesso, possiamo editarne il contenuto.

Possiamo cliccare sull’attributo con il tasto destro del mouse per aprire un menu di editing molto completo.

modificare il dom con strumenti per sviluppatori

Possiamo aggiungere o modificare attributi, copiare il tag o parti di esso, eliminare l’elemento, vedere come si comporta nei cambiamenti di stato (quando è active, on hover, focused o visited), e possiamo addirittura modificare liberamente il tag e tutto ciò che contiene cliccando su Edit as HTML.

Esplorare e modificare il codice CSS con Strumenti per sviluppatori

Accanto alla sezione HTML c’è quella per esplorare e modificare il codice CSS.

Questa ci mostra il CSS associato all’elemento HTML che abbiamo selezionato. Inizialmente vi sentirete un po’confusi (soprattutto se state modificando il CSS di un CMS) poiché per ogni elemento verranno mostrate tutte le regole che determinano il suo stile. Esse possono essere ereditate da elementi “genitori”, o provenire da fogli di stile diversi.

Con un po’di esperienza riuscirete ad utilizzarlo con scioltezza.

modificare css con strumenti per sviluppatori chrome

In questa sezione potete:

  • abilitare o disabilitare regole;
  • aggiungerne altre;
  • modificare ed aggiungere regole per le pseudo-classi;
  • Visualizzare il foglio di stile in cui è specificata una determinata regola cliccando sul link a destra.

Abilitare e disabilitare regole CSS

Abilitare e disabilitare regole CSS è molto semplice. Basterà cliccare sui checkbox che appaiono a sinistra di ogni regola quando passiamo con il mouse su di essa.

Se una regola esclude un’altra (perché ad esempio è scritta dopo di essa all’interno del file CSS), disabilitando quella attiva si abiliterà automaticamente quella bloccata.

Modificare e creare regole CSS

È possibile modificare cliccando due volte su di esse. Sia in fase di scrittura che in fase di editing tornano utilissimi i suggerimenti di Chrome che completano le regole che iniziamo a scrivere e ci indicano i valori disponibili per le proprietà che abbiamo scritto.

Tornano inoltre utilissimi gli strumenti di selezione colore e creazione box shadow, attivabili cliccando sulle iconcine che compaiono all’interno della regola stessa, subito prima dei valori.

Ci sono anche altri piccoli strumenti che possono facilitarci la vita, come nel caso del generatore di animazioni, ma approfondirò con più cura questo argomento nei prossimi articoli.

Per creare nuove regole ci basterà cliccare sul segno “+” in alto a destra, oppure possiamo specificare regole di stile inline aggiungendole al selettore posto in alto: element.style{}

Modificare pseudo-classi

Per modificare le pseudo-classi ci facilita moltissimo il compito la funzione Force element state attivabile cliccando il pulsante :hov in alto a destra.

force element state

Possiamo forzare lo stato di ogni elemento cliccando sui checkbox, per verificare quali pseudo-classi si attivano, modificarle o crearne di altre.

Le pseudo classi attivabili sono:

  • active;
  • focus;
  • hover;
  • visited.

Visualizzare e modificare il foglio di stile

Infine è possibile modificare direttamente il foglio di stile in cui una determinata regola CSS è scritta cliccando sul link che si trova sulla destra di ogni regola (nell’immagine precedente “home.css”).

Quello che vedremo è la copia esatta del foglio di stile nel quale la regola è scritta. Potremmo anche decidere di scrivere qui le nostre regole, ma dovremmo farlo senza i suggerimenti di Chrome.

Per maggiori informazioni sul pannello Elements vi rimando alla relativa sezione della guida di Google Developers.

Commenti

2 risposte a “Guida completa agli Strumenti per sviluppatori Chrome: le basi”

  1. Avatar Stefano ha detto:

    Utilissimo.
    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli correlati

Le basi della User Experience: come migliorare l’esperienza utente
12 Novembre 2017
Le basi della User Experience: come migliorare l’esperienza utente
In questo articolo cercherò di definire i concetti fondamentali, le basi della User Experience. Una disciplina che negli…
Leggi
Arrivano i tempi d’attesa dei ristoranti su Google
9 Novembre 2017
Arrivano i tempi d’attesa dei ristoranti su Google
Dall'inizio di Novembre è possibile conoscere in anticipo i tempi d'attesa dei ristoranti su Google. Lo annuncia un…
Leggi
Facebook Business Manager: pro e contro
9 Novembre 2017
Facebook Business Manager: pro e contro
Facebook Business Manager suscita sempre reazioni contrastanti in chi la utilizza. Si passa dall'odio più profondo a mugugni…
Leggi
Guida per l’impostazione del profilo Business Manager
8 Novembre 2017
Guida per l’impostazione del profilo Business Manager
Perché una guida per l'impostazione del profilo Business Manager? Come mai una guida per l'impostazione del profilo Business…
Leggi