I. The "Web Developer" Firefox/Chrome browser extension.
This extension adds a toolbar to your browser that has tons of useful tools like: auto-populating forms, disabling browser cache, deleting sessions, just to name a few. A week after installing this you will wonder how you ever got along without it.
Web Developer link
II. The "MeasureiT" Firefox/Chrome browser extension.
This browser extension adds a tool that allows you to measure the dimensions of anything you want on a web page. Very useful for template development.
MeasureIt Firefox link
MeasureIt Chrome link
III. The "Colorzilla" Firefox/Chrome browser extension.
This amazing little tool adds a color eyedropper to your browser that allows you to find the exact color for any part of a website. This tool can be quite useful when choosing the colors scheme for a template.
IV. The "Firebug" extension for Firefox
There is a reason that this extension is the most popular web development tool for Firefox... This tool lets you dissect all the elements of a website, and I mean all of 'em! This tool does everything from tracing css styles to finding and fixing website load time hangups. As their tagline states, Firebug is Web Development Evolved.