15 useful Chrome extensions for web designers and developers


15 useful Chrome extensions for web designers and developers

When it comes to website design and development, the final project cannot be successful without full testing on as many devices, browsers and operating systems as possible.

Leading modern browsers such as Google Chrome, Opera, Mozilla Firefox and Safari are just a few of the most important browsers on which to test projects.

Today we are going to tell you about the most useful plugins and extensions for the Google Chrome browser that will be useful for web designers and developers.

Firebug lite

Firebug Lite is a “simplified” version of the bug tracker of the same name, which is used in the Firefox browser.
Screen Shot 2015-02-26 at 11.19.01


The number of fonts available today amazes any designer’s imagination. WhatFont will allow you to find out the font used on the site in one click.

There is a similar extension for Safari called FontFaceNinja.
Screen Shot 2015-02-26 at 11.19.10


Every designer wants his pixel-perfect layout to look perfect after layout. Therefore, an indispensable tool for a developer is MeasureIt, which will allow pixel by pixel to create a layout by measuring all the margins on the site.
Screen Shot 2015-02-26 at 11.19.17

Web Developer

The Web Developer extension adds functionality to the browser that allows testing for browsers in various conditions: displaying banners is disabled, cookies are disabled, and much more.
Screen Shot 2015-02-26 at 11.19.24

Resolution Test

Resolution Test allows testing site layout at different resolutions.
Screen Shot 2015-02-26 at 11.19.30


ColorPicker is a great tool to “copy” the color you like from the site in RGB format and immediately use it in the layout.
Screen Shot 2015-02-26 at 11.19.36

BuiltWith Technology Profiler

BuiltWith Technology Profiler will allow you to check the “relevance” of the technologies used on the website page.
Screen Shot 2015-02-26 at 11.19.42


CSS Shack allows you to add your own CSS parameters directly to the code and immediately display the changes on the page in the browser window.
Screen Shot 2015-02-26 at 11.19.48


Codev.it is the best extension for editing code directly in the browser.
Screen Shot 2015-02-26 at 11.19.53

PageSpeed ​​Insights

PageSpeed ​​Insights, as the name suggests, measures page load speed for users from different countries. Useful when your audience is not concentrated in one country, but on several continents at once.
Screen Shot 2015-02-26 at 11.20.54


It’s easy to open the console in a browser, but it’s usually problematic to select the desired element, find out its ID and view all its parameters in CSS. CSSViewer can easily solve this problem by displaying only the necessary information for the element that the mouse is hovering over.
Screen Shot 2015-02-26 at 11.21.03

PageRAnk Status

PageRAnk Status will allow you to get all the available information regarding a site’s SEO: key indicators, positions in search engines, search engine rankings and the number of incoming links.
Screen Shot 2015-02-26 at 11.21.17

Subtle Patterns Preview

Subtle Patterns Preview will allow you to add any pattern from the suggested gallery to your site as a background image. The pattern is added only in the “preview” mode, i.e. just to understand the appearance of the site with changes.

Pixlr Editor

Pixlr Editor is a mini-photoshop for the browser: it allows you to perform minimal actions with pictures, such as rotating, cutting, color correction.
Screen Shot 2015-02-26 at 11.21.23

Source: twelveskip

Leave a Reply