Most of the tools here are somewhat niche - if you need to bash sprockets of type X, then they’ll help.
But there’s a tool which pretty much everyone even tangentially involved in working on web projects should install and that’s web developer toolbars.
The Firefox Web Developer Toolbar adds a massively useful set of tools to your browser, including the ability to turn stylesheets and images on and off easily to simulate the experience of different visitors, disable your cache, disable Javascript, measure parts of your design using a pixel ruler, view the generated source (after all the scripts have run), and check the design at different screen resolutions. Most useful of all, it lets you hover over different elements of the page, highlighting them in red outline, and understand which elements, IDs and classes affect them - something that makes CSS debugging much easier.
It’s also worth installing the IE Developer Toolbar which adds similar (but not quite so sophisticated) tools to the notoriously fickle Interner Explorer.
