Hello!
While working on a moodle theme I thought it might be useful for debugging CSS if I was able to select an element in the page and then examine the tags, classes and id's that could be used in writing the CSS selector for that element. For example it might be helpful investigating problems with specificity, or if you're just learning your way around the layout of moodle (or any other site).
So I wrote a short user javascript for use with opera and the greasemonkey firefox extension to act as a simple document inspector - please check screenshot below.
On a page where the script is running, pressing the shift key while clicking on a section of the page will make a small box appear, showing the path through the DOM tree, from the body tag down to the element you clicked on. At each step through the tree it displays the tag name and any classes or id's on the element.
The box can be dragged around the page or cleared by holding down the shift key while clicking on the box.
Note: there may be other tools that perform a similar task, certainly for mozilla browsers - the display id/classes option on the developer toolbar springs to mind, but I found it can make the display too cluttered and it doesn't clearly show the elements position within the document tree. I find this script helpful, hopefully someone else will too.
If you're interested in trying it out here's the installation instructions:
For Firefox
Install the greasemonkey extension from http://greasemonkey.mozdev.org/ (at the time of writing greasemonkey 0.3.5 is the recommended version).
After installing the extension restart the browser. If you look in the tools menu you should see a few extra options, including install user script (although this one won't be active yet).
Go to http://www.altoncollege.ac.uk/misc/debugcssselector.user.js
Review the script (to check it isn't malicious
) then choose tools > install user script.You should then be prompted to set up the sites you want to apply the script on. By default I set this to be http://localhost/moodle* - that is any file within the moodle directory on the local server. Change this to apply the script to whatever sites you want.
For Opera 8
Go to tools > preferences > advanced tab, then select the content option from the list of sections and click the JavaScript options button. In the dialog box that appears fill in a folder (e.g. c:\userjs) in the "my javascript files" field.
Next download the script from http://www.altoncollege.ac.uk/misc/debugcssselector.user.js and save it in the folder you specified for user javascript files.
The script is currently set up so it will only be applied to files coming from http://localhost/moodle. Assuming the sites you'd want to use it on are different you'd need to edit the script to change this.
At the start of the file there is the following text:
// ==UserScript==
// @include http://localhost/moodle*
// ==/UserScript==Change the address in the @include line to target whatever sites you like. For further information on setting up the script see http://www.opera.com/support/tutorials/userjs/using/
Hopefully, all your nice comments will encourage Andy to be brave in future and post on moodle.org himself! 
)