In questo articolo parliamo di alcune estensioni gratuite di Google Chrome, tra le centinaia proposte, che siamo soliti utilizzare nel nostro lavoro di Web Designer.

1. ESTENSIONI DI
GOOGLE
CHROME PER
SVILUPPATORI
docente Simone Baldassin

2. In questo articolo andiamo a vedere alcune
estensioni gratuite di Google Chrome, tra le
centinaia proposte, che siamo soliti utilizzare
nel nostro lavoro di Web Designer.

3. In primis per poter installare un’estensione
dobbiamo conoscerne il nome e ci basta poi
richiamarla dal browser e cliccare sul
pulsante aggiungi.

4. Come vediamo in figura l’estensione è già
installata nel dispositivo in uso e questo ci
viene prontamente segnalato.

5. Come vediamo in figura l’estensione è già
installata nel dispositivo in uso e questo ci
viene prontamente segnalato.
Le estensioni installate ci vengono mostrate
nell’angolo in alto a destra del nostro
browser come vedremo nelle prossime
figure.

6. La prima che vediamo si chiama ColorZilla
ed è piuttosto conosciuta; questa estensione
ci permette, una volta attivata, di
campionare, copiare e salvare negli appunti i
colori direttamente dal client. Se per esempio
volessimo sapere che colore blu usa Veneto
Formazione nell’angolo a sinistra della hero
section in homepage ci basta un semplice
click per avere a disposizione esadecimale e
rgb.
ColorZilla

7. Questo campione si può puoi
tranquillamente richiamare dal pannello
Color Picker dell’estensione stessa.

8. La seconda estensione che proponiamo si
chiama Measurelt e ha come unico scopo
prendere misure all’interno della pagina web
dal client come possiamo vedere nella
prossima figura. Utilissima in più occasioni e
ve ne renderete conto da soli utilizzandola
durante il vostro lavoro.
Measurelt

9. Estensione tra le più utili sicuramente a mio
avviso è Awesome Screenshot che ci permette di
ricavare screenshot di intere pagine o porzioni
delle stesse in maniera assolutamente rapida ed
efficace pur avendo, ahimè, qualche bug nelle
esecuzioni di tanto in tanto che scoprirete durante
l’utilizzo. A prescindere rimane un ottimo
strumento di lavoro che vi consiglio caldamente.
Awesome Screenshot

10. Anche se a volte non precisissimo
CSSViewer è un ottimo strumento per
ricavare informazioni sullo stile di un
elemento semplicemente posandocisi sopra
con il cursore del mouse. Se per esempio
volessi avere delle informazioni sul testo
corsi in partenza del nostro sito ufficiale mi
basterà passarci sopra come vediamo nella
figura nella slide successiva
CSSViewer

12. Ultima ma non ultima Wappalyzer,
estensione in costante aggiornamento, che ci
permette di ricavare numerose informazioni
sul sito web che stiamo visitando, dal server
ai framework o plug-in presenti nello stesso.
Queste informazioni possono rivelarsi molto
utili per scoprire la tecnologia con cui un sito
è stato creato o la piattaforma su cui si
appoggia.
Wappalyzer

14. Segnalo infine velocemente una piccola
estensione molto utile che risponde al nome
di New Tab Redirect, che permette di gestire
i redirect quando apriamo una nuova scheda,
cosa che di default Chrome non permette e
l’immancabile Firebug di cui parleremo con
più calma, data la sua complessità, in un
prossimo articolo.
Non vi rimane che aggiungere queste
estensioni al nostro browser e provarle voi
stessi.
Buon lavoro.

15. continua la tua formazione su
www.venetoformazione.it/blog