How the web developer toolbar can help you cut corners
The web developer toolbar Firefox addon by Chris Petrick is by far the one Firefox extension I would hate to be without. If you’re a developer, designer, user experience analyst, or an SEO, I highly suggest checking it out as it will ultimately save you loads of time. Here are my favorite uses.
- Scenario 1 – Disable JavaScript
- Scenario 2 – Disable Styles
- Scenario 3 – Editing CSS on the fly
- Scenario 4 – Populating Form Fields
- Scenario 3 – Outlining Block Level Elements
First off, here is what the web developer toolbar looks like in your browser. It’s a short bar that appears below your navigation toolbar . You have the options to display only text, only icons, or hide the toolbar altogether.
Scenario 1 – Disable JavaScript
A good developer will always keep accessibility in mind when implementing applications. There are a good chunk of users out there who might not use an A-Graded web browser or just might browse with JavaScript disabled. The Disable >> Disable JavaScript option can help you test your development efforts to ensure a good experience for such users. User Experience analysts might use this tool when doing a website audit for a client – to check on accessibility.
Use this tool on digg.com‘s homepage to see it in action with its login. When JS is enabled, users get a slick experience when attempting to login. The text inputs fade into the page. When JS is disabled, users are taken to a login page.
Scenario 2 – Disable Styles
The CSS >> Disabling Styles feature is not necessarily a powerful resource, but rather gives me a quick assessment of the integrity of a website’s UI. If I notice plenty of left-aligned text, headines, and bulleted lists, I can make a fairly safe assumption that the UI was built with web standards and accessibility in mind. If I see numerous amounts of spacer and foreground images and text laid out in grids, the website is probably poorly coded or even worse using a table-based layout – not much forward-compatibility in mind here.
Style comparison for the The Market Theme’s website:
The Market Theme’s website degrades nicely, showing plenty of linked text and content.
Style comparison for the Papa Ginos website:
As you can see here, there are too many images files, no headlines or text in view. If you want to make your site as search engine friendly, do not use the Papa Ginos website as guidance. SEs need to read text – alt tags just won’t cut it.
Scenario 3 – Editing CSS on the fly
This is definitely one of my favorites. Don’t edit your css, save and then preview – see it all happen on the fly with the CSS >> Edit CSS feature. This is a great time saver. If I’m doing a lot of editing via this method, I always make sure to back up my changes in a text file on the side just incase.
Scenario 4 – Populating Form Fields
Ever make a long form and then have to test it, find yourself typing in every input/textarea/etc? Let the Forms >> Populate Form Fields do this for you. The only downside is the tool not knowing to input certain formats to appease validators like phone numbers. Laziness for life.
Scenario 5 – Outlining Block Level Elements
The Outline >> Outline Block Level Elements feature gives me a quick visual when writing XHTML. I can see what might be too wide or too short or what might have too much of a margin.
There are a lot more excellent tools such as:
- Display alt information for every image on the page – helpful for SEOs during a site audit
- Edit HTML on the fly!
- Outline custom elements – outline only the specific elements you want (a, i, div, etc)
- Resize window to mimic other resolutions
- One click links to XHTML and CSS validators
What’s your favorite Web Developer Toolbar usage?
2 Commenters