Ente accreditato Regione Veneto n.4271

Estensioni di Google Chrome per sviluppatori

Alcune estensioni fondamentali per migliorare e velocizzare il nostro lavoro di Web Designer

web

Pubblicato da Simone // 5 settembre 2017 // 68 visualizzazioni

In questo articolo riprendiamo un argomento introdotto un paio di mesi or sono e che potete rileggere a questo indirizzo e andiamo a vedere alcune estensioni gratuite di Google Chrome, tra le centinaia proposte, che siamo soliti utilizzare nel nostro lavoro di Web Designer.

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

estensioni

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

estensioni

Le estensioni installate ci vengono mostrate nell’angolo in alto a destra del nostro browser come vedremo nelle prossime figure.

ColorZilla

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.

estensioni

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

estensioni

Measurelt

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.

estensioni

Awesome Screenshot

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.

estensioni

CSSViewer

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 successiva

estensioni

Wappalyzer

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.

estensioni

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.

 

Per scaricare le slide segui questo link.

Topic: , , , , , , ,
  • nicolo dian

    Segnalo anche JSON formatter per visualizzare i JSON in maniera chiara ed efficace.

    E anche un estensione della Google tools developer, ovvero Audits, che offre una panoramica sulle performance del sito dando anche le indicicazioni su cosa migliorare ☺

Send this to a friend