Four Chrome Extensions I Couldn't Design Without

If you know me, you know I love all of Google’s web applications- Google docs, Google sheets, Google forms- they all make my life so much easier. But above everything else, Google Chrome is my be-all and end-all browser. With that said, here is a list of my four most used Chrome extensions for web design:

4. WhatFont

The most recent addition to my collection, but nevertheless, a good one. Have you ever been on a website and wanted to know what a certain font was? WhatFont allows you to do just that!

Directions for setting up WhatFont can be found here.

Once set up, just click on the WhatFont icon (looks like ‘f?’) on any web page. Then start hovering over text.

WhatFont in action

 
 WhatFont identifies ‘hi there!’ font on laurenaloiadesigns.com

WhatFont identifies ‘hi there!’ font on laurenaloiadesigns.com

 

3. Squarespace Collection/Block Identifier

If you’re a Squarespace web designer like I am, this extension can come in handy when using the custom CSS feature. It displays the collection and block IDs on Squarespace pages so you don’t have to dig through the source code to find them.

Add this extension to your Chrome browser here.

I also mention this extension in my ‘How To Create Circular Images’ post.

Once added, just click on the Collection/Block Identifier icon, which looks like a ‘B’ in a black box.

Squarespace Collection/Block Identifier in action

 
 Identifier extension displays the Collection and Block Ids on laurenaloiadesigns.com

Identifier extension displays the Collection and Block Ids on laurenaloiadesigns.com

 

2. Full Page Screen Capture

The Full Page Screen Capture extension is a complete game changer! The extension will take a FULL screenshot of the webpage you are on. No more zooming out to capture the full page or pasting multiple screenshots together. I use this extension all the time, whether it’s to show my client a webpage or to view the full page myself.

Add this extension to your browser here.

Once added to your browser, click on the icon (looks like a camera) and let the app do the rest.

Full Page Screen Capture in action

 

Full Page Screen Capture of laurenaloiadesigns.com

 

1. Eye Dropper

I’ve been using the Eye Dropper extension for years. Pick a color on any webpage using the eye dropper to identify the HEX code, color name, RGB, or HSL values.

Add this extension to your browser here.

Once added, click on the eye dropper icon and then ‘Pick color from web page’ button.

Eye Dropper in action

 
 Eye Dropper identifies the ‘pink’ color on laurenaloiadesigns.com

Eye Dropper identifies the ‘pink’ color on laurenaloiadesigns.com

 Eye Dropper keeps a history of colors the user chooses.

Eye Dropper keeps a history of colors the user chooses.

 

I hope you find these extensions just as useful as I do. Let me know in the comments some of your favorite Chrome extensions!