FirefoxExtensions

The following is a list of useful extensions that you can 'add-in' to Firefox to help with web development. Please feel free to include other useful extensions here if they are relevant to web development.

Matthew's Favourite Firefox Extensions

• Total Validator
  • Perform multiple validations and take screen shots in one go rather than using separate tools. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the Pro desktop tool.

• UrlParams
  • Shows you the GET and POST parameters of the current website in the sidebar.

• Window Resizer
  • The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.

Other Students' Favourite Web Development Extensions

• Measure It (Recommended by Cara Hughes 0615410)
  • Instead of moving to and from your graphics program to check image sizes, this tool allows you to measure images and borders without taking screenshots etc.

• Split Browser (Recommended by Cara)
  • This is one of the best Firefox extensions I have come across so far. It allows you to split your browser into multiple windows so you can view as many websites as you like at one time. You can even have multiple tabs in the seperate windows, but be warned- you may find that you get a bit addicted to it!!! I use it to group different types of websites togther, it is really useful when transferring from the Wiki tutorials and my assessment website.

• Web Developer Toolbar (Recommended by Mark James)
  • "The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools." This extension allows you to edit your CSS code on-the-fly, along with a whole host of other useful tools.

• Fangs (Recommended by Mark James)
  • Tool to check the accessibility of a website. "Fangs is a Firefox extension that displays a text representation of a web page similar to how a screen reader would read it."

• Live HTTP Headers (Recommended by James Dalley 9709438)
  • Must have tool... Can't believe it's not here already!! View Headers sent and returned accessing webpages, must be opened first or see reduced information by hovering over web server name in lower right of page(ie Apache, ISS or GWS &c).

• Firebug (Recommended by Lukasz Korecki)
  • Another must-have. All purpose editor/debugger - you can write and inspect your CSS/(X)HTML/Javascript, look up the DOM tree etc. Also provides rulers, current element highlighting and element size. "Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page."