Quando lavoriamo alla creazione di un nuovo sito web o al restyling di uno già esistente, utilizziamo diverse estensioni Google Chrome che ci permettono di semplificare alcuni flussi di lavoro.

Le estensioni disponibili sono davvero tante, soprattutto per chi come noi lavora nel mondo del web. Di seguito trovi le 7 estensioni che secondo me sono indispensabili.

UX Check

UX Check è un’estensione che rende le valutazioni di un sito web o di una web app facili e veloci. L'estensione apre le 10 euristiche di Nielsen in un riquadro laterale accanto al tuo sito web. Quando fai clic su un elemento che non è conforme a un’euristica, puoi aggiungere note e verrà salvato uno screenshot. Alla fine, puoi esportare tutto in un documento in modo da poterli condividere con il team.
In questo modo è semplice raccogliere i vari problemi legati a un design e ci permette di misurare se e quanto una pagina sia conforme a una serie di principi di progettazione.

CSS Peeper

CSS Peeper è un visualizzatore CSS su misura per i designer. È possibile avere un comodo accesso allo stile di un sito web. Ma non mi riferisco solo al CSS. Con questa estensione, infatti, sono disponibili tre tipi di informazioni divise in altrettante sezioni:

  • Generali: dove vengono fornite tutte le informazioni CSS dell'elemento selezionato
  • Colori: dove vengono raggruppati tutti i colori usati nel sito web
  • Assets: dove vengono visualizzate tutte le immagini usate e che possiamo esportare con un semplice click.

Responsive Viewer

Grazie all’estensione Responsive Viewer è possibile visualizzare un unica schermata diverse visualizzazioni a diverse risoluzioni della stessa pagina. Nel riguardo laterale sono disponibili le risoluzioni dei diversi dispositivi come iPhone, Samsung, Pixel, ecc., è possibile scegliere sia la visualizzazione portrait che landscape e soprattutto effettuare uno screenshot di ogni dispositivo. Durante la navigazione del sito web attraverso questa estensione, inoltre, è possibile sincronizzare lo scroll e le azioni effettuate. Uno strumento davvero utile in fase di sviluppo.

Wappalyzer

Wappalyzer è un'estensione del browser che ti mostra le tecnologie utilizzate sui siti web. Rileva sistemi di gestione dei contenuti, piattaforme di e-commerce, server web, framework JavaScript, strumenti di analisi e molti altri. Un’altra applicazione simile è WhatRuns.

SEO Meta 1 Click

SEO Meta in 1 Click è un’estensione che mostra tutti i meta tag le principali informazioni SEO.
Grazie a questo strumento è possibile avere subito sott’occhio la struttura delle nostre pagine e in questo modo durante lo sviluppo non rischiamo di dimenticarci qualcosa.
Con questa estensioni si avrà un rapido riepilogo di informazioni come titolo della pagina e la sua lunghezza, descrizione e lunghezza, url, intestazioni, immagini senza alt, numero di link interni, unici, ecc.

Full Page Screenshot

Full Page Screenshot è un'estensione che permette di realizzare uno screenshot di tutta la pagina web o solo di una sezione di essa. Dopo aver catturato la porzione di pagina che ci serve è possibile trascinare l’immagine in un documento o salvarla.
Le immagini create, inoltre, non vengono salvate online, ma saranno disponibili solo sul tuo computer.

Panda 5

Panda 5 è il semplice newsreader gratuito. Scopri i migliori strumenti, risorse e ispirazione nel mondo del design e della tecnologia, tutto in un unico posto.
Puoi scegliere tra 9 diversi layout messi a disposizione e puoi salvare gli articoli che vuoi leggere più tardi.
Panda riunisce il meglio di Product Hunt, Medium, CSS Tricks e altre community in un unico posto.

Esistono davvero tante estensioni che possono aiutarci o da cui possiamo trarre ispirazione. Queste sono solo 7 estensioni Google Chrome che io uso spesso. Nello store puoi cercare quelle che più ti possono servire.