CSS Debugging Tools

Aug
5
2007

Xray Your Structure

Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. About time too, for too long we web designers have spent endless hours debugging inconsistent implementations of CSS over the various browsers. Time for us to take some of that ‘lost’ time back. Now we all know about Joe Hewitt’s famous FireBug extension. If you don’t then go get it, install it, and it will change the way you design. That wonderful extension aside, what else is out there in the market place:

  • XRay

    Just the other day John Allsopp joined the crowd with his . Now this is just a CSS only tool that allows you to XRay (hence the name) into a page and see the CSS that relates to an element. Much like you can do in FireBug in FireFox, an extension I’m sure you all . What sets the Xray bookmarklet asie is that it works with Safari 2 and 3 (for OSX), and the Mozilla based browsers (OSX and Windows). The good thing about this tool is that it doesn’t take up as much screen real estate as FireBug does. But it doesn’t stop there, oh no. John is planning versions for Opera, and Internet Explorer. If this happens, this tool could be come an essential component of any web designers toolkit. Still go check it out. Also remember it’s still in beta.

    Update: There is now a version for Internet Explorer, this has now become a primary debugging tool for IE.

  • YSlow

    Then we have YSlow released by the team at Yahoo, yes this is a FireFox Extension. Okay it’s not all strictly CSS, but it is a handy enhancement on Firebug and provides a quick analysis of your web page’s performance and reports on possible speed bumps (or weak points) for the nominated page. Now a word of warning using this. Don’t leave it turned on all the time, only enable it for testing and then disable it’s reporting after you have finished using it. It can be resource intensive depending on the web page.

  • Dust-Me Selectors

    The people at SitePoint have produced a nice extension Dust-Me Selectors that reports on the unused CSS selectors within the current page. Now this is not ideal, as you may only use a selector on one page, and this maybe not the one being reported on. But it is good for general design selectors. Especially if you build your pages with a base design featuring all the major content elements for debugging of the design, and ensuring it all works and looks as you have envisioned. This even works with IE conditional statements. There is a school of design that dictates that you isolate your base design CSS selectors from your specifics via separate CSS files, Dust-Me Selectors is ideal for that situation.

  • FireFox Web Developer

    The Web Developer FireFox extension developed by Chris Pederick is still a handy addition to any web designers toolkit. Although it has been surpassed in many areas by FireBug it is still useful for disabling elements of the display. I would recommend you at least have it installed as it can ofter as alternative view point to FireBug.

  • DOM Inspector

    Scott MacGregor’s DOM Inspector extension for FireFox was very popular before the introduction of FireBug. It is still in production, however I feel the usefulness within the web designers tool kit has wained. This extension allows you to examine the DOM of a page, and travel up and down the DOM structure.

  • Internet Explorer Developer Toolbar

    The Internet Explorer Developer Toolbar from Microsoft is really the only alternative, outside of the commercial products (see below), for CSS debugging in IE. It’s not a even a shade on FireBug, and while a stable and useful product, it is about time Microsoft developed a better tool than this, as it is a bit dated. Come on Microsoft time to revise and take a leaf out of the FireBug camp.

  • Opera Web Developer

    There is a Web Developer Toolbar and Menu for Opera as well. This offers very much a functionality similar to the FireFox Web Developer toolbar.

  • FireBug Lite

    Not the most ideal solution but FireBug Lite does offer Firebug like functionality to IE, Safari and Opera. It requires the use of a code insertion into the page to be debugged and the calling of the FireBug interface modules from a JavaScript library on the server. Not so much as on the fly like FireFox FireBug functionality, but it is an alternative.

  • DeBugBar

    This is the solution to the poor support provided from the IE Developer ToolBar. The commercial product DeBugBar. This is an Internet Explorer plug-in that gives you FireBug like control of the page. Navigation up and down the DOM, and changing of CSS selector attributes on the fly. A JavaScript console and inspector. If you have problems debugging CSS in IE, and I know we all do! Then take a look at this commercial plug-in, prices start from 59 €.

That’s a bit of a wrap up. What other CSS debugging tools do you use, besides blood sweat and tears (mainly over IE 6)?

Technorati Tags: , , , , , , , , , , , , , ,

4 comments

  1. RE: X-ray

    Have you seen the “Display Element Information” feature in the Web Developer toolbar? It doesn’t do everything that X-ray does, but you might want to take a look if you don’t already know about it.

  2. @Gerry – thanks for that, yes I have used this in the past. Where as XRay improves this is by showing how the reported positioning was derived and the inherent hierarchy of the selectors, and giving you live onscreen height and width.

  3. Fantastic list Gary! I use the Web Developer Toolbar almost daily but I’ll have to try out the rest of these.

  4. @Gary It gives the some of the stuff that you mentioned, however you are correct, it is lacking when it comes to the positioning data. X-ray also looks a lot cooler. =D

Comments are now closed, move along, nothing to see here.