A tool I’ve found useful at both work and home is the Mozilla plugin Firebug. At work, since it gives you a JavaScript debugging environment that is far superior to the built in we use it to figure out how things are working. Being able to examine variables and call functions from the console command line inside Firebug has made troubleshooting problem JavaScript wildly easier than it is any other method. For this alone, it would be a keeper.
It also does CSS debugging, after a fashion. It will show you the structure of your webpage, and as you hover over the HTML, it will both show you the stylesheet that controls that particular chunk of the page (including the main and inherited bits) but will highlight it on the page itself. Really, it has to be seen to be believed. What tweaks I’ve done to my new template successfully were all done with that. Before I had this tool, making any effort to debug CSS was a wild crapshoot. I couldn’t always tell what DIV was in control where or what part of the page it controlled. Now that’s trivial. If you do any webpage development at all – including customizing your blog’s template – this is a download you need.
One Firebug feature I like is in-place editing of the CSS and HTML in a page. I can change something, and see the effect it has on the page. Unfortunately, it’s in-memory in-place editing, not real editing, even when you’re working with a local file.
So once an in-place change is for the better, I have to recreate that change in my text editor, or I lose the change with a page refresh.
Well damn PJ. Would you believe that although I knew about and use the editing of in-memory JavaScript it just never occurred to me you could do the same with the CSS? I’ll get this damn template fixed up tonight then, if I can do it without having to edit on server, reload, etc etc. I guess this isn’t surprising that you can do this, but I just never played with it. Thanks for pointing that out.