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!
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.
