8 Great Developer Extensions ⚙️ for Your Browser 🧑‍💻
Tags: webdev, beginners, javascript, tutorial
Published: 2021-08-27 16:44:55

<h1>Introduction</h1>
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

<h1>1. <a href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp">ColorZilla</a></h1>

> 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.

<strong>a)</strong> Click `Pick Color From Page`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeh3q558pbhojnow3567.jpg)

<strong>b)</strong> We point the `pipette` at the `desired area` and `click`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhamkwks8dn690nekz3e.jpg)

<strong>c)</strong> Open the `Color Picker`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lt72dybh95vqv1nunb8.jpg)

<h1>2. <a href="https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en">PerfectPixel</a></h1>

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46386j3kiqf9iefaht44.jpg)

<h1>3. <a href="https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en">Window Resizer</a></h1>

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvzdgfcg9e8pu3q1d309.jpg)

<h1>4. <a href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en">Wappalyzer</a></h1>

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8m9zk69ss7jyyr003z1.jpg)

<h1>5. <a href="https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en">FireShot</a></h1>

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7r6dlc7hq2yzgt1qd35.png)

<h1>6. <a href="https://chrome.google.com/webstore/detail/pinterest-save-button/gpdjojdkbbmdfjfahjcgigfpmkopogic?hl=en">Pinterest Save Button</a></h1>

> 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.

<strong>a)</strong> Choosing the image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2ybfbdj97i3fbvd94pz.jpg)


<strong>b)</strong> Save
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4cjuseoxefz13azof7h.jpg)

<h1>7. <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en">Vue.js devtools</a></h1>

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppzv5pulvxe2bo79hnoa.jpg)

<h1>8. <a href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en">JSON Formatter</a></h1>

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkhr3fuuix8vckq5x2xr.jpg)

<h1>The End</h1>
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.

<strong>Transform your browsers<strong>
![Alt Text](https://media.giphy.com/media/R9zXHWAHyTjnq/giphy.gif?cid=ecf05e471wxmdw8bmsl5ci988ji3ahyck34ar7pvcrnn27ut&rid=giphy.gif&ct=g)