While working on the current week’s extra credit assignment (converting a page based heavily on tables for layout to a page based on divs), I came across a few useful Firefox plugins for web development:

• Firebug: Lets you interactively inspect and change CSS styles for elements on any page. One of the really nice features is that is shows the values for all the properties for a given element. It also shows the inheritance stack, i.e., which values are overwritten by later elements. This can be useful for finding unexpected inherited style settings. (I have used this a bit before, but not the capabilities I used this week.)
• MeasureIt: A very simple plugin that let you add a “ruler” button to the toolbar. This then brings up a tool to allow you to measure areas on the page. This is very helpful for adjusting layout, spacing, and alignment.
• ColorZilla: Adds a color picker tool. This tool allows you to select any item on a page and find it’s color. You can also directly copy the hexidecimal RGB color to paste in your CSS/HTML file.