5 Google Chrome Extensions Every Web Designer Should Have

The first thought that crosses my mind when I discover a new web tool: “This is awesome! I can’t believe I didn’t know about this!”

The second thought, laced with bitterness: “If only I had this for my last project.”

If you’re a faithful Chrome user like myself, you’ve probably noticed the massive library of extensions offered in the Chrome Store. Some of these extensions are incredibly helpful, like an accurate font identifier (has your mind been blown yet?). The problem is, there are so many to look through, it’s pretty overwhelming—especially if you don’t know what you’re looking for.

What follows is a list of 5 web design and development extensions I use on a daily basis. They save me from saying things like, “What was that color’s hexadecimal code, again?” and “Sure, it’s above the fold. I think.” Take a look at the tools, try them out, and proceed to smack your head on the desk for not learning about them earlier (it’s okay, I did it too!):


Wouldn’t it be nice if you could roll over some text and instantly see the font in a tooltip? Say hello to WhatFont, a Chrome extension that takes the hassle out of font identification. To test its reliability, I went to Google Web Fonts, Google’s open-source font API. Sure enough, each font came up exactly as mentioned. “Okay,” you’re thinking, “I could figure that out with Inspect Element.” True, but I took it a step further and tested it with images. To my surprise, WhatFont correctly identified the font used in the Smashing Magazine logo. Though it claims to be less reliable with images, it seems to have the best combination of user-friendliness and accuracy I’ve seen in font identification tools thus far.

Eye Dropper

If you’ve ever tried to identify a color on a website, you know the drill – open Inspect Element, search through the CSS, click through a few HTML elements, and eventually you’ll find the hexadecimal code. Why not save a few steps and use an eyedropper tool extension right in the browser? The tool allows you to select a color on the webpage, and even saves up a color history so you have a palette ready to go. If you’re testing some CSS color changes in Chrome’s Inspect Element and want to find a suitable color, use Eye Dropper’s Color Picker feature, which provides the entire color spectrum along with codes for your coding.
Eye Dropper

Google Search By Image

This invaluable resource lets you search for pictures, with a picture. Simply right-click on an image and select “Search Google with this image.” The search results show other websites that image was used on, and where you can find similar photos. This has come in handy when considering stock images for websites—for instance, a fit-looking male for a health supplements website. Just right click on the photo within the stock photo website, then see who else is using the same picture. It would be pretty embarrassing if a competitor used the exact same image, or if it was used in a news article about steroid abuse. Google Search by Image will become your new best friend when researching images!
Google Search By Image

Resolution Test

With the wide range of monitor sizes and screen resolutions being used today, it’s only prudent to test your sites in a variety of them. Resolution Test takes the guesswork out of screen resolution testing by providing popular size options that you can “try on” your website in the browser. Ensure your “above the fold” elements really made the cut. My only complaint is that there aren’t presets for popular smartphone resolutions, like the iPhone’s 640 X 960. Fortunately, you can add custom sizes, so this isn’t a huge obstacle.
Resolution Test

Web Developer

If you only download one Chrome Extension for web design, make sure it’s this one. This incredibly robust tool would require an entire article to explain all of its features, but here are a few key points.

  • Under a CSS tab, users can selectively disable certain style types, including inline styles, browser defaults, and print styles.
  • The Form section begs the question “you can do that?” with options to remove maximum lengths, display passwords, and more.
  • Pictures with empty/no alt attributes, oversized dimensions, and no dimensions can’t hide from the Images section, which also displays paths, identifies background images, and much more.
  • See stack levels at a glance and get meta information in the Information tab.
  • Get a color picker, ruler, and other useful tools in the Miscellaneous tab.

This is one tool you’ll just have to download and test drive yourself – you’ll wonder how you ever lived without it!
Web Developer

That’s my short list of useful extensions—what tools made you smack your head against your desk in fury that you didn’t know about it before? I’m putting on my helmet now.

Recent Articles

4 Reasons To Learn Web Development Today – The Future Is Now

The age of the internet has brought about many changes to how we do things. It is the easiest and most efficient way to...

6 Proven Marketing Strategies To Drive Traffic And Boost Sales On Your E-Commerce Website

With the vast competition in the e-commerce world, it is not easy to stand out from the crowd and be able to attract new...

5 Easy Working Ways On How To Tell If A Site Is WordPress

Once upon a time, WordPress crafted sites looked like WordPress sites while webpages on the internet looked like webpages as one would expect. Due...

Easy Way To Customize and How To Add A Drop Down Menu In WordPress

One of the biggest concerns amateur website creators have is their lack of complete knowledge when it comes to creating a page. After all,...

5 Methods On How Do I Know What Version Of Word I Have

Microsoft is hands-down, the leading software in the market. More importantly, Microsoft’s Office application is one of the most widely used in homes and...

Related Stories

Leave a Reply

Notify of