4 Browser Extensions to Improve Your Productivity

#tooling #productivity

In this article I will talk about some of the extensions I use to improve my productivity when developing web applications.

1 - VisBug

This extension helps debug your UI. I bet you've been lost or confused several times trying to understand the composition of some visual elements of your application.

One of the tools I use most in VisBug is inspect, with which you can see the names of CSS classes and their properties in a quick and visual way.

However, we have a huge range of tools that help us make small visual adjustments in our application, to which we can make the respective changes in our code. Some of the things we can do with this extension is change margins, paddings, colors, placements, Flexbox, among others.

2 - Pesticide

By using this extension the element will have an outline to show their boundaries so you can observe their behavior. I love using this extension to check that layouts are the way I intended, or that elements are visually aligned correctly.

I think this extension is the one that helps you find any problems you may have in a more immediate way, because the outlines only appear with one click.

3 - Window Resizer

With this extension you have access to a large number of presets that are nothing less than window resolutions, this way you can test the responsiveness of your applications with a large number of screen resolutions available.

In the same way you can have multiple windows open to check different resolutions at the same time.

4 - axe DevTools

This extension is in my opinion the best extension to check the accessibility of your website. Basically through the extension do a scan and then it gives you instructions of the things you need to pay attention to in order to improve.

One of the points that I find incredible is that it gives you a brief description of the problem and then presents a possible solution to it. The same way we can focus the element that we have to improve, it can also take us directly to the browser's devtools inspector.

Conclusion

I hope these extensions will bring you an improvement in your day-to-day productivity. If you have any other suggestions, please mention them in the comments so I can try them out too!