10 best chrome extensions for web designers and devs to try
Being web designer or developer, we come across various resources, apps, extensions, and much more stuff in our day-to-day work that makes our lives easier. In this post, I’m going to list the 10 best chrome extensions That I found useful while doing website projects. And you may also find them useful too. According to Statcounter, the majority of the browser market share of Google Chrome worldwide is about 63.59% in Feb2021. This makes us clear why we will discuss the chrome extensions and not the extensions or addons of any other browser.
There is also a second reason why I’m preferring Google Chrome over other browsers. And the reason is that, while I was a student of web design and development I was told by my instructor to prefer chrome to view the websites that I’m building. And from my experience, I have also realised that Google chrome is best among other browsers when it comes to design and test websites. In your case, it might be a different browser. So now let’s hop into the chrome extensions list without any further delay.
1.ColorZilla:
The right colour combination is very crucial for website success. If the colours of the website are unpleasant then the user will not stay to the website longer and may find another website for their interests. So this indicates the importance of colours. There are literally many chrome extensions for colours. But from all those I have been using a useful chrome extension for years named ColorZilla which has many useful features and the best part is, It’s absolutely free. So let’s talk about what tasks it can do related to colours.
- Eyedropper tool: With the help of this we can pick the colour of any pixel of a website.
- Advanced Color Picker: Just like the Photoshop software has a colour picker in it, ColorZilla also offers an advanced colour picker.
- CSS Gradient Generator: Gradients with the right colour combination changes the look of the website.ColorZilla will help you to generate gradients that you can use for your website. It will generate the CSS or SCSS code according to your requirement. And that code is to be pasted in code files.
- Colour History of recently picked colours.
- And many more for full features you can view here.
2.WhatFont:
Curious about what font a particular website is using? WhatFont will help you with that, just hover the text it will tell you the name of the font. And when you click on a text, WhatFont will give you additional information about the text like style, weight, line-height and colour. Alternatively, We can know the font of a particular HTML element by using chrome developer tools.
This is a very important chrome extension for the developers who are testing the responsiveness of the website or app. It covers various and common screen sizes. Like mobile, tablets, laptops and desktops. One can also detach it from chrome as a pop up for better use.
It is a simple chrome extension to view the CSS property of a particular HTML element. Almost all the CSS Codes of the desired elements are displayed nicely inside a box generated by the extension.
This is the best chrome extension for generating dummy content for demo websites. Just click on it and enter how many paragraphs you need with how many sentences for each paragraph. After entering the details it generates that amount of dummy text, which can be easily copied and pasted on the website.
You can also change the settings which will add paragraph tags to the dummy text. If you want dummy text with a corporate touch then head over to the next extension.
So now you know what it does from the name itself. As the name is Corporate Ipsum, we can understand that it also generates dummy content. But it appears as a corporate website text which is an interesting thing to note. Let’s see another extension on the list.
As the name suggests this chrome extension will check for all the links in a webpage. By all the links I mean valid and broken links. As you can see in the image below, It will highlight the valid link in green colour. Whereas the broken link in red. It is a useful extension for link checking.
When it comes to checklist everybody loves that. Web developer Checklist is another useful chrome developer extension that will check a particular web page in various aspects. Like SEO(Search Engine Optimisation), mobile, usability, accessibility, social media and performance. It checks in all these areas and generates a checklist with green tick marks for satisfying the developer best practices. And red cross marks for the errors. This checklist extension is suitable for busy developers.
9.Lightshot:
This extension is useful to every people not just developers or designers. It helps in taking a screenshot of the webpage. Along with the screenshot, we can do other things as well as we can use the pen option to write or mark something on the screen. Apart from that we can draw lines, rectangular boxes, highlight something or draw arrows of a particular colour. You can see most of that below in the image, okay now let’s see the last extension.
10.Grammerly:
At the end, Grammerly. It is the most useful extension to correct the typos, Grammatical errors and lots more stuff related to writing.It is suitable for designers ,developers as well as bloggers or anyone who is interested in writing the correct english.It has also a tone detector feature which tells the tone of the text whether formal , informal, optimistic, assertive and many other tones and currently this feature is in beta stage.
So I have listed the 10 useful extensions, which I have come across. Tell me in the comments which one you like the most and also you may like and use other extensions as well. So feel free to mention that also. These extensions save a lot of time in the long run as well as in the short run. That’s all for this post. Thanks.
