SharePoint

Many times to refference or change the the element’s properties in a DOM of a web page, I was just going crazy. Especially in SharePoint this can be difficult, because some elements are nested DEEP within other elements (table > div > div > div > … > input).

You can help yourself a bit with javascript:alert() or by viewing code, but there are tools to make your life as a web developer much easier:

1. Internet Explorer developer toolbar

This tool is a super add-on to Internet Explorer, with which you can easily explore the dom elements and their properties simply by mouse over and click.

Some screen shots

It has lots of other neat features like visual display of class and id info, outlining certain elements, disabling styles, images, clearing temporary files, etc. I especially like the color picker and the ruler, enabling you to select colors or to measure width or height of anything directly on the screen!

Color picker

Ruler