30% off all official TAB products with the coupon code: TAB-WITH-BLOCKS

Best Browser Extensions for Web Designers

Recently on the podcast I mentioned the browser extension “MeasureIt!” to Matt because I thought it would save him some time. It got me to thinking about how much I use these browser extensions, …

Kyle Van Deusen

Published:

Filed Under:

Product, Quick Tip

Closeup Of A Plasma Globe In The Darkness
This content contains affiliate links. View our affiliate disclaimer.

Recently on the podcast I mentioned the browser extension “MeasureIt!” to Matt because I thought it would save him some time.

It got me to thinking about how much I use these browser extensions, and what ones I might be missing. 

I thought I'd share with you the ones I keep handy, why I like them, and ask you if I'm missing any must-have's.

My List of Must-Have Browser Extensions

Using the Chrome store here (sorry, FireFox users) since I've switched to using Microsoft Edge and all the extensions are compatible. 

Hoverify

This is, without doubt my favorite extension… It's an all-in-one tool for web development that gives you the ability to:

  • Inspect elements way easier than the inspector tool (fonts, sizes, CSS properties, etc.)
  • Pick colors (and copy or save!) from any page
  • Take screenshots
  • Copy CSS / Export to CodePen in one click
  • See the technology used to build a website
  • Download all the assets from a page (images, videos, etc.)
  • View a page in responsive modes across a multitude of devices

This one extension alone replaced 4 that I was using to do all of these things before. 

While many “all in one” solutions usually come with a compromise (compared to ones who focus on doing one thing) this extension is top of its class with all the features.

Nimbus Screenshot & Screen Video Recorder

Nimbus is super handy for taking screenshots of web pages and has a lot of goodies baked in. A few of the things I love are:

  • Take screenshots of what's visible
  • Take screenshots of the entire page
  • Annotate screenshots once you've taken them
  • Delayed screenshots (if you need to capture a drop-down or hover)

Their system for uploading the screenshot and giving you a quick-share link doesn't always work… And they've removed the “copy to clipboard” option (perhaps they moved it to the paid version)— still I haven't found a more useful extension on the market!

It might be worth mentioning that Nimbus stores a copy your screenshots on their server. So you might not want to use it for your sexy selfies.

Font Finder

Font finder is great for getting all the details about a typeface displayed on a website. Click the extension, then click any bit of text and a little popup will tell you:

  • The color (in Hex and RGB)
  • The background color
  • The font Family
  • Font Size
  • Line height
  • Letter spacing
  • Font weight
  • Font style

And a whole lot more.

ColorZilla

Need to find the hex value for any color on your screen? I rely on this extension multiple times each day— mostly because it’s simple to use! 

Simply click the extension, then click anywhere on your screen and the hex value of the color you selected will be copied to your clipboard automatically. 

It even keeps record of the recent colors you picked so you can go back and fetch them quickly.

BuiltWith Technology Profiler

I’ll admit, I dont understand all the information that BuiltWith spits out, but it does make taking a quick glance at the technology used to build a website pretty easy. 

In a practical sense, it usually satisfices my curiosity as to whether or not a website was built with WordPress— and even which plugins are being used in some cases.

Loom for Chrome

I’m a big fan of Loom (now that I’m running something using Chrome anyway) for creating quick videos for my clients or even my friends at TAB. 

The browser extension just makes it that much easier to hit the button and start recording right away without a bunch of setup (no more excuses!).

I find myself creating Loom videos much more often now that I have it as an extension than I did when I’d have to go to their website or open up the desktop app.

Page Ruler Redux

I was using MeasureIt!, but Lee at LDB Creative turned me onto Page Ruler Redux, which is fantastic!

Quickly and easily measure anything on a screen to get exact measurements, spacing, and a whole lot more.

This comes in especially handy when you are recreating something or “borrowing” some inspiration.

Honey

Honey goes out and finds coupon codes and deals at checkout. It doesn’t find deals for most of the things I buy but when it does I’m always thankful.

In fact, I never pay full price for a domain on NameCheap because the Honey extension always helps find a coupon code to save me at least 10%. 

A few suggestions from The Admin Bar community.

Since sending out this list in an email, I’ve received several suggestions for extensions from The Admin Bar community.

OneTab

OneTab lets you clear out the clutter of having 100 browser tabs open (admit it, you have at least 10 right now, don’t you?). The extension quickly puts all your open tabs into a list in ONE tab so you can quickly come back and access them as needed.

The extension claims to reduce memory consumption by up to 95%. Of course, I haven’t measured that— but it certainly helps! And let’s face it… with all these new browser extensions you’re installing, you could probably use all the memory help you could get ?

Thanks to Richard at RNR Design for the submission!

Window Resizer

Wonder what a page looks like at a certain resolution? The Window Resizer extension has a pretty cool trick! Instead of creating a container inside your browser (and kind of “faking” the resolution within a window) it automatically restores your browser window to the exact dimensions you select. You can choose from a ton of pre-selected sizes or type in your own.

The only thing that is a bit funky is when you want to view it on a screen resolution that is bigger than your monitor— easy solution: time to go monitor shopping!

Thanks to Karen at Brightgirl Designs for the submission!

Google Font Previewer

I could see Google Font Previewer coming in handy— with a couple clicks you can change all the fonts on a website to any Google font.

If you’re working on a redesign and want to see what a site might look like with some new typography— you can get a quick preview in just a few clicks of the mouse.

Not sure I’ll keep this one installed all the time, but I’ll likely grab it from time to time.

Thanks, Fola Design for the submission!

SEO Meta in 1 Click

All the work that went into creating this list and asking for feedback was worth it— just for finding SEO Meta in 1 Click!

Navigate to any website, click the browser extension, and get instant access to the: page title, meta description, author, publisher, headings, links scripts, images, links, social, and quick links to testing tools.

As Rosie from Wuf Design (who submitted this gem) said: “It’s great for a quick look at if a site has basic SEO, especially useful whilst on the phone to potential new client”.

Emoji Go

Need to copy a emoji to your clipboard? Emoji Go makes it easy and come with a great search function. 

Find the emoji you're looking for, click on it, and it's immediately in your clipboard for quick pasting. 

I bookmarked an emoji page a while back, but when Noah from Thrive Design shared this one with me I quickly replaced that system! 

Tag Assistant (By Google)

Tag Assistant is a handy little tool to make sure you've applied all your tags (like Analytics, for example) to your websites.  Anyone using Google Tag Manager will love this little extension! 

The Great Suspender

The Great Suspender will put your open but inactive tabs to sleep.  You can set the amount of time you want to wait before you suspend a tab, and even exclude tabs from being suspended.

This is a great, and automated, way of keeping your browser resources in check.

When you return to a suspended tab you can just click the page to have it refresh and open back up. 

Grid Ruler

I've always felt like a fool dragging a notepad file around trying to make sure things were aligned— but Grid Ruler solves this problem!

Quickly add the ability to drag rulers across any page. As a bonus it also works from inside page builders. A must have!

Website IP

When migrating websites from one server to another, I'm always anxious about propagation. This little plugin simply tells you the IP address a website is being served from so you and instantly see if your propagation has finished! Thanks for the share, Eric

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)

May 27th, 2022

Hiring Your First VA

When You Should, and What You Should Know

May 16th, 2022

The GenerateWay

A live interview with Tom Usborne

More Articles

best lesser known plugins

Best WordPress Plugins You’ve Never Heard Of

The best lesser-known plugins from the WordPress repo

A closeup of a computer keyboard with a blue handicap button.

How To Write Accessible Website Copy

One of the most overlooked aspects of accessibility is website copy. It’s not just the design, layout, & features of your website, the copy has to be accessible too.

black and yellow tool box.

The Best Free Tools & Resources for Agencies

A crowdsourced database of the best free online tools, utilities, & resources for website designers and developers.