Web Developers Need the Firefox Web Developer Extension
by Paul Flyer
At first I was underwhelmed. What is all the buzz about the Web Developer Firefox Extension? I installed it, looked at it with a look of sheer “So What?” and did something else.
I returned to it several days later. I opened my site in the browser and clicked the “display div order” function. There, displayed in my browser window, was my site with the div tags displayed around the content. If only I had this when I developed the site! What a great debugging tool! What a help this would be to figuring out various CSS code! So, here I am, humbling recommending the Web Developer Extension.
For beginners, the tools available in this extension will help make web development a little bit easier. The tool installs as an additional toolbar within Firefox. All functionality is accessible via a series of dropdowns. Here is a list of the main menus and functionality:
- Disable
- Cache
- Java
- Javascript
- meta redirects
- minimum font size
- page colors
- popup blocker
- referrers
- Cookies
- Disable
- clear session cookie
- delete domain cookies
- delete path cookies
- view cookie information
- add cookie
- CSS
- Disable by type
- disply by media type
- view css
- view style information
- edit css
- use border box model
- Forms
- display form details
- show passwords
- view form information
- convert form methods
- convert select elements to text inputs
- enable auto complete
- enable form fields
- clear radio buttons
- make form fields writable
- populate form fields
- remove maximum lengths
- Images
- disable
- display alt attributes
- display image dimensions
- display image file sizes
- display image paths
- find broken images
- outline images
- view image information
- hide background images
- hide images
- make images full size
- make images invisible
- replace images with alt attributes
- Information
- display access keys
- display anchor
- display block size
- display div order
- display element information
- display id and class details
- display link details
- display object information
- display stack levels
- display tab index
- display table depth
- display table information
- display title attributes
- display topographic information
- view anchor information
- view color information
- view document outline
- view document size
- view javascript
- view link information
- view meta tag information
- view page information
- view response headers
- Miscellaneous
- Clear private data
- display line guides
- display ruler
- show comments
- show hidden elements
- show window chrome
- edit html
- linearize page
- make frames resizable
- small screen rendering
- visited links
- Outline
- outline frames
- outline headings
- outline table cells
- outline tables
- outline block level elements
- outline deprecated elements
- outline positioned elements
- outline external links
- outline links without title attributes
- outline current element
- outline custom elements
- show element names when outlining
- Resize
- display window size
- display window size in title
- resize window
- 800×600
- zoom
- Tools
- validate css
- validate feed
- validate html
- validate links
- validate section 508
- validate wai
- view speed report
- dom inspector
- java console
- javascript console
- validate local css
- validate local html
- View source
- view source
- view generated source
- options
- persist styles
- reset page
- option
- help
- about
While some of this functionality is already available from the browser itself (like view source), a great deal of it is not. The Web Developer Extension should belong in every beginning web developers toolkit.
[tags]firefox, web_+developer[/tags]
Be sure to review our list of recommended web tools.
