[henrikschroder]

When it comes to CSS, the best tool I've ever used is firebug, http://getfirebug.com/

It's invaluable to have a tool that lets you inspect everything on your page and show you why each element is styled as it is and where in the goddamn CSS file the line is that caused you to start tearing out your hair.

[seanlinmt]

The best part about firebug is that it allows you to change the css on the spot and you get to see how that affects your layout immediately.

[alinajaf]

I think I'm in the minority but I've never really seen the appeal. I've always much preferred chromes developer tools. Right click on anything and choose 'inspect element' to see what I mean.

[pierrefar]

But that's how Firebug does it in Firefox!

And on my Chrome, there is a regular inconsistent bug that when I want to inspect an element, the new tool UI is displayed but the element is not selected.

[henrikschroder]

I've never used Chrome so I don't know if it's better or worse.

My point though is that it's first in recent years that we've had tools like these, and they made a huge difference for me helping me undesrtand what the hell goes on with the styles. It's a much nicer workflow than the old edit-reload-check-edit-reload-check model, where you inserted coloured borders to see exactly how large your divs were, and moved things a few pixels at a time until it looked right.

[tcdent]

Chrome's developer tools are actually WebKit's, so you'll be able to use the latest/greatest version in WebKit nightlies.

[metamemetics]

The best part about FireBug is actually JavaScript debugging and the JavaScript console. Writing a web-app would be nearly impossible without this.

For simple CSS you probably want to be changing it in a seperate text editor that auto-refreshes your web-browser so you have the benefit of being able to save.

The CSS-changing feature you mentioned is of questionable use while the JavaScript features are essential.

[isleyaardvark]

Firebug is great for CSS because it allows you to find the specific CSS rules for a selected element, along with the line number it appears on in the CSS file(s), helping you find it in the separate text editor in the first place. Also you can try out new rules very quickly and get instant feedback without switching programs and setting up an auto-refresh.

I switched to Webkit's JS debugging tool not long ago, it has much better warnings than Firebug.

[seanlinmt]

I actually prefer webkit's javascript console. It's easier to traverse objects that you print out using console.log and it has intellisense. :)

[atestu]

If you're on a Mac, MacRabbit's CSSEdit [http://macrabbit.com/cssedit/] does that too. It's a fantastic application. I can't design without it.

Usually, I draw a basic sketch on a piece of paper, then write the HTML file in TextMate, and then spend a lot of time in CSSEdit.