Se sei un designer e hai bisogno di alcuni strumenti utili per velocizzare, collaborare o controllare i tuoi progetti di sviluppo web^{(web development)} , l'estensione di Chrome ha una moltitudine di strumenti.

Questo elenco comprende alcuni degli strumenti e delle estensioni di Chrome più popolari, e alcuni direbbero necessari, che ogni utente che esegue lavori di progettazione^{(design work)} dovrebbe avere nella propria borsa del kit^{(kit bag)} .

1. Dom Flag

DOM Flags è ^{(DOM Flags)}un'estensione di Chrome^{(Chrome extension)} semplice da usare che offre agli sviluppatori un nuovo modo di lavorare con gli strumenti del browser. Consente agli sviluppatori di accelerare l'attività di styling degli elementi.

Usando le scorciatoie da tastiera per ogni elemento puoi aggiungere la tua navigazione ai segnalibri.

Abbiamo tutti sperimentato la difficoltà di ispezionare elementi altamente dettagliati ed è facile perdersi.

I flag DOM^{(DOM Flags)} ti consentono di tenere traccia degli elementi di stile e include una funzione per ispezionare automaticamente i componenti con precisione. Questo, a sua volta, aiuterà a velocizzare il flusso di lavoro e l'implementazione di DevTools^{(DevTools workflow and implementation)} .

DOM Flags ti consente di tenere traccia delle modifiche. E mantieni la concentrazione sugli elementi con cui stai lavorando.

2. Frizzante

Sizzy offre a progettisti e sviluppatori un modo semplice per testare i propri siti in più viste.

Sizzy fornisce un modo semplice per controllare il tuo progetto in tempo reale. Offre una visualizzazione interattiva di qualsiasi numero di dispositivi e dimensioni dello schermo. Puoi anche simulare la tastiera di un dispositivo^{(device keyboard)} e quindi passare dalla modalità orizzontale a^{(landscape and portrait modes)} quella verticale .

L'installazione di un'estensione di Chrome^{(Chrome extension)} aggiungerà un pulsante alla barra degli strumenti che, se cliccato, aprirà l' URL corrente nella piattaforma Sizzy^{(Sizzy platform)} . L'estensione bloccherà tutte le intestazioni " x-frame-options " in modo da poter dare un'occhiata a qualsiasi sito Web online.

Sizzy è un progetto open source^{(source project)} e puoi vedere l'intero codice qui^(here) .

3. Checkbot

Checkbot può testare il tuo sito per problemi di sicurezza e anche controllare la velocità di caricamento della pagina del tuo sito web. Fornirà ai progettisti un mezzo per identificare gli errori tipici e suggerirà miglioramenti nella sicurezza del sito^{(site security)} , nel motore di ricerca^{(search engine)} e nella velocità del sito^{(site speed)} .

Utilizzando più di 50 metriche delle migliori pratiche, verificherà un sito Web per la SEO delle migliori pratiche , collegamenti interrotti, contenuti duplicati^{(duplicate content)} e altro ancora. Lo strumento convaliderà anche CSS , JS e HTML .

Checkbot rileva gli errori del progettista e del programmatore^{(designer and coder errors)} in tempo reale risparmiandoti la fatica di dover tornare indietro e ricontrollare ripetutamente il tuo lavoro.

Se stai cercando uno strumento di buona qualità^{(quality tool)} che ripari i collegamenti alle pagine interrotti, garantisca contenuti e titoli di pagina^{(content and page titles)} unici ed elimini le catene di reindirizzamento, questo strumento sarebbe utile.

Per i progettisti, può aiutarti a ridurre al minimo i tuoi CSS e JS^{(CSS and JS)} , oltre a fornire consigli su come minimizzare i tuoi CSS e sfruttare la memorizzazione nella cache del browser.

4. Clipper GistBox

GistBox è una delle estensioni di ^(GistBox)Chrome più utili per i web designer.

GistBox può creare un GitHub Gist da qualsiasi blocco di codice^{(code block)} sulla pagina Web che stai visualizzando.

Nell'angolo in alto a destra^{(right-hand corner)} di qualsiasi blocco di codice, vedrai un piccolo pulsante che, se premuto, consentirà un pop-up che ti consentirà di salvare il codice in Gist .

È possibile creare nuovi Gist con un clic con il tasto destro del mouse e salvare blocchi di codice per un'ispezione e un utilizzo^{(inspection and use)} successivi .

L'integrazione con GitHub consente a progettisti e sviluppatori di raccogliere blocchi di codice e manipolarli o classificarli per un uso successivo. Questo lo rende uno strumento di estensione di Chrome ^{(Chrome extension)}comodo ed efficiente .^{(convenient and efficient)}

5. ColorZilla

ColorZilla è un'estensione di Chrome incredibilmente utile per raccogliere codici esadecimali che possono essere taggati, etichettati e classificati per singoli progetti di web design .

Ti consente di selezionare uno strumento contagocce che estrarrà il colore da qualsiasi pagina Web e lo salverà negli appunti di ColorZilla.

Con esso, puoi sviluppare rapidamente tavolozze di colori per un uso successivo e come modo per assicurarti di utilizzare il colore in modo coerente nella progettazione e nello sviluppo^{(design and development)} web .

ColorZilla funge anche da analizzatore di colori e editor di gradienti ^{(gradient editor)}CSS in modo da poter convertire un'immagine in CSS .

6. WhatFont

 Questa estensione di Chrome^{(Chrome Extension)} è un vero risparmio di tempo per coloro che desiderano utilizzare i loro caratteri preferiti e incorporarli nel proprio progetto di web design^{(web design project)} .

L'estensione WhatFont Chrome^{(WhatFont Chrome extension)} consente agli sviluppatori di analizzare e identificare rapidamente quasi tutti i caratteri su qualsiasi pagina Web.

L'estensione è ben sviluppata e invece di dover aprire strumenti di ispezione, l'estensione funziona semplicemente spostando il mouse sul carattere.

Non solo, ma l'estensione identificherà anche il servizio utilizzato per servire un font di Pages go e supporterà ^(Pages)Google Font API e Typekit.^{(Google Font API and Typekit.)}

7. Colpo di luce

LightShot è uno strumento rapido di screenshot^{(screenshot tool)} che ti consente di catturare l'intera o parte di qualsiasi pagina e caricarla o scaricarla o inviarla a una destinazione^{(party destination)} di terze parti .

Gli screenshot presi da LightShot possono essere utilizzati e condivisi sui social media o stampati.

Puoi annotare e aggiungere testo, frecce e altro alla parte selezionata dello schermo. Ma forse una delle caratteristiche più brillanti di questo semplice strumento per i web designer è che selezionando un'immagine puoi quindi procedere a una ricerca completa di immagini su Google^{(Google image)} online per immagini simili.

LightShot può essere configurato in più lingue.

L'estensione è scritta in puro JavaScript e funzionerà anche per Windows , Chromebook , Linux e Mac OS^{(Linux and Mac OS)} . È anche accessibile come applicazione desktop,^{(desktop application)} rendendola una scelta eccellente per i web designer che dipendono da più dispositivi.

8. Schermata impressionante

Come Lightshot , Awesome Screenshot è un'estensione per l'acquisizione di schermate e immagini.

Differisce da Lightshot , tuttavia, in diversi modi. Awesome Screenshot può essere configurato per connettere tutti i tuoi screenshot con il tuo Google Drive .

Ti consente di catturare gli elementi che sono oltre la tua vista per catturare l'intera pagina. Ha strumenti di modifica e annotazione^{(editing and annotation tools)} aggiuntivi, la virgola consente il ritaglio e la modifica delle immagini all'interno dell'estensione... o con l'uso di ulteriori applicazioni Awesome Screenshot

Puoi estendere le sue funzionalità installando anche l' applicazione Chrome^{(Chrome application)} per desktop. L'estensione consente anche l'acquisizione e la condivisione di video in modo da poter collaborare con altri sviluppatori o designer quando si lavora su qualsiasi sito.

Puoi aggiungere immagini aggiuntive a uno screenshot, nonché elementi blu o cancellare elementi^{(blue or erase elements)} che preferiresti non mostrare ad altri.

9. Cancella cache

L'estensione per Chrome Clear Cache^{(Cache Chrome Extension)} è uno strumento semplice e veloce che ti consente di cancellare i cookie e la cache della pagina che stai guardando. Elimina la necessità di navigare alla pagina delle impostazioni del browser per cancellare alcuni semplici elementi della pagina.

Per i web designer che stanno apportando più modifiche e vogliono visualizzarle in tempo reale, questo è uno strumento eccellente che eliminerà gran parte della frustrazione di guardare i vecchi dati.

A volte è necessario svuotare la cache e cancellare i cookie, ma la navigazione nelle impostazioni di Chrome è noiosa. ^(Chrome)Cancella cache ti consente di cancellare la cache e i cookie globali o locali con un semplice clic.

Cancella cache ti consentirà di configurare quali elementi desideri cancellare dalla pagina. Le variabili^(Variables) includono Cash , download, tutti i sistemi, form-data, at Cash , database index^{(index database)} , dati plug-in, password e altro ancora.

10. Estensione per Google Chrome per sviluppatori Web

L' estensione per Google Chrome per sviluppatori Web^{(Web Developer Google Chrome Extension)} consente a sviluppatori e designer di controllare, analizzare e controllare facilmente le proprie pagine Web per eventuali violazioni della progettazione^{(practice design)} , codifica, usabilità e ottimizzazione dei motori di ricerca delle migliori pratiche.

È un ottimo strumento all-in-one che non è pesante per sfogliare le nostre risorse, ma fornisce un sacco di informazioni utili al web design ed è anche responsabile degli elementi di ottimizzazione dei motori^{(search engine optimization)} di ricerca all'interno di un sito Web o di una pagina.

 L'estensione installa la barra degli strumenti con più strumenti per sviluppatori web.

Lo strumento ti fornirà indicazioni su dimensioni, larghezza e dimensioni della pagina che sono in conflitto con l'utilizzo delle migliori pratiche^{(practice use)} su più dispositivi. Ti consente di controllare JavaScript incorporato e visualizzare il tuo sito Web attraverso una simulazione di vari dispositivi.

L'estensione funziona bene su Windows , Linux e Mac OS. Oltre ai problemi di codifica e progettazione^{(coding and design issues)} , fornirà anche approfondimenti sulle informazioni sui meta tag^{(tag information)} , sulle intestazioni delle risposte, sulle informazioni sul colore^{(color information)} e sulle informazioni topografiche.

Puoi rivedere le caratteristiche principali dello strumento e le sue funzionalità complete sul sito Web dello sviluppatore Chris Pedericks^{(Chris Pedericks’ website)} .

Senza dubbio ci sono una miriade di altre estensioni di Chrome utili e di alta qualità che potrebbero essere utilizzate da web designer o sviluppatori^{(designer or developer)} .

Questo elenco mostra alcuni degli strumenti più popolari e utili. Hai qualche consiglio per gli strumenti che ritieni siano più utili o superiori a quelli in questo elenco? Facci sapere.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in neеd of some useful tools to speed up, collаborate or audit your web develoрment рrojects, Chrome extension has a multitude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

 This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts  And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

 The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

Related posts

• Gli 8 Best Social Networking Sites per Graphic Designers per mettere in mostra i loro portafogli

• Spotify Web Player: Come Access and Use IT

• 7 Best Tools and Apps per creare il tuo Meme per Free

• Perché vale ancora la pena usare Bing per le tue ricerche sul Web

• 8 strumenti per creare immagini di dimensioni perfette per i siti di social media

• 8 Best YouTube Channels per Photography and Videography Lessons

• 8 subreddits politici per Calm Political Debate

• Il 10 Best Sites per testare la tua velocità di digitazione

• 3 Strumenti di monitoraggio dei prezzi Amazon per desktop o browser

• 10 migliori siti di controllo dei fatti a Fight Misinformation

• 54 migliori alternative a Amazon per Online Shopping

• 120Hz televisori e telefoni sei qui: ne hai bisogno?

• Gestisci i tuoi elenchi di Twitter in Chrome in modo semplice

• Come costruire una presenza sul Web di base se non hai competenze di codifica

• Il 10 Best Sites per guardare Cartoons Online per Free

• Il miglior Calculators Online per risolvere qualsiasi Problem

• I migliori strumenti per insegnarti una lingua

• 8 migliori siti Web per imparare Python Programming

• 6 strumenti di condivisione dello schermo online gratuiti

• Funimation vs Crunchyroll: che è Best per Anime Streaming?