Five “Must Have” Chrome Extensions

Posted on: September 21st, 2013

My browser of choice for starting development and also perusing the web is Chrome. Over time it’s given me the least amount of grief and I’m a fan of software that consistently works. Dev Tools are great and the settings seem endless. Best of all, there are pre-made extensions you can add to Chrome to make life easier for you. Below are my top five Chrome extensions that I re-install if my system ever strokes out.

5. Readability

For those of you that are reading-inclined, which you may very well be since you are gazing upon this post, Readability is a great extension to have in the top of your browser. Much like Instapaper, when browsing a site, you can choose to read the post later, read it now, or send it to your Kindle. If you choose “Read Now” Readability cleans up what you are reading and puts it into a nice, single column layout, removing sidebars and any ad distraction. You can adjust font-size, color, background color, and column width. Don’t want to read it right now? Save it to your Readability account and access it later from any device (including mobile) and add some tags so you can filter your library. Pretty awesome in my book.

Below is a look at two of the color, font choices:
readability

4. Delicious Tools

While we’re on the topic of saving things for later, I have to talk about Delicious. I started using Delicious in 2011 and it went through some issues but has returned to its rightful place as king of my bookmarks. When on a page you’d like to save forever, click on the Delicious button, add some notes or tags on the link and save for later. The saving ability is very similar to Readability, but overall I like the tagging and filtering a bit better. I just noticed today that they have a beta and the beta is very pretty. Flat design with a Windows 8 feel…very very nice.

delicious

3. ColorZilla

Sometimes you simply need to figure out what color is being used on a web page or web image and can’t get the hex code. That’s where ColorZilla is a huge help. Click on the eyedropper, hover over the place you’d like to grab the color and check out the options you get. It shows you the color, the rgb value, hex code, size of the element, and the element that it exists in. When you click the color you want, it copies the color to the clipboard and shows you the color you’ve just copied at the top of your browser. Never not know a color again!

colorzilla

2. Responsive Inspector

This is a bit of a newer extension, but I’ve enjoyed what I’ve seen so far. The extension gives you the ability to see what styles are being used in certain media queries and which are active on your current page and how quickly they are loading. One of the coolest things is that when you click on a breakpoint, it will adjust your screen to that size so you can see exactly the point where things are moving. Want to see the CSS that is being used at that breakpoint? Click the {} to the right and you’ll be taken to your stylesheet, greyed out except for the portions that are active. It’s a great extension, especially if you work with responsive web design at all. Here is the extension’s creator discussing the tool.

1. Web Developer

My number one Chrome extension is one that every web developer should be using. Web Developer is an all-encompassing extension that allows you to disable JS, CSS, plugins and popups, check/uncheck all boxes, validate all your codes, display topographic information and much, much more. If you have not used this extension before, go download it right now. Seriously, abandon this post and go install it. There are so many options and capabilities that you’re bound to find something useful to use and learn about on your next project. Happy extending!

Bonus: Password Box

This is one of those extensions that is a flat-out timesaver. In this age of usernames and passwords, it can be tough to keep them all straight, unless you use the same one all the time, which is pretty dangerous. Password Box keeps track of all of your passwords and usernames for you and on login screens will automatically sign you in. The only drawback is that every now and then you need to remind it which username is correct before it will log in. Another helpful note, if you don’t want to create your own passwords, Password Box will do that for you. Thank you, oh generous box of passwords.

Bonus Bonus, in no particular order, from the Twitter folks who recommended them

Looking for more development related Chrome extensions? Mashable has a pretty good list right here: mashable.com. I don’t use many of those simply because Web Developer handles a majority of it.

previous post: CSS3 Animation Not Working in IE10 next post: Finding Free Music For Projects