The Web Developer Toolbar Comes to Chrome

Contributing Editor

Chris Pederick’s Web Developer toolbar was one of the first extensions developed for Firefox. Personally, I think it was one of the primary reasons many developers switched to and evangelized Mozilla’s browser.

I remember trying the WDT for the first time and reveling in its immense power. If you’ve started web developing during the past five years, you’d have been appalled by the poor quality client-side coding tools available initially — features such as element outlining, dynamic CSS editing, and cookie inspection were difficult, if not impossible.

Chrome Web Developer toolbarAlthough Firebug and similar developer consoles have taken the world by storm, they were influenced by many of the features and concepts Chris devised.

The WDT remains one of my essential Firefox add-ins and the great news is that it’s been ported to Google Chrome.

Web Developer on Chrome

You should note this is version 0.1 code, and Chris states that it’s an early release to gather feedback. Several features are missing, don’t work, or are less polished than Firefox’s implementation. Chrome’s extensions are essentially small web pages; its version of the WDT is never likely to match the deep level of browser control offered by Mozilla’s browser. For example, features such as disabling JavaScript are not possible within the current Chrome API.

That said, WDT on Chrome is a fantastic addition to the browser. If you’ve recently switched from Firefox and miss some of its better tools, do yourself a favor and install the Web Developer toolbar today.

Do you use the Web Developer extension on Chrome or Firefox? What do you like? How would you improve it?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • RyanHickman

    The WDT is great on FireFox, it’s just unfortunate that the Chrome API doesn’t allow total control over things like disabling the JavaScript. That is a key feature for me as a developer building a Content Management application that needs to function both with and without JavaScript (jQuery Modals, for instance).

    Firebug is the only add-on still making me hold out on the switch to Chrome. I love the speed and responsiveness of Chrome; Mozilla seems to have forgotten their roots with speed in Firefox, though they are trying to make a quick recovery in this department. Firebug likely won’t make it to Chrome seeing as the element inspector in Chrome is so rich, it’s just not powerful enough.

  • ferrari_chris

    I use Chrome as my browser day-to-day. Both at work, and at home. But Firefox will remain my development browser for now. I find I actually use Firebug more than the WDT, and turning JavaScript off is definitely important.

    So, so far, no deal Chrome.

    Cool browser though – I like its speed!

  • http://www.dynamicsitesolutions.com/ Kravvitz

    I like being able to see the contents of all of the stylesheets and JS scripts being used in the page and being able to choose to validate HTML and CSS by passing the validators the URL or by automatically uploading a temporary file to the validator (which is called “validate local HTML/CSS”). It’s also a convenient way to temporarily disable features like images and CSS for testing purposes.

    There are two improvements that I’d like to see. The first is a fix for the compatibility issues with the Noscript extension. And the second is to remove @import and @charset rules when using “validate local CSS”, so they don’t trigger error messages for things that aren’t really errors.

  • Stephan

    The main feature of the WTK I use are the red/green indicators that immediately show whether there are any CSS and/or JavaScript errors. Having these indicators right on a toolbar is incredibly helpful.

  • Cyril Gupta

    While I use Chrome for regular surfing (like I am doing now) because it is fast, I cannot use it for web development because it totally sucks for that purpose. The firebug lite plugin does not feel like ‘real’ firebug and the WDT was missing (and it is still hobbled). For web development it is firefox all the way.

  • http://ur20.com eFingerz

    I have use this on firefox for many years and love it
    and will continue to use it on FIREFOX
    I just installed it on chrome my 1st extension :p and i like the look of it but its missing alot of the best features!
    where is edit html?? edit css?? and it doesnt have Disable JavaScript, cookies etc etc :(
    thought this may get me to use chrome more but i think it will just be my new ie where ff is my default browser and chrome for times when i dont want to start up a firefox session (usta use ie)

  • http://www.lunadesign.org awasson

    Wow… That is cool. I just installed it and it has some of the good old WDT I know and love in FF but it isn’t quite there yet. I also installed Firebug (which is a must have tool) in Chrome but it isn’t ready for prime time yet.

  • David Andersson

    A great leap forward. Main disadvantage for me and my company is the lack of a disable javascript feature. Once it’s in there, along with a YSlow or PageSpeed extension, I’ll port to Chrome!

  • Justen

    I love Chrome for browing, but Firefox is staying my development browser for the forseeable future. It is really nice to have some tools available to diagnose problems specific to Chrome/Webkit though, keep ‘em coming : )

  • johnthegeek

    IMO, Chrome has a long way to go before it’s ready for prime time. The two extensions I’ve added so far crash on a regular basis so I’m not ready to add more to the mix, nor to use Chrome as my primary browser.

    I use Chrome for Google apps, primarily. The Javascript optimization makes a noticeable speed difference for GMail, etc. For everything else, I use Firefox, especially development because of the available tools and its general stability.

  • Daniel15

    I’m surprised nobody has mentioned Opera… Opera’s Dragonfly is getting pretty close to Firebug. I still use Firebug sometimes, but Dragonfly is pretty good now. Opera had a web developer toolbar, not sure if it’s still around…

    And Opera lets you disable JavaScript via the F12 “quick preferences menu”. Edit Site Preferences lets you permanently disable JavaScript for a particular site.