Best chrome extensions for web developers and designers
Tags: chrome, webdev, chromeextension, webdesign
Published: 2018-11-13 11:15:56

---
title: Best chrome extensions for web developers and designers
published: true
tags: chrome, web development, chrome extension, web design
canonical_url: http://bleedbytes.in/best-chrome-extension-web-development/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xcw08l3l11aa800qeuu0.png
---

 ![Story 288203648](https://www.specificfeeds.com/rssubscribers/rss_show_story_count/288203648/661696 "Story 288203648") 

Chrome extensions are very useful for both the developers and designers, some of these extensions enhance the abilities of developer tools, some replicate the features in developer tools. Every extension in the chrome marketplace are valuable in certain scenarios but instaling all of them is not a wise thing. Among many extensions, there are extensions available for web developers and web designers. Few worthy extensions are listed in this article to help out the new developers and designers.

![web develpment image](https://i2.wp.com/bleedbytes.in/wp-content/uploads/2018/11/web-1935737_1920.png?w=696&ssl=1)<figcaption><i>Source Pixabay</i></figcaption>

## Responsive Web Design Tester

[Responsive Web Design Tester](https://kutt.it/ResponsiveWebDesignTester) chrome extension helps developers and designers to ensure that the website is responsive or not. There are many virtual resolution devices available for testing. Screen sizes available at default installation are 320,  480, 640, 768, 1024, 1280. Custom devices can also be added to the list.

Even iPhone, iPad screen sizes were also available for testing.

## WhatRuns

[Whatruns](https://kutt.it/WhatRuns) chrome extension helps to discover the technology stacks implemented in a site. With a single click it identifies the types of front-end frameworks, types of marketing strategies, Content Delivery Network (CDN), Content Management System (CMS),  are identified.

No signup required and it is completely free.

## ColorZilla

![color palette image](https://i1.wp.com/bleedbytes.in/wp-content/uploads/2018/11/color-1065389_1280.png?w=696&ssl=1)<figcaption><em>Source Pixabay</em></figcaption>

[ColorZilla](https://kutt.it/ColorZilla) is an advanced and most popular color picker and eye dropper tool for both chrome and firefox. WIth this extension color reading made easy and can able to identify colors in any part of the screen.

The main features of colorzilla are eyedropper, web page color analyzer, palette viewer, advanced gradient generator, color history.

Colorzilla is capable of picking colors from flash objects, pick colors from zoom level.

## UserSnap

![feedback image](https://i1.wp.com/images.pexels.com/photos/263532/pexels-photo-263532.jpeg?resize=696%2C418&ssl=1)<figcaption><i>source pexels</i></figcaption>

[Usersnap](https://kutt.it/UserSnap) lets you capture your screen and allows you to annotate on the captured image. Usersnap is helpful while collecting user feedback, tracking bug reports, providing feedbacks on web application prototypes.

Usersnap automatically adds a browser version, OS and screen resolution on the taken image.

![ruler image](https://images.unsplash.com/photo-1529651795107-e5a141e34843?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eaae5772ad6214fd794de568f7bd1f82&auto=format&fit=crop&w=750&q=80)<figcaption><i>source unsplash</i></figcaption>

## PageRuler

[Pageruler](https://kutt.it/PageRuler) is used to get the dimensions of an element, its position in a webpage. Measurements are in the form of pixels. To get the measurement, simply we have to draw in the page and it displays the height, width.

Shows top, bottom, height, width, left and right position. Can able to resize and move with arrow keys.

## Dimensions

[Dimensions](https://kutt.it/Dimensions) is a tool for designers to measure screen dimensions. Measuring happens in a vertical and horizontal way that is from mouse pointers up/down and left/right.

Dimensions work perfectly for elements like input-fields, buttons, videos, text icons, gifs but it doesn’t suit for measuring images.

## WhatFont

[Whatfont](https://kutt.it/WhatFont) helps to lookup the fonts used in a webpage. It identifies the font family of a text by just hovering to the font. It also detects the services from where the fonts are served like Typekit and Google font API.

## PerfectPixel

[PixelPerfect](https://kutt.it/PerfectPixel) is for designers, with the help of this extension one can design a pixel perfect design with perfect accuracy. This extension allows users to put a semi-transparent overlay to compare their design and outcome. 

PerfectPixel supports multiple overlays on a single page, overlays are saved in browser sessions so each page can have different overlays.

 
The post [Best chrome extensions for web developers and designers](http://bleedbytes.in/best-chrome-extension-web-development/) appeared first on [BLEEDBYTES](http://bleedbytes.in).

### Related posts:

1. [Google just launched a new TLD for app developers](http://bleedbytes.in/google-just-launched-a-new-tld-for-app-developers/ "Google just launched a new TLD for app developers")
2. [Best CSS frameworks – 2018](http://bleedbytes.in/best-css-frameworks/ "Best CSS frameworks – 2018")
3. [Signs You’ve Got Yourself A Good Web Application Company](http://bleedbytes.in/signs-youve-got-yourself-a-good-web-application-company/ "Signs You’ve Got Yourself A Good Web Application Company")