5 estensioni di Chrome per sviluppatori

Firefox non è l'unico browser Web ad offrire risorse per gli sviluppatori, anche Chrome dispone di un grande bacino di estensione dedicate al mondo del coding. Nell'articolo di oggi analizzeremo quindi i 5 addon per il browser di Google utili per le attività di sviluppo.

UX Check

Partiamo da UX Check, un addon che permette di analizzare un portale Web e capire se rispetta i parametri standard di usabilità. Permette inoltre di eseguire analisi e valutazioni euristiche, cosi da capire se il team ha seguito delle linee guida ben precise per sviluppare un portale Web o una Web App.

Tali valutazioni sono basate sulle Nielsen Ten Heuristics, un decalogo sull'usabilità delle interfacce che deriva dall'applicazione di tecniche di analisi fattoriali basate su 249 problemi di usabilità. L'addon si integra con i Chrome Dev tool e, una volta terminata l'analisi, è possibile selezionare singolarmente i componenti che non hanno passato i test per capire dove sta il problema. Si possono anche catturare degli screenshot e prendere delle note esportabili.

Eye Dropper

Passiamo adesso su Eye Dropper, questo colour picking tool è molto popolare tra chi sviluppa interfacce per le applicazioni. Si divide in due componenti: Eyedropper e Cooler. Il primo permette di catturare il colore da qualsiasi pagina Web, evidenziando i valori RGB, HSL ed HEX, mentre il secondo permette di selezionare un colore personalizzato.

I colori catturati possono essere salvati all'interno della palette colori dell'addon, e di base vengono mostrati all'interno di un pannello con la cronologia dei colori usati, oltre ad essere scaricati ed esportati in file CVS. L'addon dispone di comode keyboard shortcut tramite la quale poter attingere velocemente dai tool disponibili.

FontFace Ninja

Spostiamoci ora su FontFace Ninja, un'utility che permette di mostrare tutte le informazioni riguardanti un particolari font presente in una pagina Web. Consente inoltre di effettuare il download del font esaminato, se disponibile gratuitamente, oppure mostra lo store dove poterlo acquistare.

Dispone anche di una comoda dark mode, cosi da non affaticare la vista durante le ore notturne, di una funzione di display bookmarking ed è in grado di rilevare i font anche da un'immagine.

Page Ruler

È il turno di Page Ruler, questa estensione molto minimale permette di misurare con precisione le dimensioni di una pagina Web, dunque altezza e larghezza, o comunque del contenuto presente in essa.

Dispone di varie keyboard shortcut che semplificano tali operazioni, oltre ovviamente ad una comoda funzione di navigation through parent e al supporto ai child element. Si tratta quindi di un tool molto utile a coloro che devono creare delle grafiche oppure delle interfacce che devono tenere conto dei margini delle pagine Web.

CSS Pepper

Chiudiamo con CSS Pepper, un tool che può ispezionare ed estrarre codice CSS (compresi gli oggetti nascosti) presente nelle pagine Web analizzate. È stato creato con l'obbiettivo di aiutare i Web designer a realizzare interfacce grafiche ben organizzate e che seguano delle linee guida precise, senza dover ricercare manualmente nel codice per estrarre gli asset desiderati.

Permette di visualizzare anche i valori dei colori presenti nel codice CSS a colpo d'occhio, cosi da adattarli al proprio ambiente di lavoro e viceversa.