Internet Explorer Developer Toolbar

If you're doing complicated CSS markup, or just doing something simple like hacking up the CSS on your MSDN blog (for example :-)), there's a tool you must have: the Internet Explorer Developer Toolbar.

IE Developer Toolbar

It adds the above toolbar to your browser, which can be used to quickly and easily drill down into the details of the structure of the page you're viewing: the DOM, the HTML and CSS markup, image sizes, and so on. It also has handy features for resizing your browser to specific resolutions such as 800x600, selectively disabling CSS or images or Javascript, and -- my favorite -- a way to put an outline around every div, table, or other arbitrary element on the current page. When you're trying to rip off other people's great ideas for standards-based web design (er, I mean "trying to get creative"), this thing is a Godsend.

It works with Beta 2 of Internet Explorer 7, and the combination of the features mentioned above and IE7's well-implemented tabbed interface makes for a very productive combination. Go get them both -- they're free!