Mozilla Developer Tools

There has been some talk about creating an "Official" suite of Mozilla Developer Tools. This page is intended to be used as a brainstorming "whiteboard" of sorts where we can all jot down and discuss ideas.

What sorts of Developer Tools might we want?

Design/Development

• User Agent emulation
• Color eyedropper (hex and rgb colors)
  • include palette creator/colour blender
• Something that makes complex CSS positioning less painful
• JavaScript Snippet Sidebar
  • reusable chunks of JS for common functions
    • DOM manipulation
    • visual effects (slides, fades, etc)
    • AJAX methods (call server-side script, parse return object)
• XUL Snippet Sidebar
  • reusable chunks of XUL/JS for common UI elements
    • UI controls
    • wizard pages
    • pref panels
    • status bar notification widgetry
•  ???

Packaging

• XPI packaging tool
• maxversion modification tool
•  ???

Debugging

• DOM Inspector
• JavaScript debugger
• JavaScript console
• AJAX Debugger (not sure if this one makes sense at all)
• HTTP Headers inspector/viewer
•  ???

Site Testing

• Validation Tools (XHTML, HTML, CSS, RSS, RDF, etc)
• Browser feature disabler (Cookies, Cache, JavaScript, CSS, Images, Popups, etc.)
• Window resizer (640x480, 800x600, etc)
• AJAX latency emulator
•  ???

Accessibility Testing

• Screen reader emulation
• Visual impairment emulation (colorblindness, screen zoom testing...)
• Accessibility rules validation
•  ???

Libraries/Toolkits

• AJAX Toolkit
• DHTML Libraries
•  ???

Optimization/Cleanup Tools

• CSS Inspector/Optimizer
• Markup tidy tool
  • replace tabs with spaces
  • close hanging tags (I'd imagine this to be hard)
  • update depricated elements
•  ???

Security

• Best practises & guidelines
• Pre-built SSL or crypto libraries for public use
• Penetration testing tools?
•  ??

Reference

• Developer Reference Sidebar
  • akin to the old DevEdge sidebar, we get this request at lot at MDC
    • XHTML Reference
    • CSS Reference
    • XUL Reference
•  ???

Existing Developer Tools

Provided as a reference/source of ideas:

• DOMi
• Venkman
• Web Developer Toolbar
• User Agent Switcher
• MeasureIt
• Live HTTP Headers
• Aardvark
• ColorZilla
• Fangs
• View Formatted Source
• View Rendered Source

Other Example Developer Tools

• Web Accessibility Toolbar