The Web Developer toolbar, which is (1) the #1 hit on Google for “Web Developer,” and (2) now compatible with Firefox 3 beta, is totally awesome. You may recall that, in the past, if you had text after a bulleted list or similar on this page, the text would suddenly be mashed together. I never took the time to fully look into it, but it always irked me.

A quick “Outline… Outline Block Level Elements” drew colored boxes around each element of the page, which was exceptionally helpful. This shows the problem: posts start off inside a <p> tag, and adding a list or similar closes the <p> tag. This would have been an easy catch, except that the list looked fine. Upon a closer review, it’s because the lists specified the same line-spacing, thus looking right. While I most likely could have solved this by staring at the code for a long time, Web Developer made it much easier to spot: the first text is inside one box, followed by the list, but the other text is floating outside, leading to a quick, “Oh, I should look at how the <div> is set up” thought, which ended up being exactly the problem. (There’s a bit of excessive space now, but that’s caused by me using PHP to inject linebreaks.)

Web Developer also includes a lot of other useful tools, including the ability to edit the HTML of the page you’re viewing, view server headers, resize non-resizeable elements frames, show page comments, change GETs to POSTs and vice-versa, and much more. Whether you do design full-time, or if you just occasionally fix things, it’s worth having. And you can’t beat the fact that it’s free.