Top 5 Chrome Extensions Every UX Engineer Needs

4 min readFeb 17, 2021

As a UX Designer and Engineer, I’m constantly looking for ways to make my workflows more efficient, and that includes using Chrome extensions.

Here’s a list of the top 5 Chrome extensions you need in your life if you are a UX Designer or Engineer.

CSS Peeper 🎨

CSS Peeper is probably my favorite Chrome extension! It’s beautiful and beyond practical when looking for inspiration around the web. This extension breaks down all of a website’s style details including font families, sizes, colors, object spacing, class names, and even any assets including images you might find on a website.

I love to use this when I’m feeling inspired by a certain website and find a font or color that I’m particularly drawn to.

Go FullPage — Full Page Screen Capture 📸

As a UX Engineer or Designer you’re often finding yourself taking screenshots of your work or of inspo around the web. Once I’m in the coding phase of a project, I like using the Go FullPage Chrome extension to snap a screenshot of my current local build so I can share it to get quick feedback with others or even just to track the visual progress of a project.

Screenshot of GoFullPage Chrome extension capturing an image — GoFullPage: Screen capture in progress window as it scrolls down the entire website page

Example website image captured by GoFullPage Chrome extension — GoFullPage: Website screenshot example

What’s nice about this extension is that it auto-scrolls the page for you, so you don’t ever have to stitch together screenshots.

Octotree — GitHub code tree 🗂️

Octotree is an awesome Chrome extension when you’re browsing projects in Github. It allows you to explore the project tree / content easily without having to click into specific folders.

Example of browsing a project with a folder structure in Github using the Octotree Chrome extension — Octotree: Browsing Github repo using visual folder structure feature

Octotree works great if you know exactly what you’re looking for and even helps you better understand how a project / app may be laid out by displaying it this visual way we’re used to.

Web Developer ⚙️

The Web Developer Chrome extension comes with many many features to debug and optimize your web projects.

I love using it to highlight images that don’t have alt attributes so that I can properly optimize my websites for accessibility. You can even pull out CSS code or disable it entirely to explore sites in bare-bone format. You can also quickly resize your browser window and save yourself some clicks when testing your designs for responsiveness.

There is much more to explore with this extension so make sure to check it out! I’m sure you’ll find some useful tools.

Angular Inspector 🔍

The Angular Inspector Chrome extension allows you to see what tools and frameworks websites are using. It’s not just for Angular (the well-known JavaScript platform), as it also identifies WordPress, React, and others. It’s fun to see what tools or versions other websites are using.

Bonus: Pocket 💾

My favorite overall Chrome extension is Pocket! I love using it to save inspiration that I find around the web, or keeping project links all organized with a custom tag system.

Example of saving a website using the Pocket Chrome extension and adding a tag — Pocket: Saving a website and adding tags

Pocket is insanely practical with recipes pages and it filters out all of the ads and fluff to give you just what you need!

Summary

I hope you enjoyed this list of my favorite Chrome extension that I use on a regular basis. Chrome extensions are super useful and can help make your workflows more efficient.

What’s your favorite Chrome extension? What are some must-haves for UX design and engineering work? Let me know what I missed!