Chrome Extensions Every Web Developer Must Have
As developers, we use our browsers every day for all sorts of things, from googling, finding solutions to our problems on stack overflow to wasting time on Reddit (yes, I’m one of those), but also to test and run the applications we are developing. it’s here where it’s crucial to have the right tools for the right job.
In this post, we will be covering some of my favorite browser extensions to boost my productivity as a web developer.
This amazing extension does exactly what the name suggests. It allows you to change the size of your screen. Simple but extremely useful if you need to validate your website among different resolutions and viewports. The extension comes with a predefined set of options, but you can modify them to fit your needs, this last option makes it better than simply using the Chrome Developer Tools.
Download link: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Did you ever wonder which technologies are being used by a particular site? Wonder no more with Wappalyzer. This extension is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.
Don’t let appearances fool you, this may not be the most beautiful toolbar ever but it is certainly powerful. This extension adds a toolbar to your browser with options for many useful web development functions such us activating/de-activating scripts, popups. Functions to control cookies or to look up for methods to build forms, images, styles, etc.
I personally don’t use the extension anymore but has been very useful in the past when I was still not very familiar with many of the HTML & CSS ways.
Download link: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
This extension allows you to easily inspect which fonts and font properties are being applied to any text on a website. Fonts can make a huge difference when it comes to the design of your site, and you can use this tool to make sure they are all as they should be, or perhaps to even get information about a font a particular website is using that you can also use it on yours.
Similarly to What Font, the ColorZilla extension allows you to get the color of any pixel on the website. But additionally comes in with handy tools as a palette browser and gradient generator.
It’s a super interesting tool to have handy.
Disclaimer: This is a tool that I don’t use, nor I intend to use. It is not widely used and rating is not great, however, it has been greatly recommended on twitter in the past.
This extension changes the CSS of all your elements so that you can very visually see where are each element boundaries. This can be crucial when debugging CSS layout issues.
You don’t need an extension for this, it can easily be achieved with some CSS, so if you don’t want to use this extension (as myself), check out my article CSS Tricks for Validating Layouts
Extensions can make our lives easier, as is the case with the ones I listed today. If you know any other tools that can help developers boost their productivity please leave a comment and I can incorporate them in the article.
Thanks for reading!