Rave: Firebug extension for Firefox

I'm something of a web-development "purist". Many of my recent web-development sessions have boiled down to manually editing code--whether it be HTML, CSS, Javascript, PHP or SQL--using nano (like notepad for Linux). These sessions typically go something like:

code... code... code... open in web-browser... dang! ... code... refresh browser... code... code... aha! ... code [etc.]

When you're manually debugging PHP, I'd recommend the print_r function for starters. When you're manually debugging CSS... it's another story. (There's a reason it was named "Cascading".) In everything but the simplest HTML+CSS layout, there are usually conflicting styles and it never fails but that an unwanted style manifests itself. You can easily spend more time trying to fix CSS "bugs" than doing actual development because none of your inspector tools 'splain what's going on thoroughly.


The good news:
... Well, tracking down those pesky stylesheet issues has never been easier. I'd like you to meet my newest best friend¹: the Firebug extension for Firefox! It's an all-in-one browser plugin to make whatever you're doing on the web--from scripting to CSS hacking--that much easier.


In addition to awesome features like a content/connection profiler, it has the best CSS inspector/editor/debugger/whatever I've seen:

1. A "Click an element in the page to inspect" button that lets you take the problem right to the point of conflict. (No more endless DOM tree-navigation with DOM Inspector.)
2. A hierarchical view of active styles (by inline/external stylesheet) as well as listing inactive styles. When I figured out what I was looking at... well, my wife heard me shouting from the other room; it's that awesome.
   
3. Interactive style editing: to make sure it looks the right way before coding the styles, or to see how well your minor style "tweaks" look.
4. Layout guide: Click on a DOM element to see what the current padding, border, margin, and positioning are. Killer.
   

The real beauty of it is that the friend who recommended Firebug is even more keen on the Javascript features than the CSS inspector/editor--let the good times roll!


Images:

1. Firebug Layout Inspector:

2. Firebug Style Hierarchy:

Notes:
1. My previous new best friend was (and still is) jQuery.