DEV Community

Cover image for 8 Great Developer Extensions āš™ļø for Your Browser šŸ§‘ā€šŸ’»
Roden
Roden

Posted on

8 Great Developer Extensions āš™ļø for Your Browser šŸ§‘ā€šŸ’»

Introduction

Today I would like to talk about browser plugins that help make the life of a web developer easier.

In this post, I decided to give an example of 8 plugins that I often use while working or if I surf in the browser.

So let's get started

1. ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

This is a great plugin that will help you determine the code of any color on any pixel that you have pointed at with a special pipette. This works with both websites and images. If you can't point the eyedropper at the image, because the image begins to disappear, then open the image in a separate window.

a) Click Pick Color From Page
Alt Text

b) We point the pipette at the desired area and click
Alt Text

c) Open the Color Picker
Alt Text

2. PerfectPixel

PerfectPixel allows developers and markup designers put a semi-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison between them.

Alt Text

3. Window Resizer

This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

Alt Text

4. Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

Alt Text

5. FireShot

Take FULL webpage screenshots. Capture, edit and save them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote, clipboard or email.

Alt Text

6. Pinterest Save Button

Save your favorite ideas online so you can easily get back to them later.

With this plugin, you can add any images you like from any to yours collections to your Pinterest account.

When you hover over the image, you will see a red button in the upper right corner with which you can select the Pinterest collection to which you want to save the image.

a) Choosing the image
Alt Text

b) Save
Alt Text

7. Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

An amazing plugin that simplifies your work in the browser. Allows you to see your component tree, as well as the data of the components themselves. I believe that this plugin is necessary for any Vue developer.

Alt Text

8. JSON Formatter

A very convenient plugin that makes JSON files more readable, and also makes links clickable.

Alt Text

The End

Thank you for devoting your time to my post. You can also recommend plugins that you use. Or suggest a better alternative to the plugins that are presented in the post.

Transform your browsers
Alt Text

Latest comments (12)

Collapse
 
ngamsomset profile image
Brian Ngamsom

Window Resizer! Why I don't know this!! thanks!

Collapse
 
jayjosh20 profile image
SirJosh

Would need to try all this.. Thumbs up

Collapse
 
stuffsuggested profile image
niksin
Collapse
 
sangpham2710 profile image
sangpham2710

The last one is really great

Collapse
 
kerthin profile image
Roden

I completely agree with you. It greatly simplifies the interaction with the file and improves its readability.

Collapse
 
fradar profile image
FRADAR

Hey Roden!
This is an amazing blog! I really enjoyed reading it, and I really liked all the extensions.
There is one extension that is very useful but is not mentioned in this. It's called "Githunt".

Githunt is useful if you spend a lot of time on GitHub looking for new projects to do work on. I personally use it a lot. Rather than depending on GitHubā€™s trending projects feed, this Chrome developer extension brings it to the fore by highlighting all trending projects in a new tab area in your browser.

You can search projects in different languages, read a brief project description and the number of current open issues. You can then just select the project within the tab to go to the project and inspect further in.

Here is the link for it: chrome.google.com/webstore/detail/...

Thanks, and keep up the good work!

Collapse
 
kerthin profile image
Roden

Thank you for telling us about this extension. I didn't know about it before, but I think it's very useful, because usually a lot of interesting GitHub projects pass me by. It is definitely worth installing this extension.

Collapse
 
kerthin profile image
Roden

Thank you for advice. A really useful extension.

Collapse
 
cleveroscar profile image
Oscar Ortiz

Thanks for these useful plugins bud! Much appreciated!

Collapse
 
yusufadel profile image
YusufAdel

Thank you for sharing

Collapse
 
imiahazel profile image
Imia Hazel

I like the end.

Collapse
 
socr102 profile image
Eric

Great
Thank you for your post
I will use them in the future