12 Recommended Chrome Extensions for Web Development

March 30, 2012
My recommended Chrome Extensions for web development

I started this blog post to sway Firefox users to give Chrome a try as their primary development browser. I discovered there are almost no differences now. The only reason I switched to Chrome a few years ago was speed compared to Firefox at the time. Today, that is not an issue. In fact, I just did an informal test on my machine and both browsers started in less than 2 seconds. Also, I can't tell a difference in page render times now.

Every feature I have in Chrome can be found in Firefox and vice versa. I'm sure there are some extensions that people prefer in one browser over the other, but I couldn't come up with a really great justification for switching.

Instead, I'd decided to share the extensions I use and why I use them (FF users can search for the same functionality).

Extensions I use in Chrome

Lorem Ipsum Generator 

When building out a new website I often need a little filler text, so Lorem Ipsum Generator is helpful. I can control the amount of text and paragraphs and quickly select and paste.

(If you ever want a really fun Lorem Ipsum generator, try Fillerama — I love using "Dr Who Ipsum.")

Session Manager

Session Manager lets me do a couple awesome things:

  1. Save groupings of common tabs for tasks like social media, checking news, image searching. 
  2. Remember all the tabs for a topic that I'm researching so I can go back to that research.

SEO for Chrome

I use this tool to quickly identify if my site is being indexed and how well.  I also use this to double-check staging addresses to ensure they are not being indexed. There is a LOT more data available as you see in this screenshot of the extension.

Chrome Sniffer

This is a great tool to quickly identify what technology a website is using. it puts a little icon in the top right of the address bar that tells you which CMS is being used, and MUCH more.  Here's a screenshot of Chrome Sniffer on the Digett website. You can click an icon to go to a web page for that technology. 

What Font

As a designer, I often want to know what font is being used on a website.  This extension lets you hover over any text on the page (except images) and it will identify the font used.  If you click on an element, it will display a drop-down with the CSS/Font attributes of that text.

1Password and LastPass

Password utilities are a must in our industry. I have what feels like one million passwords for myself, my work and my clients. I love 1Password, but I also use LastPass at work — you just can't beat the ability to share server credentials with a coworker through their secure interface.

User Agent Selector

There are lots of way to spoof your User Agent string for testing, this is very simple and quick. One click and I can trick the website into serving a mobile version of a site. This is great for quick testing.

Pendule 

This is the little swiss army knife extension. It has similarities to Firebug. I use for so much, you just have to read about it to see all it can do.

Evernote (adds a web app and a "Clip to Evernote" extension)

I use Evernote for note-taking, for lists, for screenshots, for articles to remember. With the Evernote extension, I get access to the web app, I get "clip this page to Evernote" function and most importantly, I get the ability for any Google Search to also search my Evernote repository. In the screenshot below, you can see that when I performed a Google search for the word "Digett", it also searched by Evernote account for the word or phrase. I can click that link and it will open the Evernote web app with my notes selected.  Brilliant!

Clearly (view article in a format that is like an e-reader … much easier, also adds clip to Evernote)

This is last on my list, but my favorite tool. It isn't for web development per se, but it is great when you read a lot on the web. This tool turns an article into a distraction-free, e-reader feeling article. It is from Evernote and you can click a button to clip the article to Evernote as well.

Where is Firebug?

The most indispensable tool I used in Firefox was Firebug. There is a Firebug Lite version for Chrome, but I have found I don't need it; I use the Chrome Developer Tools inspector to do everything I used to do in Firebug. I can inspect and edit CSS, adjust HTML on a live page to test out a change, and see the computed style of an element.  I also use the Console tab to check for javascript errors and the Resource tab to ensure everything is loading properly.

One area where Chrome is working better for me than Firefox

Both browsers have a sync function so my laptop and desktop machines have the same links, stored passwords, and extensions. For some reason, the Firefox sync settings don't work as reliably for me. I often get an error message that sync isn't working in Firefox; in Chrome, I set up sync and I haven't touched the setting in years. It just happily works in the background.

What about you?

Are there any Chrome extensions you use that I should check out? I love to discover new tools!

Related articles

Comments

Great recommendations,

Great recommendations, thanks!