An Ode to the Developer Toolbar

Published 29 July 05 by Justin French, 1 comments

So, in case you haven’t heard of it, haven’t used it, or don’t get it, here’s my top ten reasons why all web developers need it.

1. The in-browser CSS editor is a great way to get instant feedback on style changes. No need to save the text file, switch to a browser, refresh the page, etc. Just edit the styles in the side bar, and watch the changes happen in the browser window in real time. It works with multiple style sheets, it works on live servers (so you can test styles on things like a Textpattern site which lives on a server) — once you’re happy, copy the styles to your real style sheet. This is a huge timesaver.
2. You can easily and quickly disable almost anything — styles, colors, Java, JavaScript, cookies, images, animations to get a quick feel for how your site may look to others.
3. You can highlight images which have missing or empty alt attributes.
4. You can view the response headers, cookies and all sorts of HTTP goodies, which is a life saver when debugging cookies, sessions, etc.
5. You can clear HTTP Authentication caches, visited links and cookies with ease.
6. You can view a beautiful topographic map, outline block elements, outline custom elements and many other objects to help you quickly debug nesting or float issues.
7. You can validate local HTML and CSS, which is perfect for validating code which isn’t on a live server. The alternative is to copy/paste the source code into a validator, so this can save you heaps of time and energy.
8. You can resize the browser window to specific sizes (eg 800×600) with ease.
9. It’s highly configurable (keyboard short cuts, validation URLs, etc), so it can work the way you want to work.
10. It has nice JavaScript debugging bits (which admittedly I don’t use much).

Now, I’m aware that some of these tools are available in some other form in almost every browser (either as built-in functionality, bookmarklets and plugins), but this is the only solution that I know of which puts all this power in one place, easily accessible and utterly usable.