For some time, I've used the web developer toolbar for firefox to check out css code on other people's sites and debug stuff on pages that I've created. Just like I once used view source to learn to make web pages in the first place (it's a bit more difficult now that scripting languages and such are way out of my league).

In the course of trying to re-design the css for this blog (which uses drupal and thus creates css pages on the fly out of a whole host of locations from php files), I came across another suggested tool on a drupal forum: firebug.

Firebug sits at the bottom of my firefox browser by default (as opposed to web developer, which sits at the top) and takes up quite a bit more room when it's activated, but none when it's not. But it displays incredibly useful and timely information in all that space. For instance, at the left side of the screen you could see this:

a collapsible hierarchy of the html code of the site. Clicking on the code highlights the relevant display in the browser window above. Awesome! Even better, on the right side of the screen you get this:

display of the css code that's applied to the html code displayed in the left side of the window. Which, in drupal, is essential, since any part of the screen could be affected by a module's css, or the default, or the theme's, or whatever! What's more, you can click the "edit" button, and just start typing over any of the values, or type in some new ones and see in the above browser window how those code alterations change the display. Because editing in firebug doesn't actually edit the site's code (there's no entering of server passwords, at least I haven't looked for such a feature), you can mess around quite a bit, then put the code you want into your html and css files yourself. Really, the most useful new media writing tool I've come across in some time.