As developers, we use our browsers every day for all sorts of things, from googling, award solutions to our problems on stack overflow, to crumbling time on Reddit. But we also browsers to test and run the applications we’re developing. This is why it’s acute to have the right tools for the right job.

In this post, we’ll be attractive at some of my admired browser extensions to boost productivity as a web developer.

Windows Resizer


This simple yet effective extension does absolutely what the name suggests. It allows you to change the size of your screen. It’s simple but acutely useful if you need to validate your website among altered resolutions and viewports. The addendum 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.



Did you ever wonder which technologies are being used by a accurate site? Wonder no more with Wappalyzer. This addendum 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, business tools, acquittal processors, CRM, CDN, and others.

Web Developer


Don’t let appearances fool you, this may not be the most admirable toolbar ever but it’s absolutely powerful. This addendum adds a toolbar to your browser with options for many useful web development functions such us activating/de-activating scripts, popups, functions to ascendancy accolade or to look up for methods to build forms, images, styles, etc.

I alone don’t use the addendum anymore but it has been very useful in the past when I was still very alien with many of the HTML & CSS ways.

What Font


This addendum allows you to easily audit which fonts and font backdrop that are being activated to any text on a website. Fonts can make a huge aberration when it comes to the design of your site, and you can use this tool to make sure they’re all as they should be, or conceivably to even get advice about a font a accurate website is using so you can also use it on yours.



Similarly to What Font, the ColorZilla addendum allows you to get the color of any pixel on the website. But additionally comes with handy tools such as a palette browser and acclivity generator.

It’s a super absorbing tool to have handy.



Disclaimer: This is a tool I don’t consistently use. While it’s not widely used, and has a almost low rating, it has been abundantly recommended on cheep in the past.

This addendum changes the CSS of all your elements so you can very visually see where are each aspect boundaries. This can be acute when debugging CSS layout issues.

You don’t need an addendum for this, it can easily be accomplished with some CSS, so if you don’t want to use this addendum (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. Why not rely on a little extra help when developing?

This article was originally appear on Live Code Stream by Juan Cruz Martinez (twitter: @bajcmartinez), architect and administrator of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.

Read next: Google Photos' new AI-powered editor will retouch your images for you