Web development is a fun but difficult job. We, web developers enjoy creating a new website and awesome functionalities for different websites. But the best thing you experience is when you get to use some web development tools that can speed up your process by a huge margin. As a web developer, you may be using your favorite code editor with your favorite set of extensions/plugins for it. But there are some extensions for Chrome that can help you a lot in your development process.
Google Chrome is one of the most widely used browsers by most web developers. The Dev Tools in Chrome is one of the best. You can get a lot of data about a webpage using it. In this article, I will introduce you to some awesome extensions in Chrome that can improve your experience.
So, let’s get started.
JSON Formatter
APIs are taking over the world now. There are APIs for almost everything you could think of. All the popular web services offer APIs for us to make use of them and create something unique.
Most of the APIs return the result in JSON format. So, if you are not using a JSON Formatter on your Chrome browser, it would be a nightmare for you to dig through the data to find what you want, especially if the result is long.
JSON Formatter helps you by formatting the JSON in a tree format that it becomes a piece of cake to learn how the data is structured and also find the right key.
You can download it from link.
WhatFont
Have you ever stumbled upon a website and liked a font and wondered what the name of the font was? You could find it out in the Chrome Dev Tools.
But WhatFont will make it seamless for you. Once you add it to Chrome. Whenever you want to know the font name, just click on the WhatFont icon and hover over the text. If you click, you get a lot more details like the font-weight, font-size and more.
You can download it from link.
Designers Ruler
This is a simple on-screen ruler using which designers can measure the size of anything on the website. Once you add it to Chrome. It has draggable rulers which can be placed horizontally or vertically. There are different types of rulers.
One of the best features is the resizable ruler. Using it you can select the area by resizing the ruler and you get a lot of information on the top of the screen. It is a really handy tool for you if you are a web designer.
You can download it from link.
Full Page Screen Capture
This is a tool that can save you a lot of time if you are trying to get a screenshot of a whole webpage. Make use of Full Page Screen Capture which helps you get the screenshot of the current web page from top to bottom. You can then save it as a PDF file or an image file.
This can be very handy for web designers. You can study how the website is designed with just one image.
You can download it from link.
Yet Another Lorem Ipsum Generator
As a developer or web designer, you may have to have some dummy text in your website to check how the end result with the real data will look like and also check whether the (CSS) styles break when the HTML is loaded with data.
Here is Yet Another Lorem Ipsum Generator which after adding to your Chrome gives you the option of generating random titles, paragraphs, dates, email ids, and website URLs. You just have to select the length of the data and it automatically copies it to the clipboard. The only thing you need to do after that is to paste it to your destination.
You can download this Chrome extension from link.
ColorZilla
Another useful Chrome extension is ColorZilla. It is basically a tool which can be used to get the color from any area of the website. Once you add it to Chrome and click on the icon it gives you a color picker using which you can hover over any part of the webpage and get the color in RGB and HEX code.
And the best part is that once you click on the area you want the HEX color code is automatically copied to the clipboard which can be really handy.
You can download it from link.
PerfectPixel
If you are a developer who is strict about your ‘pixel-perfectness’, you should definitely take a look at this extension. This is how the extension works. Just click on the icon. Now open an image file of the web design that you have created. Now the image will be displayed on the current web page. You can adjust the opacity and see the image as well as the webpage.
Now it is just a matter of making some changes in the developer tools and making your webpage pixel perfect.
Download it from here.
Conclusion
I hope you have enjoyed reading this article and have at least learned something new. I have used these Chrome extensions and they have indeed increased my productivity as a web developer. You should too, test them out and see whether they work for you.
If you have some other cool extensions to share, please do so in the comments down below. And if you liked this article, don’t forget to share this with your other developer friends.
Thanks for reading.