When building a house, a carpenter or a construction worker will need to use several tools to get the job done correctly.  Though some tools serve the same purpose as others, not all tools are created equal.  The same concept applies to building or designing a website.  Lucky for us designers, each browser comes with a marketplace where users can browse and download any tools they may need for the job.   These tools can come in many different forms: Add-ons, Plugins, Extensions, and more.  For the sake of this article, let's just stick with the generic term of 'add-on'.

Depending on what type of tool you need, you may find yourself trying out different types of add-on before settling on your final arsenal of tools.  Even then, you will always want to keep up-to-date with the latest and greatest tools of the trade, so keep an eye on your favorite browser's marketplace for new updates.  What's important to remember is that there is no 'wrong' or 'right' set of tools.  What is important to know is that although there are general 'tools of the trade' each designer has their own style and process of creating a website, so feel free to get crazy and experimental.  As long as you feel competent with your skills and tools, and are able to solve any problem that confronts you, you'll be set.  Here are just a handful of tools I like to use for my favorite browser - Firefox.  The general purpose of these add-ons are ubiquitous across browsers, so you should be able to find an equivalent version if you prefer Chrome, as many designers and developers do.  Their primary purposes may inspire you to keep looking in that category for even better versions than my own, so go nuts!

First and foremost, the number-one tool that you must have is Firebug.  If you plan on making a website at all, it will be a bajillion times more difficult if you are working without Firebug.  Firebug allows you to view and edit the code and markup of a page that you are viewing directly in the browser.  This is great for quickly changing some CSS or checking your Javascript Console for coding errors.  Firebug also does much more, so I encourage you to read up on it and learn of it's full potential.

When working with color, I'm sure you've run into scenarios where you have to go back and forth between documents to grab a hex code or some RGB values.  It can get tedious and time-consuming, so I like to use a color picker called ColorZilla which automatically copies the hex code of anything that I choose with my color picker.  This especially comes in handy when I'm mocking up a site in Photoshop and have to double-check or add the color of something that already exists on a client's website.  It's accurate, easy, and saves time!

If you're just starting out, there's nothing worse than completing a design for a piece of a site, slapping it online, and then realizing that it's not the right size.  Getting the right dimension for that banner space or determining your available screen real estate is important if you plan on working fast and accurately.  I recommend using a measuring tool like MeasureIt.   It will come in handy if you find yourself having to add something new into a website design when you have no other reference for the physical dimensions of said design.

I use this almost every day - even when I'm not designing anything!  I've found that this comes in handy when I have to replicate a page, or overlay or include something new in an existing site.  I also use this for documentation in my work life and personal life when I need proof of a receipt or to grab something that I know won't be around online forever.  There are several screen add-ons available, but I strongly recommend getting one that is capable of capturing the entire page - not just what is visible in your browser's viewport.  I like to use Awesome Screenshot.  It will allow you grab the entire page, and then annotate, crop, redact, and more.  Useful for more than just web design, but just as important in the web design process when necessary.

Nowadays, everyone browses the internet on countless devices.  The types and sizes of devices will only continue to evolve over time, so it's always best to start thinking about Website Responsiveness as early in the process as possible.  Although this isn't a plugin, I've found Victor Coulon's Responsive Design Bookmarklet to be a very handy little tool that I use for development at times.  This will allow you to test your responsive designs within a single browser as you code.  Careful though, it's not 100% fool-proof.

Seeing as how Bonsai Seattle specializes in SEO, will also recommend some SEO add-ons as well, but these are less useful for the design process.
There are tons of other add-ons out there and I strongly encourage you build your own toolbox.  Find what works for you and expand on it.
If you want to read more about great add ons, check out these links:

    15 Helpful In-Browser Web Development Tools (http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/)
    Five fantastic Firefox add-ons for web designers and developers (http://www.netmagazine.com/features/five-fantastic-firefox-add-ons-web-designers-and-developers)
    33 fantastic Chrome extensions (http://www.netmagazine.com/features/33-fantastic-chrome-extensions)