25 Estensioni Google Chrome estremamente utili per designer e sviluppatori

Google Chrome è stato un po 'ritardato per le guerre dei browser, ma è stato un successo notturno che è diventato subito il preferito dagli utenti Mac e Windows. Tutto su Chrome, dalla sua interfaccia minima e molto pratica al suo solido Webkit Core e robusto sistema di estensione, lo rende uno dei migliori modi per accedere al web.

Per tutti gli amanti di Chrome, abbiamo una straordinaria collezione di 25 Estensioni Google Chrome estremamente utili per Designer e Sviluppatori. Se stai cercando un modo rapido per convalidare la tua pagina o creare una griglia personalizzata, abbiamo lo strumento che fa per te.

Firebug Lite

Firebug Lite fornisce la ricca rappresentazione visuale a cui siamo abituati in Firebug quando si tratta di elementi HTML, elementi DOM e ombreggiatura del modello di casella. Offre alcune interessanti funzionalità come l'ispezione degli elementi HTML con il mouse e la modifica live di CSS.

Elegante

Questa estensione rende facile e divertente riprogettare completamente lo stile visivo di una pagina web o di un sito. Vuoi creare una versione grigia di YouTube o una versione nera di Google? Elegante è la tua risposta.

Stylish ti consente di gestire facilmente gli stili utente. Aggiungi, elimina, attiva, disattiva e organizza con pochi clic del mouse, nessun codice da modificare, nessuna configurazione oscura da trovare. Il sito web companion di Stylish, userstyles.org, ospita decine di migliaia di stili utente realizzati da altri utenti Stylish che puoi provare.

CSS Reloader

CSS Reloader è un'estensione del browser che ti consente di ricaricare i CSS senza ricaricare la pagina stessa. Basta premere un collegamento rapido e la pagina si aggiornerà con le modifiche di stile.

Speed ​​Tracer (di Google)

Speed ​​Tracer è uno strumento che consente di identificare e risolvere i problemi di prestazioni nelle applicazioni Web. Visualizza le metriche prese dai punti di strumentazione di basso livello all'interno del browser e li analizza mentre viene eseguita l'applicazione. L'interfaccia utente è un cruscotto di facile utilizzo completo di informazioni e grafici applicabili che ti aiuteranno a ottimizzare le tue app.

Editor CSS live

Questa estensione fornisce una casella di testo su qualsiasi pagina HTML in modo che tu possa scrivere liberamente CSS e vedere immediatamente i risultati. È uno strumento semplice ma è molto utile per elaborare idee e risolvere i problemi.


Aviary Screen Capture

Questo è uno strumento davvero bello che cattura qualsiasi pagina web e lo apre automaticamente in uno dei tanti strumenti professionali di Aviary.com per i creativi. Avrai accesso agli strumenti di Photoshop in modo da poter manipolare l'immagine come preferisci: ritagliare, ridimensionare, ruotare, ecc.

Lorem Ipsum Generator

Solo un semplice generatore Lorem Ipsum integrato nel tuo browser. Estremamente utile per quando crei prototipi e hai bisogno di un testo di riempimento.

Aggiorna Scimmia

Aggiorna automaticamente una pagina a intervalli regolari. Monitora la pagina per una modifica e ricevi una notifica in caso di modifica. Questo è ovviamente lo strumento perfetto per gli sviluppatori web che vorrebbero tenere d'occhio le modifiche al codice nel browser senza aggiornare costantemente la pagina manualmente.

Window Resizer

Questa estensione ridimensiona la finestra del browser per emulare varie risoluzioni. Se stai saltando sul reattivo web design train, ti consigliamo di controllare questa estensione in modo da poter valutare rapidamente i tuoi disegni in varie dimensioni popolari.

Google Font Previewer per Chrome

Sono un grande fan di Google Fonts, lo strumento gratuito per l'applicazione di caratteri web personalizzati tramite CSS. Questa estensione ti consente di applicare rapidamente i caratteri di Google a specifici selettori CSS in modo da ottenere un'anteprima veloce di come apparirà quel font nel tuo progetto prima di aggiornare effettivamente i tuoi file.

Ruul

ruul: un righello sullo schermo fantasticamente semplice per allineare e misurare tipo, altezza della linea, tratti e praticamente qualsiasi cosa sul web. Perfetto per analizzare progetti esistenti.

Controlla i miei collegamenti

'Controlla i miei collegamenti' trova rapidamente tutti i collegamenti su una pagina Web e controlla ciascuno di essi per te. Mette in evidenza quali sono validi e quali sono rotti. Non posso dirti quante volte ho commesso errori stupidi come dimenticare di controllare i miei collegamenti per assicurarmi che funzionino tutti. Questo semplice strumento automatizza questo processo fastidioso e ti aiuta a identificare ciò che devi correggere.

Comps

Se ti piace codificare siti Web da composizioni di Photoshop, ti troverai costantemente a confrontare i due per vedere se sei sulla strada giusta. Questa estensione ti consente di caricare immagini dal tuo computer locale e di sovrapporle facilmente sul tuo sito web per confrontare il tuo codice con un determinato modello.

Le griglie

Questa estensione ti aiuta a creare una sovrapposizione griglia personalizzata per qualsiasi pagina. Ha parecchie opzioni ed è abbastanza utile per creare layout perfetti basati su pixel.

Scala di grigi

Con questa estensione puoi mostrare le tue pagine in scala di grigi, questo ti aiuterà a vedere i potenziali problemi con i colori che non hanno abbastanza contrasto. Il contrasto è un elemento importante nel design che migliora l'estetica e l'usabilità per gli utenti tipici e daltonici.

Righelli, Guide, Contagocce e Color Picker

Per gli sviluppatori dell'interfaccia utente. Scegli qualsiasi colore dalla pagina web usando lo strumento occhio-contagocce; mostra righelli, guide e griglia sulla pagina.

Pendule

Pendule è una vasta raccolta di strumenti per sviluppatori per Chrome. È possibile visualizzare e convalidare il codice, disabilitare gli stili, visualizzare i colori utilizzati, nascondere le immagini, mostrare le password e molto altro.

WhatFont

WhatFont è uno strumento fantastico che puoi trovare su molti browser. È veloce, facile, super attraente e ti dice non solo il nome del font, ma anche la dimensione e l'altezza della linea.

Tavolozza per Chrome

Uno strumento piccolo e accurato che cattura rapidamente i colori da qualsiasi immagine e ti aiuta istantaneamente a creare schemi di colori solidi.

Guide

Mantieni i tuoi elementi in linea con le Guide! Controlla le distanze, gli allineamenti e altro per assicurarti che i tuoi siti web siano pixel perfetti.

HTML istantaneo

HTML Instant è un semplice e semplice editor di doppi riquadri che consente di inserire HTML, CSS o JavaScript sulla destra e visualizzare istantaneamente un'anteprima dal vivo a sinistra.

Convalida HTML

Un modo rapido e semplice per convalidare la pagina corrente usando w3.org.

Analisi SEO e siti web

SEO & Website Analysis di WooRank è un'estensione per Google Chrome che fornisce una profonda analisi SEO che copre più di 50 criteri di SEO e usabilità.

Rivelatore di compatibilità del browser

La compatibilità cross-browser è il più grande dolore che dovrai affrontare quando sviluppi siti web. Questo strumento può aiutarti a identificare rapidamente potenziali aree problematiche nel tuo codice.

Neo Vision

Neo Vision fornisce l'evidenziazione della sintassi durante la visualizzazione dei file di origine. La parte interessante è che ci sono più temi personalizzabili in modo che tu possa far apparire il codice come vuoi.

Qual è la tua estensione Google Chrome preferita?

Ora che hai visto la nostra raccolta di Estensioni di Google Chrome per designer e sviluppatori, lascia un commento e facci sapere quali sono le tue estensioni preferite. Inoltre, hai provato una delle estensioni sopra? Cosa ne pensi di loro?