Simple Chrome Extensions That Make My Work a Bit Easier
Tags: webdev, css, hhtml, beginners
Published: 2020-11-06 13:57:14

No time for introductions! 

I've been front-end-ing for a while. 

Here are some of the extensions that helped me along the way. 

Links on the title.

Let's go! 🏃‍♀️🏃‍♂️💨

## [Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi)

![Pesticide](https://dev-to-uploads.s3.amazonaws.com/i/lqloqde6l012epn7zct1.png)

Pesticide is great for debugging invisible stuff in CSS. I'm talking margins, padding, and everything that fills some space but you can't quite know where it begins and ends.

The extension couldn't be simpler, really. It works by applying 1px borders to every element on the page, look.

![Pesticide example](https://dev-to-uploads.s3.amazonaws.com/i/qx8d8q7xqk3b5kp32g0z.gif)

---

## [Live CSS Editor](https://chrome.google.com/webstore/detail/live-css-editor/oelggcmknbjmhkpgjfhakedcfnkgbdpg)

![Live CSS Editor](https://dev-to-uploads.s3.amazonaws.com/i/83k3jwnzyh5wdz8zdh36.png)

Live CSS Editor, as the name suggests, allows you to add some CSS to every page through a neat little box. It is great for debugging and testing a small style real quick without opening DevTools.

![Live CSS Editor](https://dev-to-uploads.s3.amazonaws.com/i/siqvk7q6s83u5hg4dm88.gif)

---

## [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)

![PerfectPixel](https://dev-to-uploads.s3.amazonaws.com/i/jmmbx7evxfaxo9mnv0lk.png)

PerfectPixel is particularly practical when you need to perfectly place pixels on your page. 

But seriously, though. There is no better tool for when your implementation needs to look ridiculously close to the layout. 

Just paste a semi-transparent `.jpg` over your screen and tweak your CSS until it matches.

![PerfectPixel example](https://dev-to-uploads.s3.amazonaws.com/i/dg8kspihqo9hsimgcbci.gif)

---

## [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en)

![ColorZilla](https://dev-to-uploads.s3.amazonaws.com/i/9k4i0xc7tyulwofhrh77.png)

Sometimes you just need to pick a color. 

ColorZilla is the best color picker for your color picking needs.

![ColorZilla example](https://dev-to-uploads.s3.amazonaws.com/i/xqx0nekaiz386hxqhz3p.gif)

---

## [TimeShift](https://chrome.google.com/webstore/detail/change-timezone-time-shif/nbofeaabhknfdcpoddmfckpokmncimpj?hl=en)

![TimeShift](https://dev-to-uploads.s3.amazonaws.com/i/5z1d291ujtpwudlc3c5d.png)

If your product needs to support multiple timezones you might know already that working with timezones is a one-way ticket to Frustration Town.

This extension won't solve your problems but it makes the timezone debugging experience *slightly* less sad by allowing you to fake your browser's current timezone.

![TimeShift example](https://dev-to-uploads.s3.amazonaws.com/i/9jby1r2piojndhmyysy1.gif)

---

## [GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en)

![GoFullPage](https://dev-to-uploads.s3.amazonaws.com/i/8u69meggfog9f2lb0jqh.png)

You need to share your progress and you need to share it quickly.

But Chrome, for some unknown reason, doesn't offer you a native way to screenshot the whole page.

This extension fixes that problem.

![GoFullPage example](https://dev-to-uploads.s3.amazonaws.com/i/h4i46ku3wks3vbqkzem8.gif)

---

Thanks for reading! Hope any of these extensions make your work slightly easier.

This week got my super anxious and unproductive so I rushed this article last minute to keep my streak. I need to [practice what I preach, after all](https://dev.to/vtrpldn/i-got-the-16-week-streak-badge-here-s-everything-i-learned-about-consistency-2nna#3-be-ok-with-publishing-imperfect-work).

I also might have drank way too much coffee this morning. 

Anyway! [Follow me on Twitter](https://twitter.com/paladini_dev), leave your suggestions in the comments. Have a good weekend! 😄

Photo by [Toa Heftiba](https://unsplash.com/@heftiba?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) Unsplash