A Party in a Toolbar
I recently began doing some web development at work. As a result, I ended up poking around the Firebird Extension page looking for useful tools. What I found was Chris Pederick’s Web Developer Extension. When combined with the DOM Inspector present in most Firebird builds, this may be the only developer tool I ever need.
WDE adds a toolbar to your Firebird (or Mozilla, via separate installer) window, below the bookmarks bar and above the tabs. Normally I dislike anything that adds a toolbar; I’m jealously protective of my screen real estate. In this case, I’m sold - this toolbar is worth the pixels. Here’s a rundown of what you get.
The tool bar contains 10 dropdown menus, filled with useful goodies, plus a view source button (the only feature I don’t use, since ctrl+U is faster and ingrained in my skull). On the right hand end of the bar are three small icons: Render Mode (Quirks or Standards Compliance, clicking opens page properties dialog), Javascript errors (clicking opens javascript console), and what I call the “Power Button”. Clicking the Power Button disables the entire toolbar, and clicking again re-enables it. As minor as this sounds, I’ve found it to be a huge help. When the toolbar is diabled, the icons and text are dimmed, and become much less intrusive. Since I use my Bookmarks bar constantly, leaving the Webdev toolbar off unless I’m using it really reduces visual noise when looking for a bookmark.
So what’s in the menus? Plenty. One menu lets you diable things, like cookies, image animations, images, Java, Javascript, color, referers, and stylesheets. The CSS menu integrates all of the functionality of the EditCSS extension which has served me so well for so long (in fairness, I’ve had some trouble with this integrated version, but I haven’t tried a clean profile yet). There’s a Forms menu, that lets you convert GETs to POSTs and vice-versa, display form details, make fields writeable, show passwords, and more. The Images menu lets you hide all images, find broken images, and replace images with ALT attributes. You can display image paths and/or image image dimensions, which appear as tooltip-sized labels directly in the page for easy viewing. You can also outline any of the following: images without an Alt attribute, images with a blank Alt attribute, and images with no Title attribute. Handy for the accessibility-minded developer.
The Information menu gives quick access to all sorts of information, including page headers, a speed report from WebSiteOptimization.com (in another tab), and even a report showing all cookies for the current page. From the Misc. menu, you can clear cache, clear HTTP auth, clear cookies (great when debugging your server-side session management code), zoom in and out, and more. It even contains a submenu with links to a number of W3C specs - conveniently opened in another tab, of course.
The Outline menu lets you outline various page elements, such as table cells, block elements, and links without title attribs; or you can specify custom elements to outline. The resize menu lets you see the size of your current browser, resize the window to 800×600 to make sure it’ll work on Grandma’s PC, or set an exact custom size. The Validation menu incorporates some of the functionality of Checky by providing one-click validation from a number of services, although not nearly as many as Checky. You can validate your CSS, HTML, Links, Section 508 Accessibility, and WAI Accessibility. For CSS and HTML there is also a “validate local” option, which automatically saves the current page to disk and uploads it to your validator. Perfect for checking dynamically built pages on a firewalled intranet. The Options menu lets you change a few things, including the URLs used for the validator menu.
I’ve been using this toolbar for about a week, and I’d hate do anymore development without it. It’s really that good. If you’d like to give it a try, you can install it directly from the Web Developer Extension homepage.
Update: Received a nice email from Chris. He pointed out an assumption I made that was incorrect, regarding the validate local feature. To quote Chris:
It doesn’t actually save the file to disk, but rather creates a new request in the background to grab the source and send it as text in a POST to the validator. I minor difference, but it can affect the way it works for dynamic pages etc.
Thanks Chris! He also asked about the problem I head with CSS editing, but I’ll have to follow up on that next week. The problem was at work, and thankfully, I’m off until Tuesday. However, I tried using the CSS Editing on my powerbook, and it seems to work nicely. It has the additional feature that each stylesheet is loaded as a separate tab in the edit pane.
You can leave a response, or trackback from your own site.