Many web designers and developers have long been using browsers such as Firefox. It’s very awesome browser with many cutting edge web technologies. But there is just something about Google Chrome that everyone likes – it’s lightweight, fast and on top of that, extendable like no other.
The whole process of adding new extensions is fun and takes a second with no need to restart. Furthermore, it has so many extensions for almost every single task that one may ask – which ones should I install? There is no correct answer when choosing few extensions out of thousands, but I assure you that most of not all of them below are a must-have for any designer and developer out there.
1. Firebug Lite
If you own your own website and you want to incorporate something from another website, you might not know the code that needs to be included in your site to incorporate those features. All you have to do is to go to inspect element and highlight over certain pieces of code to see what belongs to that line of code. It is really helpful and a lot more easier than having to actually view the page’s source code.
The official port of the Web Developer extension for Firefox. Developed by Chris Pederick, this is one of the must-have extensions for any developer out there.
Stylebot is nothing like Firebug and Web Developer extensions. It allows you to quickly manipulate the appearance of any website to personalize the look and feel. It is also a great tool to learn CSS and for debugging your own site’s design.
Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.
5. Eye Dropper
A very useful extension for those who often browse websites for inspiration and like to incorporate some colors in their own design. Picked color history is also available
Resolution Switcher allows you to resize the browser window to customizable presets or modify the current window size. Very useful when web designers and developers design responsive layouts, and want to know the current resolution in order to precisely adjust at what resolution an element will be visible or hidden. Allows you to adjust the browser’s outer or inner width and height, taking scrollbars into account.
One of the most commonly installed extensions for developers to test web pages in different screen resolutions, with an option to define your own resolutions.
This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. Also, the resolutions list is completely customizable.
Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox.
Alexa toolbar shows the PR and Alexa rank for every website visited right on the button itself. It is simple, fast, lightweight, and on top of that you get an increased Alexa rank.
The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.
Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info with just a couple of clicks.
Screen Capture is easy to use extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image.
14. Smooth Scroll
As you may already know, by default, Google Chrome has a choppy scrolling. This is probably the most popular smooth scroll extension and it even features few profiles that mimic the same scrolling effect you would see in IE9 or Opera.
Some of you might prefer to inspect elements with Firebug or Webkit inspector but using WhatFont is a lot easier – you can inspect web fonts by just hovering on them. It is that simple and elegant.
Ever been tired to see ads floating everywhere you look? This is where AdBlock comes in. The most popular Chrome Extension that blocks ads all over the web.
Allows you to quickly draw out a ruler that will help you get the pixel width and height of any elements on a webpage.
Developed by the Google Images team, this handy extension allows you to initiate a Google search to find images that are visually similar by using any image on the web.
The ultimate extension for developers who make web applications and want to identify performance problems in combination with many metrics.
20. PageRank Status
Shows Google PageRank and AlexaRank of current web page, allows for quick access to Geo IP Location, Whois, Alexa, backlinks and indexed pages.
A random dummy text generator that helps designers quickly add placeholder text to mockups.
22. Edit This Cookie
Inspired by the lack of a good cookie manager in Google Chrome, Francesco Capano developed a simple and extremely useful extension that let’s you perform anything you might actually need to do with cookies.
23. Proxy Switchy!
An advanced proxy manager extension that allows users to quickly and securely switch between multiple proxy profiles.
24. SEO Site Tools
Probably the most comprehensive SEO Tool you’ll find on Chrome. Shows a ton of metircs from many sources. Use it to research your competitors and improve your website’s search optimization.
Extended web developer tools for Chrome that includes a wide array of features, including View Page Source, Color Picker, Display Ruler, Disable CSS and of course quickly validating CSS and HTML.