browser-based developer tools

I've discovered - to my surprise - that a lot of developers aren't aware of tools like the Firefox Web Developer Extension. I guess I was assuming knowledge, against my own advice :) So anyway, I thought I'd mention a few useful browser-based tools for a wide range of testing and development. Feel free to comment with your own recommendations!

  • Firefox Web Developer Extension (Firefox has a stack of developer extensions). Example features:
    • enable/disable scripting, style, images, caching, cookies, etc
    • resize window to 800x600 (or any other size)
    • send current page to validation tool
    • extract properties information about the page, image lists, links, etc
  • Patrick Lauke has written an entire article on using Firefox for accessbility testing: Get Tooled Up:'Evaluating Web Sites for Accessibility with Firefox', Ariadne Issue 44
  • NILS Web Accessibility Toolbar (for IE/Win). Example features:
    • enable/disable scripting, style, images, caching, cookies, etc
    • resize window to 800x600 (or any other size)
    • send current page to validation tool
    • colour contrast checker
  • Opera 8 (scroll down to Web Development). Opera natively includes many/most features included in other browsers' addons:
    • enable/disable scripting, style, images, cookies, etc (tip: use F12 - Quick Menu)
    • send current page to validation tool
    • linearise page (ie. disable tables etc)
    • small-screen testing mode
    • reload from cache: Edit the source of any open Web page and view the result instantly...great for debugging.

So, what tools do you use?

Update: there is a developer toolbar for Opera, check out nontroppo.org/wiki/Opera.

Update: The good people at Vision Australia have released a version of their toolbar for Opera, check it out - Resource Center - About: WAT for Opera.

Comments

  1. Anonymous Anonymous, July 19, 2005 11:44 pm: 

    I have used the tools listed at:

    http://www.d.umn.edu/itss/support/Training/Online/webdesign/tools.html

    The webdev listserv also announces new tools:

    http://www.d.umn.edu/itss/support/Training/Online/webdesign/webdev_listserv.html

  2. Anonymous Anonymous, July 20, 2005 12:59 am: 

    I use a couple of the scripts at Userjs.org to do things that aren't native to Opera yet - particularly the so called frameset-links (it actually does a lot more cool stuff).

    This is the fundamental extension mechanism for Opera. It has a stricter security model than Firefox extensions though.

    For simple services stuff I also show bookmarks in the panel - things like dictionaries.

    Finally, I use a modified version of the w3-dev menu, with links to the tools that I really like.

    -- chaals@opera.com

about

Web development and standards, as seen by Ben Buchanan.