Just the other day John Allsopp joined the crowd with his XRay bookmarklet. 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.
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.
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.
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.
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: XRay+Bookmarklet, YSlow, FireBug, FireFox, CSS, Web+Design, Dust-Me+Selectors, Web+Developer+ToolBar, Opera, Debugging, DOM+Inspector, Internet+Explorer+Developer+Toolbar, IE, FireBug+Lite, DeBugBar