Must-have Chrome extensions for Web Developers

As a Web developer, we always look forward to building the best web applications. But things do not always go well with developers. Users nowadays ask for better UI, better UX. An inappropriate color for a link or a wrong position of an image on a website could become annoying to users and they would not want to visit that website ever again. In this post, I want to list several tools or Chrome extensions which can ease the Web Developer's job and give them more time to do other things. The reason I choose Chrome is because it is my favorite browser. I love its supports for standard CSS and HTML properties, and its ability to update automatically. In addition, the amount of extension for Web Developer is amazing and it helps me a lot when building a web page.

ColorZilla

This extension allows us to quickly inspect color of any HTML element visible to users. This is extremely helpful in case you want to copy a specific color from another website or from an image without using photoshop or other tools. No wonder why you should install this if you are a Web developer.
Link: http://www.colorzilla.com/

Page Ruler

Have you ever received words from a client saying that our HTML web page does not look like the PSD file? Even though pixel-perfect is impossible today because of cross-browser incompatibility, it is still important to follow at least as close as possible to the design provided by the client. I always use this extension to measure the distances between components on a web page. I strongly recommend you to install this tool if you have not done so.
Link: https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=vi

WhatFont

Typography plays an important role in delivering the best UI. If you look at some famous websites, they really care about the font of each element. To make it easier for us to check the font name of any HTML element, there is a tool called WhatFont. If you have this tool installed, it will be very easy for you to have a consistent font style and debugging will also become so much easier.
Link: https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=vi

Postman

I can not imagine how hard it would be to test API without this extension. Its UI is really nice and simple to use. I have been searching for an alternative tool but I have never found any better tool. Perhaps it is already good enough for all of us so no one wants to spend time invent another one.
Link: https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

VisualEvent

This extension is a bit hard to use actually. It allows you to inspect an element and view all events attached to it. But because it displays all events, it is very hard to navigate around and debug. Despite that, I find it sometimes very useful to fix hard issues which are difficult to track down.

Link: https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

JSONView

By default, a JSON file is considered as a text file on Chrome and everything will look like a mess when Chrome renders it. This extension's purpose is to display JSON file nicely on Chrome window, which is necessary for you to check the response of an API or other things. This extension is actually a port from the original one in Firefox.
Link: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=vi

Is it enough?

The list above is in fact enough for me, but in some cases we might have to install additional tools. Many frameworks develop their own extension to help developers debug easily, for example, Facebook Pixel Helper or React Developer Tools. Also, there may be alternatives for the extensions I listed above, feel free to install and experience them on your own. As long as a tool shows to be helpful, do not hesitate to use it to support your work.

Happy coding!