Google Chrome Dev Tools

Chrome Dev Tools – Cosa sono e Come Usarli

Come ormai siamo abituati, gli argomenti del Venerdì sono generalmente più leggeri, e per mantenere questa linea editoriale quest'oggi voglio parlarvi di uno strumento (anche se definirlo come uno risulta abbastanza riduttivo...) che è presente in tutti i vostri browser Google Chrome e che prendono il nome di Chrome Dev Tools.

Cosa?!? Non avete questo velocissimo browser installato sui vostri sistemi? Correte subito alla pagina di download e scaricatevi la sua ultima versione! Ma magari desiderate avere maggiori informazioni prima di far ciò? Bene! In questo articolo andremo a vedere che strumenti si celano “sotto al cofano” di Chrome che vi saranno di sicuro aiuto nella velocizzazione dei vostri progetti e perché no, anche nell’apprendimento di nuove tecniche!

Google Dev Tools

I Google Dev Tools sono in pratica uno strumento all-in-one dove vi sarà possibile testare i vostri progetti e sopratutto capire perché il vostro layout non si sta comportando come credevate. Mai capitato che una colonna con proprietà float non rispettasse, appunto, il float? E che quest’ultima, al posto di “galleggiare” a fianco degli altri elementi venga a posizionarsi immediatamente sotto?!?

Sono sicuro che non sia successo soltanto a me e come tutti, abbiamo imparato che per risolvere questo scherzo bastava ridurre la larghezza della colonna a cui veniva impostato il float! Ma con la classica metodologia di sviluppo che riguarda la modifica/salvataggio del foglio di stile ed aggiornamento del browser per visualizzazione delle modifiche; il lavoro che si viene a svolgere prenderà come minimo 5 secondi (senza considerare i casi in cui non state lavorando in locale incrementando quindi i tempi di attesa).

La domanda importante quindi diventa “Di quanto potrei velocizzare il mio sviluppo se per modificare la larghezza di un elemento al posto di 5 secondi, ne utilizzassi soltanto uno?”. Spero di non dire niente di sbagliato se affermo che diminuirete di un quinto il tempo speso per le vostre modifiche, vero?

Bene sappiate che con i Google Dev Tools, oppure con una estensione di FireFox che prende il nome di FireBug, tutto questo è possibile! E andremo a scoprirlo proprio in questa puntata!

Attiviamo i Chrome Dev Tools

Se non avete ancora avuto il piacere di scoprire questi utilissimi strumenti, tutto quello che dovrete fare è posizionarvi sulla voce Visualizza del menu Chrome e scendere fino a Opzioni per sviluppatori. A questo punto si aprirà un nuovo menu a tendina con tre voci:

  • Visualizza sorgente (⌥⌘U)
  • Strumenti per sviluppatori (⌥⌘I)
  • Console JavaScript (⌥⌘J)

La voce che andremo a vedere da vicino in questa puntata sarà Strumenti per sviluppatori visto che possiamo affermare che “contiene” anche gli altri due, se volete sbizzarrirvi ed andare a controllare anche i singoli strumenti, siete soltanto ad un click di distanza!

Parlando appunto di click, personalmente sono uno sviluppatore che ama le scorciatoie da tastiera e come tale, ho deciso di inserirvi la combinazione di tasti che vi sarà utile per richiamare questi strumenti; ma nel caso in cui non vi troviate su di un sistema Mac, dovrete premere il pulsante Ctrl al posto di ⌘ e la vostra combinazione si trasformerà in Alt+Ctrl+[lettera].

Una volta premuta la combinazione dei tasti, od aver selezionato la voce del menu, vi troverete di fronte una schermata del genere:

Google Chrome Dev Tools una panoramica

Come mostra l’immagine, i parametri che Chrome Dev Tools sono in grado di analizzare sono veramente molti! Infatti potremmo andare ad analizzare caratteristiche del proprio progetto web come i vari elementi HTML, avremo a disposizione una timeline che ci permetterà di consultare la velocità di caricamento della nostra pagina, una sezione script ed una console che saranno di grande aiuto nel nostro sviluppo JS ed ancora molto altro!

Ma per gli scopi di questa puntata andremo ad analizzare soltanto la sezione Elements, se siete interessati ad approfondire le altre sezioni dei Dev Tools non avete che da sfruttare la sezione commenti e chiedere espressamente di un approfondimento e saremo più che lieti di soddisfare le vostre curiosità.

Come vi Aiuteranno i Chrome Dev Tools

Abbiamo detto che in questa puntata andremo ad analizzare soltanto la parte relativa alla sezione Elements dei Google Dev Tools quindi perché non aprite la homepage di HTML5 and More ed iniziate a muovere i primi passi assieme me?

Come potete vedere dall’immagine che vi ho proposto precedentemente, la sezione Elements si suddivide in due parti principali, quella a sinistra vi permetterà di visualizzare la struttura HTML del vostro progetto ed evidenzierà l’elemento che state controllando al momento mentre, la parte a destra, mostrerà gli stili CSS applicati all’elemento selezionato.

Avete notato come, man mano che muovete il cursore tra gli elementi HTML quest’ultimi vengano evidenziati con un rettangolo blu contenete anche le misure dell’elemento stesso? Questo è veramente di grande aiuto quando vi trovate a dover identificare i vostri elementi!

Come Chrome Dev Tool evidenzia un elemento

Come potete vedere dall’immagine presentata i Chrome Dev Tools sono in grado di capire dove ho posizionato il mio cursore e di conseguenza mostrano le dimensioni complete dell’elemento, i margini e padding impostati e ovviamente, la sua posizione all’interno della pagina!

Ma non si limitano soltanto alla visualizzazione dell’elemento infatti, una volta trovato l’elemento interessato, cliccando sull’elemento presente nella struttura HTML saremo in grado di modificare le impostazioni CSS dei nostri elementi direttamente dai Dev Tools proprio come vi introducevo precedentemente! Provate adesso a cliccare, selezionando quindi, l’elemento h2 e noterete che la colonna a destra viene così popolata:

Chrome Dev Tools visualizza gli stili CSS per l'elemento selezionato

Come potete vedere, gli stili che vengono mostrati, sono gli stessi che sono stati dichiarati nel CSS di HTML5 and More, ordinati a secondo dell’ereditarietà del foglio di stile e completamente modificabili! Inoltre, le proprietà barrate, stanno ad indicare quali e in che punto vengono sovrascritte durante la lettura del CSS, un esempio pratico? Controllate la seconda dichiarazione, quella relativa al generale elemento h2, se osservate bene la proprietà font-size: 123.1% viene sovrascritta dalla stessa proprietà utilizzata da un selettore più specifico.

Fate i vostri test

Una volta selezionato un elemento non dovrete far altro che cliccare due volte all’interno delle regole che volete andare a modificare ed il campo diventerà editabile e pronto alle vostre modifiche! Dov’è il bello in tutto questo?!?

La possibilità di editare al volo i vostri CSS non vi suggerisce niente? Grazie a questa caratteristica potrete sperimentare qualsiasi proprietà CSS e vedere immediatamente come questa vada ad adattarsi ai vostri progetti senza perdere secondi preziosi che altrimenti avreste speso nella modifica/salvataggio ed aggiornamento dei vostri progetti!

Ed ancora non vi ho detto che cliccando sul nome del foglio di stile presente in alto a destra di ogni selettore avrete la possibilità di visualizzare interamente il CSS aggiornato con le vostre modifiche pronte per essere copiate ed incollate nel vostro foglio di stile originale, senza la necessità di andare a scrivere una singola linea di codice!

Conclusioni

Eccovi presentato uno strumento by Google che sicuramente entrerà a far parte dei vostri strumenti di sviluppo preferiti! Ma le potenzialità di questo strumento, come accennato precedentemente, non terminano qua! Per limitare la lunghezza del testo di questa puntata ho preferito espandere le altre caratteristiche nel video che trovate ad essa collegato inoltre voglio svelarvi un piccolo segreto; sto preparando una serie di puntate nelle quali andrò ad utilizzare intensivamente questo potente strumento con lo scopo di mostrarvi, in modo pratico, di cos’altro sono capaci i Chrome Dev Tools e di quanto saranno utili negli sviluppi dei vostri progetti web!

Questo sarebbe un ottimo momento per iscriverci al nostro Feed RSS ed essere sicuri che non vi perdiate una singola puntata! Ma magari non vi piacciono i Feed RSS e siete accaniti utilizzatori di FaceBook? Nessun problema! Abbiamo creato per voi Facebookkiani una Pagina alla quale potrete iscrivervi e seguire i nostri aggiornamenti direttamente da lì!

Detto questo auguro a tutti una buona formazione!

Lascia il tuo Pensiero

2 Responses to “Chrome Dev Tools – Cosa sono e Come Usarli”

  1. enrico

    molto interessante come guida. ho seguito i vostri consigli e li ho trovati molto utili, solo che ho un piccolo problema: una volta apportata una modifica nella voce styles (sbarrando un voce), non so come salvare la modifica. mi potreste aiutare???

    Rispondi
    • Andrea

      Ciao Enrico,
      a dire il vero non esiste un vero metodo che ti permetta di applicare le regole di stile che modifichi tramite il panello CSS dei Google Dev Tools. Paul Irish, sviluppatore per Google Chrome nonché uno dei creatori di HTML5 Boilerplate, afferma che visualizzando il CSS del tuo sito partendo dal pannello CSS dovresti trovare la versione aggiornata del tuo CSS (quindi senza le regole di stile che hai rimosso grazie allo stesso pannello CSS) ma purtroppo anche io, durante gli esperimenti, non ho trovato attiva questa possibilità (magari è presente nella night build di Chrome…).

      Tutto quello che però posso consigliarti di utilizzare è di utilizzare i Chrome Dev Tools per sperimentare in maniera diretta con i tuoi CSS e andare a modificare il CSS di partenza del sito che stai visualizzando. Ricordati che non puoi modificare il sito appartenenti ad altri, o meglio esistono delle vie che però sono complicate…

      Rispondi