Chrome has been my default browser now for some time but, when developing web apps, back to Firefox it is. The rich selection of developer extension such as Firebug, HTMLTidy and the web developer toolbar as well as useful tools like ColorZilla and MeasureIt makes developing web apps just that little easier. This is all about to change as a while ago the flood gates opened when Google announced that the developer channel version of the Chrome browser now supports extensions.

While it is still early days, there are already a couple of useful extensions available for developers. Below is a list of some of the one’s I have found.

Web Developer Mini

This extension is extremely simple and provides your basic view source, validation of your HTML and CSS and one nice little feature that sends your current page to BrowserShots to be tested on the wide array of browsers, versions, screen resolutions and operating systems they provide.

Install Web Developer Mini

Pendule

Pendule is a similar extension to the above but provides a lot more features. Pendule is actually divided into three sections. The Pendule section provides a view source function as well as a color picker (this does not seem to work though), ruler and the ability to disable CSS. The second section provides image functionality that allows you to hide images, show alt text, dimensions as well as image paths. The final section is a collection of the W3C tools that provides access to the HTML and CSS validator as well as the link checker and feed validator. A really nice extension that is well on it’s way to becoming the web developer toolbar for Chrome.

Install Pendule

IE Tab

The name says it all. I while ago people were talking about adding the Chrome frame to IE and there was wild discussions about this. In Firefox the possibility has existed for some time to add IE to Firefox and switch rendering engines. With IE Tab, this functionality is now available in Chrome as well. No more switching to IE when you need to test, simply open the page you are testing in IE Tab.

Install IE Tab

Resolution Test

As many developers and designers now work on high resolution screens we sometimes forget to ensure that our web apps and sites display correctly on smaller resolutions. Google recently released another tool, BrowserSize,  not as a Chrome extension, that overlays div’s over your page to give you an indication of what aspects of your interface is visible to the user, something that can become extremely important if, for example, your buy button is obscured. Beyond seeing whether important calls to action and buttons are visible, testing at different resolutions will also ensure that your layout does not break. Resolution test makes this a snap. The extension is still a little buggy if you change ‘resolution’ when the browsers is maximized, but it is definitely one to add to your toolkit.

Install Resolution Test

Speed Tracer (by Google)

If you’ve been using Firebug you might very well have added Google’s Page Speed plugin to diagnose problems with loading times of your site or even specific pages. Google now provides the same in the for of the Speed Tracer extension for Chrome. With Speed Tracer you can detect problems caused by aspects such as Javascript parsing and execution, layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading and much more. See the video below for an introduction to Speed Tracer.

Install Speed Tracer

Firebug itself is still the missing ingredient in the above list however, Firebug lite has been ported to Chrome but so far, after two attempts, I cannot get it to run in my version, 4.0.249.43, of Chrome. From the comments on the install page however, it seems that I am definitely in the minority, so give it a try. Those are the biggest of the current selection of developer extensions for Chrome however, there are a few additional one’s that fall into the very useful to have category.

One of there is the ‘Lorem Ipsum’ extension that gives you quick access to the generator with a single click, much like a bookmark. The other one that I find particularly useful is the Aviary Screen Capture extension. It is a little more then a mere screen capture extension however, once you have taken your screen capture of the current web page, currently visible area only, the resulting image will open in Aviary’s free, web based image editor. In there you can crop out a specific area, add arrows, lines and annotations and when done, you can save and host the file online or simply save it directly to your computer.

For PHP developers there is the PHP documentation extension, which while already useful, can do with a little sprucing up as one of the people commented on the extension page. That’s the lot for now… Extensions in Chrome is still in it’s infancy and currently only available to those brave souls who are fine with running developer channel version of the browser. With the uptake and interesting plugins already on offer one can only dream of what is going to happen once the feature is stable and released to the general public.

What about you? Have you found other extensions you find useful I missed? Are you working on something? What do you hope to see from Chrome extensions? Looking forward to your comments.