Firebugs and CSSEdit saves the day!

One of the hardest things to do with all this newfangled Web 2.0 development is chasing down problems with javascript and css across different browsers. I’m sure there are a lot of great techniques out there, but here are two tools I’ve recently started using that have helped me chase down a couple of previously impervious bugs: the Firebug extension for FireFox and CSSEdit 2.0.

Viewing dynamic HTML with Firebug

If you’re using javascript to dynamically create or modify elements on a web page, it’s virtually impossible to see what is being created without explicitly writing code to display and debug. My favorite Firebug feature is simply its ability to show you the current state of a web page. Whether you’re inserting elements, or modifying an element’s class or css, Firebug can show you in real time where and how things are changing for the DOM, the HTML, scripts, and CSS. You can even go in and edit the page and see what happens.

Firebugs is still a little buggy (at least on the Mac), but it’s worth it! (It has problems with Network Monitoring if you’re using AJAX, which would be a really killer feature, and I can’t for the life of me figure out how to successfully attach/detach the firebug display from a window, for example).

Real-time css editing with CSSEdit

Firebug will let you edit the CSS on the site, and it has a really nifty way of showing inheritance and which styles are being overridden by which other styles, but navigating through the myriad of panes and keeping track of edits is virtually impossible. This is where CSSEdit shines.

CSSEdit’s workflow feels a little odd at first, but once you grok it, it’s pretty straightforward. Essentially what you’re doing is viewing a web page in one window (using CSSEdit’s built-in browser), and overriding the CSS in the browser window in real-time by making CSS edits in another window. So as you type in changes, you can see the effects immediately. This removes some of the guesswork out of knowing what might be affected by your changes. The other really nice feature is an edit pane that lets you edit styles via a formatting palette similar to Microsoft Word’s. So you don’t HAVE to know CSS to make changes. And if you have a lousy memory like me, you won’t have to memorize the exact style name if you know where to look for it. It also has a pretty cool styles browser that lets you quickly see the names of all your styles along with a graphical preview of what the style looks like.

While neither application will help you do cross-platform / cross-browser testing per se, I find that by going back and forth between them, I can much more easily refine my style sheets to a nice clean cascading form, and then do cross-platform/cross-browser editing on one feature at a time.

Now if only someone would come up with a way to quickly browse all the documented CSS quirks, hacks, and bugs across browsers…

You are previewing your comment. Be sure to click on 'Post Comment' to store it.

posted February 14, 2007 by ben

View comment:

company; inderal propranolol; health insurance florida;
broad () (link) - 22 10 09 - 12:37

Remember personal info?

Comment:Emoticons /
Comment spam is an unfortunate problem on our site. Making you answer an Obvious Question is one way to defeat the spambots.
Obvious Question: How many states are in the United States (50)?

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.