Dave Woods - Freelance Web Design Warwickshire

13 Google Chrome Extensions for a Web Designer

As some of you who follow my Twitter feed or Facebook page will already know, I’ve recently switched to Google Chrome. I’ve been reluctant to switch from Firefox for a long time purely because of my huge admiration for Firebug and the Web Developer Toolbar, however that’s all changed thanks to the Google Chrome Extensions in this post.

Google Chrome Extensions

Firebug Lite 1.3.0

Firebug for Google Chrome isn’t quite up to a par with the Firefox version but the beta version isn’t that far off. I’ve also not found a way to see the line number in the CSS which would be really useful but it’s certainly not a reason for me to continue using Firefox anymore.

Pendule

The Firefox Web Developer Toolbar was one of the first extensions I used for Firefox and was a great tool for debugging problems. I don’t use it as much since the release of Firebug but it still has some useful features. Pendule for Google Chrome does replicate some of these features and especially useful is the ability to switch off images and CSS so this is another must have tool for any web designer using Chrome.

Resolution Test

Unfortunately one of the things missing from Pendule is the ability to resize the browser window to a specific size at the click of a button. However, the Resolution Test extension makes that easy and also allows you to launch a number of browser window sizes in separate windows which is a pretty nice feature.

Webpage Screenshot

I was using Fireshot within Firefox to quickly take screenshots but the Webpage Screenshot extension provides the same functionality for Google Chrome and in my opinion is a little more usable.

Xmarks Bookmarks Sync

I previously used Xmarks within Firefox so having this available in Chrome was a bonus. Xmarks simply allows you to synchronise bookmarks across different computers and different browsers which is very useful if you want to bookmark something at work and then have it available on your home PC or laptop.

Chromed Bird

I’ve been using Tweet Deck for most of my Twitter updates but having this available quickly and easily from within my web browser is extremely handy.

ChromeMilk

I use Remember the Milk as a daily task list. I’ve previously been using the desktop app but having an extension within the browser itself is a little time saver. You’ll need to register for free on the Remember the Milk website but if managing your tasks across different PCs or mobile devices would be useful for you then this is definitely something to consider.

Eye Dropper

The Eye Dropper extension is a simple colour picker which allows you to select any area on a web page to see what colour is being used.

Lorem Ipsum

Most designers will use latin text within an initial design before the content has been written and this simple extension quickly launches a new tab containing latin text. You can specify number of words per paragraph and number of paragraphs very easily to quickly create that placeholder text.

Google Mail Checker

This extension adds a little icon to the toolbar which notifies you if you have any email in your gmail account. Clicking it will jump to your gmail tab if you already have gmail open or will launch a new tab if you don’t, simple but a little bit of a time saver for checking your email.

Chrome SEO

Useful little tool for viewing number of pages indexed by the major search engines, number of backlinks, traffic, bookmarks on social media sites and few other useful snippets of information. Obviously it’s not the total solution to SEO but a nice summary of information.

Mini Google Maps

This probably shouldn’t really make it onto a useful extension for web developers but I find it useful so thought I’d share it anyway. It’s basically just a mini version of Google Maps that pops up from your toolbar which you can use to look at a location or get directions from one place to another. Again it’s not a huge time saver but having a little icon that you can click to quickly launch Google Maps without even having to launch a new tab is pretty cool.

PageRank

Any good SEO expert will tell you that purely chasing PageRank isn’t a good SEO strategy but it’s still something that I like to have at hand. This extension simply provides a small bar that provides PageRank information.

Summary

I’m sure that there’s many more extensions that can provide value to web designers so please feel free to share any other ones that I’ve missed off the list in the comments below.

I’d also be interested to hear if you’ve switched to Google Chrome or your reasons for using your current browser?

8 comments on “13 Google Chrome Extensions for a Web Designer

  1. Mike T

    Yep, it’s Chrome for me as default since about 2 weeks ago, for all the reasons above. I just use Firefox for passively “interrogating” and checking a page with firebug, but do all my other activity in Chrome.

    Part of what i had to do to make this transition was dump Roboform for password handling. I got sick of waiting for good Chrome integration and have switched to LastPass, which is a tad more fiddly, but free.

    Currently, I’m missing the Delicious sidebar and hoping this will come.

  2. Dave Woods Post author

    @Mike, I’ll give lastpass a try as that looks pretty cool.

    Have you tried any of the following for Delicious? https://chrome.google.com/extensions/search?itemlang=&q=delicious

    It’s not something that I tend to use as Xmarks is pretty good for keeping my bookmarks in order so can’t recommend anything in that area unfortunately but looks like there’s plenty of extensions available for Delicious.

  3. Brody

    Chrome: Browsing
    Firefox: Development
    Webkit Nightly: WEEEEEEEEE CSS333333
    Opera: http://www.p01.org/releases/DEFENDER_of_the_favicon/
    Safari: ??? we used to be BFF, now you’re gathering cobwebs 🙁
    VMware Fusion IE8: sigh… Development

    hehe 🙂

    For my web work I use the set up you mentioned Dave: Firefox w/ Firebug & Web Dev. A match made in heaven. At work I’m developing first Drupal theme (eek!) so I also use this thingy:

    http://drupal.org/project/DrupalForFirebug

    Great list of Chrome extensions, I installed a couple. I use some alternatives though for color picking and dummy text. In my dock (OS X) i have Applications > Utilities > DigitalColor Meter because I like the handy little zoom feature. Makes it easier knowing the exact pixel you’re sampling. Has some other neat features too and is a little more reliable all around. And in Dashboard I have:

    http://www.apple.com/downloads/dashboard/developer/corporateipsum.html

    I just use them more universally and it’s handy to have those things ready to go without needing Chrome open.

    What do you think about Chrome’s built-in inspector Dave? Seems pretty robust but I’m guessing we both prefer Firebug for element inspection, and the other performance stuff goes a little over my head.

  4. Dave Woods Post author

    @Brody, thanks for those detailed comments… I haven’t got a Mac so can’t really comment on your OS X features.

    The developer tools in Chrome aren’t bad but they’re not Firebug, I do love the way that you can use the inspect element to hover over any element in the page and see how the CSS has been applied to that element. Fantastic to see what is being inherited especially when debugging problems.

    It was really just Firebug that was holding me back switching from Firefox. I find Firefox so slow to launch and it does crash a lot for me so apart from browser testing doubt I’ll be using it much in future.

  5. Zak Lawson

    Do you guys actually use this many extensions in Chrome? I have a similar approach to dev with Firebug on the ‘fox and Chrome to manage daily web interactions but even on my 64bit i7 laptop Chrome takes up an unbelievable amount of headroom if my extensions go past 6 or so.

  6. Pingback: The best 10 Google Chrome Apps for SEO Consultants -