The macosxhints Rating:
[Score: 10 out of 10]
- Developer: Chris Pederick / [Product Page]
- Price: Free
Yes, it's another web-development-related PotW. Sorry, but I'm pretty heavily into the new site's development, and have been spending way too much time in multiple browsers, editors, and forums figuring out how to make the new site even better. The Firefox Web Developer Extension (WDE for short from now on), which I discovered after reading about it in the comments to a previous PotW, has become an invaluable part of the process. This free plug-in adds a handy toolbar, just above your tabs, with all sorts of interesting features. In the image at the top left of this hint, for instance, it's outlining all of the table cells on CNN's homepage (click the image or here for a full-size version):
In addition to making table layouts relatively obvious, the other WDE feature I've been using a lot is the "Edit CSS" menu -- this puts the site's CSS in the Firefox sidebar, and any changes you make in the sidebar are immediately reflected in the page. There's even a "Reset all," which will restore the functional CSS after I mess it up with my changes :). This is a great way to learn about CSS, as you can see what each line does to the page (note: don't start with something complex like CNN.com!).
This is just scratching the surface of WDE; among its myriad other features are the ability to find broken images, display image dimensions, find missing ALT and TITLE attributes, display a whole bunch of info about the page, clear the cache (very useful, even if you're not a web developer), reset the 'visited' state of all links on the page, resize the window for smaller displays, and an easy way to send the page to the HTML, CSS, etc. validators.
If you do any web development at all, you'll probably find a use for the WDE -- I know I've given it quite a workout in the few weeks I've been using it!

