Last Updated on

I use Google Chrome as my main web browser. Why? Because it’s fast, easy to use, reliable, secure, easy to use, highly customizable, and has its own web store. If you’re not using Google Chrome yet, you should highly consider it. At least install it and try to use it for a week or so.

As a web designer or developer, you probably find yourself spending a lot of time in Chrome working. What surprises me most about people who use Chrome, is that they don’t take advantage of extensions. Extensions are basically custom tools that allow you to utilize Chrome to its full potential. For example, you can take screenshots with a click or a button, share websites with friends, control your music, get ranking information about various websites, and much much more.

The Chrome store is packed with extensions that will increase your productivity and improve your overall workflow. So, you might as well utilize the tools that are out there to make your life easier. The best part is they’re all* free!

Check out these 15 Chrome extensions that can help you with your work:


1. FireBug Lite

FireBug is a well-known FireFox add-on that made its way to Chrome. It’s particularly helpful for code debugging. It also allows you to monitor JavaScript, HTML, and CSS live for any webpage.


2. WhatFont

WhatFont allows designers to discover what font is used on a webpage with a simple hover. You could also figure this out by using FireBug and scouring the code, but this extension makes it a lot easier.


3. Chrome Sniffer

Have you ever looked at a website and thought, “How is this even possible?” Chrome Sniffer allows you to find out how. It can tell you the framework of most websites. It can currently detect more than 100 frameworks.


4. Code Cola

Code Cola allows users to edit CSS visually. This means that users can click on an area of a web page and easily manipulate the CSS. This could potentially save designers a lot of time.


5. ColorZilla

ColorZilla includes a color picker, an eyedropper, along with a gradient generator. There are also some more advanced color tools. You can use the color picker to determine the HTML color of any part of a webpage, and you can save that color to a custom palette. Everyone needs a color picker, and ColorZilla is one of the best.


6. Tape

Tape is perfect for designers looking to ensure that their layout is perfect. You can easily determine the size of elements by laying down guides, which snap to the page’s content. You no longer have to take screenshots to determine the dimensions of elements.


7. Resolution Test

Web designers and developers need to try their websites out in different resolutions, but what’s the best way to do this? The Resolution Test extension for Chrome allows users to change the browser window’s size to view their website in different resolutions. You can choose from common screen resolutions or enter a custom one.


8. Speed Tracer

Have you ever been in the situation where your website is loading slowly and you couldn’t figure out why? Speed Tracer can help. Speed Tracer can find problems caused by JavaScript, CSS, timer fires, and more.


9. Lorem Ipsum Generator

Sometimes you need text to fill a page so you can get an idea of what it will look like when it’s filled. Lorem Ipsum Generator allows you to do just that. You can choose how many words you want per paragraph and also how many paragraphs you want. Filling your website with content has never been easier.


10. Internet Explorer Tab

When you are developing or designing, you need to test your website in different browsers, one of which is Internet Explorer. The Internet Explorer Tab allows you to easily view your website in IE through Chrome. That’s one less browser you have to open.


11. Alexa Traffic Rank

As a web developer or designer, you are probably interested in how much traffic other websites get. The Alexa Traffic Rank allows you to see how much traffic any website gets. This can be an interesting statistic to observe. You can even use it on your own website, even though you likely have other ways to determine this.


12. Microstock Photo Power Search Tool

Looking for stock images can be time-consuming and irritating. Microstock Photo Power Search Tool makes this process a lot easier. This extension allows you to search through stock images from the 5 top stock image agencies, like Fotolia and Shutterstock.


13. Palette for Chrome

Palette for Chrome is a fun, useful tool for web designers. You can select any image and create a color palette from that image. You can create palettes with 16, 24, or 32 colors. If you have a favorite image, you can create a color palette from it and use that color palette in the design of your website.


14. TooManyTabs

While developing a website, you may find yourself with tons of browser tabs open. TooManyTabs can help you manage them. This Chrome extension allows you to see a thumbnail of your opened tabs. It’s easy to forget if you have a certain tab open, but TooManyTabs can help you find it just as easily.


15. PlainClothes

PlainClothes allows you to view a website in black and white. This can help you find mistakes in websites or figure out how things work. It’s a helpful tool to use on both your own website and other websites.

Chrome has a lot of extensions for web developers and designers, each offering something unique. The list above contains 15 tools that are useful to most web designers. However, if you have a specific need not satisfied by an extension above, you can peruse Chrome’s Web Store to see if an extension for you exists.

Posted by Igor Ovsyannykov

I'm a digital nomad and entrepreneur bouncing around South East Asia. When I'm not working here, I'm out taking photos for Follow me on Instagram: @igorovsyannykov

Leave a reply

Your email address will not be published. Required fields are marked *