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.
Contents
1Responsive Web Design Tester
Responsive Web Design Tester 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.
2WhatRuns
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.
3ColorZilla
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.
4UserSnap
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.
5PageRuler
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.
6Dimensions
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.
7WhatFont
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.
8PerfectPixel
PixelPerfect 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.
Really great suggestions and video! Thank you.
Is there an extension while you are viewing youtube comments from the comments section area, the youtube post is still playing by the side of Chrome browser instead of the very top?
Thank you for your help in advance.