Tools for testing and debug

Developer Toolbars

Developer toolbars put lots of tools right at your fingertips - see the css of a site, fill in a form, understand page structure, and, most importantly, get validation of the page for both css and html. They appear at the top of your browser window and can be revealed or hidden from Views, Toolbars, (name of toolbar). Although you will probably do most of your debugging in one browser, it's useful to have tools for the other browser as well for checking for cross-browser problems.

• Firefox (Flock or Seamonkey as well) - Download from Chris Pederick . Also check out some hints on using the toolbar
  
  
• Internet Explorer - download from WAT - web accessibility toolbar
  
  
• Chrome - I haven't found one yet - let me know if you find one.

Other Useful Tools

• 
  Debugging tool for Firefox: http://www.getfirebug.com/ Pops up automatically when errors are encountered or you can manually select the small "firebug" in the status bar at bottom of screen (see right). Here's a video on advanced use of Firebug.
• See list of other useful Firefox extensions for developers
  
  
• 
  HTML Tidy to clean up html source code - can fix problems as well as re-format source code. If it sees a problem with a page in the browser it displays a warning symbol (see right). Or just use an online version of Tidy or an online version of CSS Tidy for CSS.
  
  
  
• 
  Debugging tool for IE: Web Developer Toolbar from Microsoft. This provides a toolbar and a debugging tool. Appears at the bottom of your browser and can be closed from the little x on the left hand top corner and opened from Tools, Toolbars, Explorer Bar, IE Developer Toolbar

• Another accessibility tool for IE: http://www.visionaustralia.org.au/info.aspx?page=614
• A handy tool for measuring graphics on your brower screen:
  MeasureIt for Firefox