Web Designing is not an easy task. Saving every minute and minimizing every task can be very helpful in our life. 

There are some small and tidies tasks which we as web designers hate to do. (Frankly, I also did hate them till I found these Free chrome extensions)

How to find that fonts which your competitors are using?

How to find that exact colour code used in that amazing site?

How can you analyze the website of your competitors or reference site? Which technology or plugins they are using?

As I remember, I used to take a screenshot of the font I want to identify then upload them in the WhattheFont and Fontsqurrel(a site where you can identify fonts from images.)

As for the colour, I used to take a screenshot and view them in Photoshop and find colour with Color Picker.

You can imagine how tidies these small tasks can be if I have a long list of sites as reference. Which is very common to have though. 

So, after years of designing, I met many experts and watched like a hell lot of videos. I found that they use some tools to do these menial and small boring tasks. Those tools were chrome extensions. 

They used both paid and FREE. But, we are going to talk about the FREE ones today. I am sharing this in the hope to help fellow designers to make their life little easier. 

Let’s check them out one by one.

1. Web Developer- Developer Tool Extension

This is a very handy tool if you want to do some pricks. Such as testing your website CSS and JS. Chrome’s Dev tool is good but not this handy.

This tools will add one toolbar at the top which contains many functions such as disable JS, Disable CSS, Disable Popups and many more other things which can help you.

There is also inbuilt color picker, Ruler, Clear Cache and many more. There is also one functions which I use for SEO which are Display Image Alt Attributes and Outline Images with Empty Alt Attributes.

In short words, this is all in one solution for all the web designers to save time.

2. WhatFont

Remember the question at the start of this article. 

How to find that fonts which your competitors are using?

This tool does exactly that. You just have to install the extension visit the website you want to find fonts of and click on the extension icon to turn on the extension. Yes, it’s that easy. 

This is a very popular and most used extension in the web designers community. 

Another great thing with this tool is you also get the Font size, weight and color of that font. Try it if you haven’t.

3. Color Picker

This one is for the most basic task. Get the color code of anything on your browser screen. You can definitely get the color code of any element with the Chrome Dev tool but if you have done that you will know how hard and time consuming the task is. 

This one tool solves that problem exactly. What else? Do you know this tool is not just for the web designer or devs? But, a graphic designer can also use this tool. 

There are more advanced features available you can try them out as per your need and use.

4. Image Downloader

What else can be the must-have extension from this list? If not Image Downloader. We all download images from the web. Not just web designers but all. 

But, sometimes it’s really hard to find a way to download that image you want. The easiest way is to right-click on the image then open in the new tab go there and then save the image. 

But, what if you can see all the images of the web page in just one click and download it with the second click? Just 2 clicks. 

Nothing can be this easier right? Yes. Then try this out today. Btw, this tool also works on the sites which have disabled the Right Click to save the content stealing.

5. Stylebot

As Web Designer the most thing we work on is CSS. Sometimes we might want to check how increased font size on our current website will look like?

We might want to solve a particular element on the website with CSS. If you are WordPress then you will work on CSS a lot for some minor corrections and editing. 

This extension will let you do that easily. The basic things you can check in the Basic tab. But, if you are a PRO then you can use the <Code> tab where you can easily edit the CSS related to the selected element. 

6. GoFullPage – Screen Capture Extension

Okay. So, taking a full-page screenshot is something every web designer have to take. But, there is no in-built function for that. You have to use some tools.

Till now I have tried many tools for this. There are some which also let you take the full screen and small visible only screenshot. But, For visible screenshot, I found Snipping Tool to be more efficient and easy to use.

The unique thing about this is You can download your screenshot in PDF format which is something I didn’t see in other tools. There is also an editor which let you do some highlighting and add some elements in your screenshot. Try it you will know all the features then.

7. Lorem Ipsum – Text Generator Extension

Yes, there is an extension that can help you create this demo text for your website design.

Sometimes, we might not have the exact content for the website we are designing. But, the text is needed to create the perfect design and make it looks complete and more appealing than just empty spaces. 

This is very easy to use tool which let you create the text based on paragraphs and sentences. Other than using tricky websites to create the text this tool is very easy to use and for use time-saving.

8. Window Resizer for Developer

This is one the must-have tool. I know Chrome Dev also have this feature where you can resize the tab and see how your website looks in all the devices and screens. 

But, that sometimes create glitches and not very user friendly. If you want to present it to someone then that is not a very good way cause most of the screen gets occupied by the other elements of Dev tools. 

You can also pop-out the screen and resize it for a better view. Try it and you will see what else it can do for you.

9. Wappalyzer

How can you analyze the website of your competitors or reference site? Which technology or plugins they are using?

Sometimes, we as a web designer also have to know that the site which we have as a reference or inspiration is using what technology or which framework is used to create that site. 

Wappalyzer is an opensource tool which uncovers the technologies used on a specific website. There is a site like BuiltWith and others which can do this for you but that is a little lengthy process.

This tool can identify web services, CMS, databases, server software, analytics tools, content management, eCommerce platforms, WordPress plugins, widgets, JavaScript frameworks, and so on. 

10. Check My Links

This tool I found from an SEO guy. They were using it to find a broken link on the web page for link building. I thought this is really good tools for Web Devs too. 

This tools highlight all the working link with Green color and broken links with red color which is very easy to distinguish.

After developing the site we might want to do a simple check that all the link and buttons working perfectly and no one leads to a broken link or 404 pages. Now, clicking each and every click is not feasible okay. This is the best and simplest solution.

Finally,

I know there are a lot more chrome extensions than these 10 which can help a web designer. But, These are the most used and basic totally FREE chrome extensions which can be used by anyone to save their time.

I hope you found at least one useful chrome extension from this list here. If you didn’t let me know in the comments. If you think there is any other extension which should be on this list then also let me know in the comments I will add them as per your request. 

Start using these Free extensions to make your web design process more convenient and less boring.