Conosci gli strumenti SEO di Chrome?
Sai sfruttare al meglio i Chrome Dev Tools?
La tua pagina web implementa tutte le best practice suggerite da Google?
Imparerai tutto quello che c’è da sapere sui Chrome Dev Tools per sviluppare un progetto front-end, con gli strumenti nativi (Mobile, Elements, Network, Console, Application, Source, SEO e Best Practices) e estendendo Chrome con i migliori add-on per i Web Developer.
Parte 4 della collana I 10 strumenti essenziali se programmi con il front-end e Angular
Chrome Dev Tools: dispositivi mobile + Tips 8
Tip #1: Gestione dei sensori 10
Tip #2: Strumenti per dispositivi mobile reali 12
Chrome Dev Tools: Elements + Tips 14
Tip #3: Ricerca rapida di un elemento 19
Tip #4: Abilitare/disabilitare le classi di un elemento 21
Tip #5: valutare la grafica istantanea di un elemento 21
Chrome Dev Tools: Network + Tips 23
Gli strumenti Chrome per le richieste/risposte HTTP 24
Tip #6: Ripetere una richiesta HTTP tramite console 26
Tip #7: Copiare una richiesta in Postman o eseguirla con cUrl 27
Tip #8: Copiare il JSON di risposta del server nella clipboard 28
Tip #9: Filtrare le richieste in maniera avanzata 29
Chrome Dev Tools: Console + Tips 31
Tip #10: visualizzare la password salvata in un input 33
Tip #11: usare le snippet dalla console 34
Chrome Dev Tools: Application + Tips 36
Gli strumenti Chrome per la persistenza 36
Chrome Dev Tools: Sources + Tips 41
Chrome Dev Tools: gli altri pannelli 49
Valutare la qualità di un sito web: SEO, Accessibilità e Best Practices 49
La sicurezza di un sito web 50
Controllare le performance di un sito web 50
Tip #13: Controllare l’uso di memoria e CPU di un tab 52
Estendere Chrome Dev Tools: snippet, bookmarklet e add-ons 53
Scoprire le tecnologie usate da un sito web 57
Esplorare i Font di un sito web e testare altri font sul nostro sito 58
Chrome Dev Tools Angular: Augury 59
Questo articolo chiude la serie di articoli dedicati ai migliori strumenti per velocizzare il processo di sviluppo front-end.
Abbiamo già visto Postman per verificare e gestire richieste HTTP e AutoHotkey per avere un assistente nello sviluppo front-end attraverso l’automazione di task noiosi e ripetitivi. Abbiamo inoltre visto i migliori strumenti per il deploy di un progetto front-end e cmder per rimpiazzare il prompt di Windows con un prompt moderno e ricco di funzionalità.
Chiudiamo la serie con i migliori strumenti di Chrome per gli sviluppatori. Per ogni strumento vedremo:
Vedremo inoltre come estendere Chorme con strumenti extra, per visualizzare oggetti JSON in maniera strutturata e per estendere le potenzialità di debug.
I Chrome Dev Tools sono supportati da Chrome senza installare nient'altro. L'unico requisito è quindi avere installato il browser Chrome. Anche di Chrome esiste una versione portable all’indirizzo:
https://portableapps.com/apps/internet/google_chrome_portable
Per avviare i Chrome Dev Tools premiamo l'Hotkey F12:
Si aprirà un pannello con tutta una serie di Tab. Ogni Tab è uno strumento per il supporto allo sviluppo front-end che andremo a vedere di seguito con i migliori trucchi spesso meno noti per sfruttarlo al meglio.
Il primo e più importante Hotkey che dobbiamo imparare è CTRL+SHIFT+P:
Premendolo apparirà una finestra che ci elenca tutti i comandi possibili e possiamo cercarli anche con l’autocompletamento.
Selezionando un comando, questo verrà eseguito.
Vogliamo capire come si vedrà il nostro sito su dispositivi di varie dimensioni.
La cosa è molto utile soprattutto nel caso mobile. Chrome infatti permette di simulare un dispositivo mobile per darci un'idea di come si vedrà una pagina su quel dispositivo. Ricordiamo che si tratta di simulazione e che su un dispositivo vero potrebbe vedersi in modo leggermente diverso.
Per avviare lo strumento di simulazione mobile usiamo l’icona in alto a sinistra dei tab:
Per il mobile sono presenti diversi ulteriori strumenti accessibili con i tre puntini poco più a sinistra del pulsante appena cliccato. Cliccandoci apparirà un menu che mostra le varie funzioni:
Tra queste le più interessanti sono:
Con la barra superiore è possibile invece:
Sapevate che è possibile simulare quasi tutti i sensori di un dispositivo mobile tramite un pannello secondario?
Dalla Console in basso (sia apre premendo Esc se non è presente), premendo nei tre puntini a sinistra del Tab Console, è presente tutta una serie di ulteriori strumenti, tra cui i Sensors.
Cliccandoci si apre un pannello per gestire i sensori e simulare i valori di GPS (Geolocation), accelerazione (Orientation), e tipo di touch.
Collegando un dispositivo mobile tramite USB al nostro PC e andando sul link chrome://inspect/#devices potremo vedere il nostro dispositivo tra i Remote devices e ispezionare un tab di Chrome con quasi tutti gli stessi strumenti disponibili su desktop.
Usando il pulsante Port Forwarding possiamo anche vedere sul dispositivo un sito web che gira su un server in localhost sul nostro PC:
Quando creiamo un qualunque progetto front-end, la pagina è progettata con il linguaggio HTML. Avremo speso la necessità di esplorare l'HTML e magari modificarlo live per vedere come verrebbe.
Per ispezionare un elemento HTML possiamo aprire il tab Elements e, posizionandoci su un qualsiasi tag HTML, si evidenzierà il corrispondente elemento nella pagina:
Possiamo interagire con i tag in vari modi:
Il tab Elements contiene inoltre diversi strumenti per ispezionare la parte CSS della nostra pagina.
Con il sotto-pannello Styles possiamo valutare le regole CSS applicate all’elemento selezionato nel tab Elements e modificare live colori, dimensioni o in generale tutti i valori CSS.
Nella parte destra del pannello sono mostrate tutte le regole effettivamente applicate ad un elemento e cliccando su una regola è possibile capire in quale classe CSS è stata dichiarata:
Altri strumenti interessanti meno noti sono
Se una regola CSS è un colore, possiamo cliccare accanto all’icona quadratino colorato per aprire lo strumento.
Oltre a cambiare colore, premendo l’icona a doppie frecce superiore possiamo cambiare il formato, mentre premendo l’icona a doppie frecce inferiore Chrome ci suggerisce delle palette predefinite, come la palette Material, oltre a mostrarci i colori usati nella pagina corrente:
Lo shadow editor è attivabile in maniera analoga per le regole relative alle ombre:
Se non ricordiamo la sintassi della regola CSS, da qui possiamo impostare tutti i parametri con una schermata visuale.
Quando vogliamo aggiungere al nostro sito delle animazioni per migliorare l’esperienza utente, possiamo fare riferimento al sito https://daneden.github.io/animate.css/ in cui è possibile scaricare il file animate.css con tante animazioni semplici, pulite e non pesanti.
Anche alcune regole delle animazioni possono essere modificate in Chrome premendo sull’iconcina con la curva, nella regola relativa all’animazione:
Dopo questa panoramica, vediamo alcuni trucchi per lavorare con gli elementi.
Per ricercare un elemento abbiamo diverse possibilità:
Per ogni elemento selezionato nel tab Elements possiamo fare il “toggle” delle classi usando il pulsante .cls nel pannello Styles:
Chrome mette a disposizione un checkbox per bloccare lo stato di un elemento, ma non sempre è sufficiente in quanto spesso un elemento cambia grafica non in base a regole CSS, ma ad esempio in base a script JavaScript.
Lo stato può essere bloccato usando il pulsante .hover vicino al pulsante.cls precedente:
Ma quando lo stato non basta, per valutare in ogni caso la grafica istantanea di un elemento seguiamo questi passi:
Un progetto front-end comunica con un back-end per inviare e richiedere informazioni. È utile sapere cosa inviamo e cosa riceviamo e in questo caso ci aiuta il pannello Network.
Aprendo il pannello Network ci ritroveremo con la lista delle richieste al back-end.
Trattandosi spesso di molte richieste, Chrome ha messo a disposizione molti strumenti per filtrare la lista. Possiamo specificare un filtro testuale nel campo Filter oppure possiamo usare i filtri per tipo: Script, immagini, CSS, …, ma il più usato per lo sviluppo front-end moderno è sicuramente quello per filtrare le richieste asincrone: XHR
Cliccando su una richiesta, si apre sulla destra un pannello con tutta una serie di sotto-pannelli contenenti informazioni utili.
Molto interessanti le informazioni inviate al back-end, nella sezione Request Payload (utili soprattutto nel caso di una POST). Per esaminare la risposta del back-end possiamo invece cliccare sul Tab Preview
Lo strumento Network non è solo uno strumento per investigare le richieste HTTP, ci permette infatti di:
Se clicchiamo col tasto destro su una richiesta abbiamo diversi strumenti. Copiando la richiesta come fetch (Copy as Fetch) possiamo ripeterla nella Console semplicemente incollandola e premendo Invio (e possiamo eventualmente modificarla prima di premere Invio):
Per importare una richiesta Chrome in Postman dobbiamo trasformarla in formato cUrl:
A questo punto possiamo importarla in Postman:
Per copiare il JSON restituito dal server possiamo usare ancora una volta il menu contestuale
Oppure possiamo copiare parte del JSON in una variabile temporanea da manipolare nella console:
La variabile è ora disponibile con il nome temp1
Il campo Filter che abbiamo visto in precedenza per filtrare gli URL che contengono un particolare testo, può anche essere utilizzato per filtrare in maniera più avanzata. Premendo CTRL+SPAZIO nel campo appare un menu che ci permette di filtrare le richieste con una caratteristica specifica:
Ad esempio possiamo filtrare le risposte errate con status-code: 4 o anche quelle con dimensione maggiore di 10 KB: larger-than:10k
Quando scriviamo il codice in qualunque linguaggio, abbiamo la possibilità di stampare il risultato di un'espressione a video. La console ci mostra i risultati, ma non è esclusivamente uno strumento passivo: tramite la console possiamo interagire con la nostra applicazione ed è talmente utilizzata che Google ha previsto un doppio pannello: uno in alto a fianco agli altri Tab:
E l’altro, identico, sempre presente in concomitanza di un altro Tab premendo ESC:
Le principali funzioni della console sono:
Possiamo inoltre usare alcune funzioni della console direttamente dal nostro codice JavaScript, ad esempio possiamo interrompere il flusso di codice scrivendo l’istruzione debugger; nel nostro file sorgente, subito prima del codice da debuggare.
Vi svelo questo piccolo trucco, ma usatelo solo per visualizzare le vostre password salvate in Chrome e dimenticate:
In generale $0 ci fornisce il riferimento all’ultimo elemento ispezionato, che in questo caso è l’input contenente la password. L’istruzione $0.value nella console ce ne mostra il valore.
La console può mantenere la storia di tutti i comandi digitati e ricordarceli tramite l’autocompletamento. Basta andare nelle impostazioni della console stessa (dove ci sono anche altre configurazioni):
Se però vogliamo salvare snippet complesse di codice possiamo usare il pannello Snippet di Chrome, disponibile nel Tab Source (che vedremo tra poco) e poi cliccando sul sotto-pannello Snippet
Qui possiamo crearne di nuove e salvarne il codice.
Possiamo poi richiamare queste snippet dalla console:
Possiamo salvare le nostre snippet preferite o aggiungere snippet create dalla community (copia/incolla del codice in una nuova snippet), come le seguenti:
Un'applicazione web moderna può salvare molte informazioni in maniera persistente. Ciò significa che chiudendo il browser e riaprendolo le informazioni sono ancora a disposizione. Avremo spesso bisogno di esplorare queste informazioni e magari anche modificarle.
Possiamo salvare informazioni in un progetto web usando una di queste tecnologie:
Tutte queste informazioni le possiamo ispezionare dal pannello Application:
Gli strumenti che useremo maggiormente e che vedremo con qualche dettaglio in più sono la sezione Cookie, LocalStorage, WebSQL e IndexedDB.
La sezione Manifest permette di esplorare l’AppCache della pagina, che serve per far funzionare un sito web anche offline in assenza di connessione.
Oggi è sempre meno utilizzata ed è stata sostituita dai Service Worker.
In questa sezione possiamo esplorare i cookie di un sito web, modificarli ed eliminarli.
Sempre più spesso al posto dei cookies si utilizza il LocaleStorage per memorizzare piccole informazioni da inviare al server in maniera controllata dal client, Ad esempio possiamo qui memorizzare un token, da inviare con gli headers HTTP.
Come per il pannello dei cookies, anche qui possiamo modificare ed eliminare tutti i valori.
Dopo aver creato un DB sql con le API relative, possiamo esplorare il DB o eseguire script SQL per manipolare il DB usando il pannello:
Tutte le operazioni SQL sono supportate:
Esiste anche un DB NoSql nel browser, noto come IndexedDB. Per esplorarlo possiamo usare il pannello relativo che, nonostante non sia potente come il precedente, permette di esplorare il DB ed eseguire query base:
E arriviamo infine al pannello più potente per noi sviluppatori: Source.
Lavorando col codice, da qui avremo un pieno controllo di tutto quello che sta succedendo.
Per esplorare i codici della pagina possiamo usare la barra laterale, o, come preferisco, premere CTRL+P col pannello Source attivo e iniziare a scrivere il nome del file:
Dopo aver aperto uno script possiamo aggiungere un breakpoint per fermare il flusso di codice facendo doppio click sulla linea interessata:
Quando il programma è bloccato, possiamo esplorare il contesto delle variabili passando il mouse sopra una variabile:
Possiamo quindi procedere linea per linea con F10 o riprendere il normale flusso di esecuzione con F8.
Se con il flusso bloccato digitiamo delle istruzioni di codice nella console, possiamo usare le variabili del contesto attualmente attivo nella linea del breakpoint: ciò è utile per testare del codice o modificare il valore di variabili.
Con la sezione più a destra possiamo eseguire alcune funzioni extra per il debug:
possiamo disabilitare i breakpoints o stoppare il programma quando ci sono eccezioni 
Per il debug live, possiamo eseguire una porzione di codice del pannello source nella console selezionandolo e premendo il tasto destro:
Anche se il browser usa esclusivamente script JavaScript, quando usiamo TypeScript o altri linguaggi compilati in JavaScript, avremo la possibilità di vedere nei source il codice originale e non il compilato. Se ad esempio il nostro progetto è un progetto Angular o WebPack, vedremo i sorgenti TypeScript poiché Chrome supporta i SourceMaps. I breakpoint possiamo aggiungerli direttamente nel codice originale.
Spesso il codice JavaScript di produzione viene offuscato, cioè le variabili e le funzioni sono rinominate in modo da renderle criptiche e gli spazi e la formattazione sono eliminati.
In questo modo il codice risulta più compatto è non immediatamente comprensibile ad uno sviluppatore estraneo.
Tuttavia in Chrome esiste un pulsante che permette di de-offuscare parzialmente il codice. Si trova in basso a sinistra del pannello Source
Cliccandolo, un codice prima incomprensibile diventa leggermente più leggibile:
Come abbiamo potuto vedere dai vari screenshots, Chrome dispone di molti altri pannelli e funzioni che sono meno utilizzati, ma non per questo meno importanti.
Le vedremo velocemente in questa sezione.
Il pannello Audits è uno dei più semplici e più utili.
Semplice perché basta configurare qualche checkbox e premere un pulsante per avere un report completo su vari aspetti del nostro sito web:
Inoltre ci fornisce anche suggerimenti su cosa fare per correggere eventuali problemi attraverso la sezione Opportunity subito sotto il report.
Il tab Security è anche una sorta di report, ma relativo alla sicurezza del nostro sito web. Basta leggere le informazioni riportate ed eventualmente correggere i problemi.
Col pannello performance possiamo registrare il carico della CPU per debuggare funzioni anomale e simulare una CPU più lenta se vogliamo capire come si comporterebbe il nostro sito su un device datato o mobile:
Nel sotto-pannello Call Tree possiamo cliccare anche sul file di una funzione eseguita:
Analogo è il pannello Memory per controllare l’uso di memoria della nostra applicazione:
Il modo più veloce di controllare quanta memoria e CPU sta occupando un tab non è attraverso il pannello Memory né con il Profiler, bensì usando il Task Manager di Chrome:
Da qui possiamo vedere velocemente l’uso di risorse dei vari tab e frame interni ed eventualmente “killare” un tab:
Abbiamo già visto come poter estendere le capacità della console di Chrome con delle snippet da richiamare velocemente con CTRL+O e il nome della snippet.
Esiste poi un modo per aggiungere snippet da eseguire come se fossero un bookmark nella barra dei preferiti.
Uno che uso periodicamente si chiama DebugCSS e permette di evidenziare gli elementi di una pagina.
Lo possiamo scaricare dal link https://zaydek.github.io/debug.css trascinando l’URL nella pagina direttamente nella barra dei preferiti. Per eseguire il bookmarklet basta premerne il pulsante dalla Barra dei Preferiti:
Creare un bookmarklet non è complicato, ad esempio ho creato il seguente bookmarklet per accedere a Google Analytics applicando dinamicamente il filtro di oggi:
javascript:( (function () {
let pad = number => number <= 9 ?
("0"+number).slice(-2) : number;
let m = pad(new Date().getMonth()+1);
let d = pad(new Date().getDate());
let l = 'https://analytics.google.com/analytics/web/?hl=it&pli=1#/dashboard/*****/*****/_u.date00=2018'+m+d+'&_u.date01=2018'+m+d;
window.location.href = l
})() )();
Per creare un nostro bookmarklet personale e manipolare la pagina corrente è sufficiente:
Tutte le snippet presenti a questo indirizzo possono essere convertite in bookmarklet:
https://github.com/bgrins/devtools-snippets/tree/master/snippets
Attualmente sono presenti 20 snippet utili nello sviluppo.
Se un bookmarklet non basta, possiamo facilmente estendere Chrome con degli add-on.
Di seguito vedremo gli add-on più utili per lo sviluppatore front-end.
Questo add-on formatta un dato JSON quando apriamo un URL che restituisce un JSON grezzo.
Lo troviamo al seguente URL:
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en
Avete mai desiderato sapere quali tecnologie ci sono dietro un sito web? Wappalyzer ve le elenca tutte, sia lato front-end che lato back-end:
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en
WhatFont ci permette di conoscere i font usati da un sito web, mentre TypeWonder ci aiuta a capire come verrebbe visualizzato il nostro sito web con un altro font:
Sono disponibili rispettivamente a questi indirizzi:
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
https://chrome.google.com/webstore/detail/typewonder/ohgmapelghofmbacalgamfbejaghdilh/related
Per gli sviluppatori Angular, non poteva mancare un’estensione a loro dedicata. Si chiama Augury e permette di esplorare l’albero dei componenti, di ispezionarli e di visuallizzare o modificare il loro stato.
La trovate qui:
https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd
Con questa guida abbiamo visto come usare Chrome come strumento di sviluppo. Si tratta ad oggi dello strumento più potente e completo per il supporto al processo di sviluppo front-end. Inoltre, con gli add-on, è possibile estenderne le funzionalità per use case specifici.
Ci sono molte altre funzioni più di nicchia che qui non abbiamo visto. Per conoscere più a fondo i Chrome Dev Tools vi invito a visitare il sito ufficiale:
https://developers.google.com/web/tools/chrome-devtools/
Mentre per ulteriori tips (attualmente 177) presentate con brevi animazioni potete fare riferimento al sito
Per qualsiasi dubbio o chiarimento non esitare a contattarmi tramite il sito https://devexp.io e per ricevere articoli utili sul front-end e Angular iscriviti alla Newsletter del sito.
Buon lavoro con Chrome!
Il libro definitivo per imparare Angular, con esempi, codici e l'esperienza che serve per essere efficaci nello sviluppare siti, dashboard CRUD o web-app mobile (Raccomandato con un punteggio di 4.7/5 su Amazon)
Info sul libro + Codici e demo delle esercitazioniLibro stampato
Kindle
C'è una differenza tra programmare e progettare un software: il design. In questo libro viene mostrato il processo per arrivare ad un design semplice e manutenibile attraverso i design pattern
Info sul libro + Codici delle esercitazioniLibro stampatoKindleQuesto sito utilizza i cookie per migliorare l'usabilità.
In particolare usiamo Google Analytics.
Maggiori informazioni sono disponibili nella sezione sullaprivacy.
Il workshop è pensato per chi vuole imparare Angular e dura 3 giorni. Consiste nell'imparare e comprendere il framework con spiegazioni complete, esempi ed esercitazioni.
Se hai già letto il libro ti consigliamo un workshop avanzato che sarà disponibile a breve.
Il workshop si terrà a Roma il 7-8-9 settembre presso una SPA che sarà comunicata via e-mail. Comprende tutte le spese di vitto e alloggio.
Il pagamento avviene contestualmente all'arrivo.
Per ulteriori informazioni non esitare a chiedere:
Benvenuto indevexp.io, il sito italiano dedicato ad Angular e al front-end.
A breve verrai contattato daSalvatore del teamdevexp.io per il benvenuto
A breve riceverai una risposta daSalvatore del teamdevexp.io.
Il formato XL è in lavorazione e sarà pubblicato a breve. Grazie.
Grazie e a presto su devexp.io