« The Zen of CSS Web Design. | Main | Macs creating files with "._" prefix on servers? »

Great Web Developer extension for Firefox.

We have a long list of tips on our "must write" list. Near the top of that list is a great tool we use all the time in Firefox called Web Developer.


Download: Chris Pedrick's Web Developer extension.

This free extension adds a developer toolbar to the top of Firefox or Mozilla web broswers. It is great for web development because it lets you to see how any web page is built. You can easily read or copy a site's CSS, turn on and off content, etc. It's awesome for picking apart any site!

Like This Tip? Make sure you don't miss the new tips coming next week:

Weekly Email Tips — or — RSS Feed (What's RSS?)

The long list of features this tool offers is one of the reasons we've had a harder time writing it up as a tip — there are so many different ways developers use this tool. Here is a quick list of some of the more useful features for web developers:

  • Display the size in pixels of any block or image
  • Add a graphic outline around all block-level elements to quickly identify them
  • Verify that all links work
  • Outline any images that lack alt text
  • View any cookies set by the current site
  • Validate HTML and CSS
  • Turn off JavaScript to see how a page works without it
  • and more

Source: We've got several people to credit and thank for this tip. First off is Brian Wood, director of training at eVolve Computer Graphics Training in Seattle who turned us onto this tool a long time ago. The December 2005 issue of Design Tools Monthly which kept this tip on our radar. And finally Brent LaMotte, interactive development manager with Horton Lantz & Low.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Recent Tips

Powered by
Movable Type 3.2