I have been a faithful user of the Web Developer Toolbar  for Firefox for quite sometime.  I will admit, I don't even tap a fraction of its potential.  I typically only use it to edit the CSS of a page where I am still creating or editing the layout.  For those who might not know, the Web Developer Toolbar lets you edit the CSS of any page, and renders the changes you make to the page.  It does not save the changes to the file (now that would be both cool and dangerous), but you can copy and paste any changes into the real CSS file.

Today, I was told about 2 nifty little features I did not know existed.

1. 'Display Element Information' - This is available on the 'Information' menu or, by default, by pressing ctrl+shift+f.  You can then mouse over different parts of the page and see information about the page, such as: the type of element (<td>, <p>, <div>, etc..), and attributes of the tag, any children and the 'ancestors'.  Very cool.
2. 'View Style Information- - This is available  on the 'CSS' menu or, by default, pressing ctrl+shif+y.  You can then click on any element and any CSS specific to the element you clicked will open in a new tab.  Also very cool.

Both of these will likely save me a lot of time when creating templates, or trouble shooting CSS issues.