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.
Colorzilla link
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.
Firebug link