Firebug 1.0

• Joe Hewitt: web development evolved
• Integrated with Firefox:
• at your finger tips, instant on
• direct reflection of DOM, CSS
• inspect, direct manipulation of debugger
• Huge hit with Web 2.0 developers
• Open sourced Dec. 2006
• Active development ended w/1.05 ~ May 2007

Firebug 1.0 vs Web 2.0

• Firebug awesome, but no eval() debugging
• eval() widely used in Web 2.0
• Basis for Dojo toolkit, JSON data
• No debugging support for eval() in Firebug or Venkman
• Extend Firebug to support eval()?

Firebug 1.1

• Features
• eval() debugging
• executable lines marked
• Call stack side panel
• partial Firefox 3.0 compatiblity
• New XHR spy implementation
...but it was slow, project future uncertain...
• extended plugin architecture
• editor interaction API
• bug fixes

Firebug 1.2

New Enablement UI

• No cost option
• Independent Console/Script/Net controls

Performance

• re-write javascript debugger
• MD5 instead of encodeURIComponent for eval()

New Firebug Lite by Azer Koculu

Firebug Working Group

bug fixes

1.3: Testing and Extensions?

Extensions

• YSlowNetwork Performance analyzer
• Chromebug Firebug for Firefox extensions
• Firecookie for easy access to cookie information
• FirePHP to integrating server-provided PHP debugging information with the Firebug UI
• Pixel Perfect for overlaying mock-ups on top of the real thing to ensure you've got a good implementation
• Rainbow for JavaScript syntax highlighting
• ...More extensions
1.3: extensible then features by extension + QA

Chromebug: Firebug for Chrome

• Multi-window/multi-DOM support
• chrome urls, Firefox components, extensions
• Avoid eating your own arm
• Goal: do more than Venkman+DOMInspector
• demo

Firebug Architecture

Visual Architecture (Chromebug Inspect Demo)

Extension Architecture

• Page Oriented

Extension Points and Plans

Extension Points

• User Interface
• Tabs
• Toolbar buttons, context menus
• Custom logging
• Internals
• Events (init, shutdown, ...)
• Listeners (network monitor, console, ...)

Extension Improvements

• More extension points
• Support for UI (HTML) rich UI repository
• Integration points for existing IDEs
• Integration with web-services

Firebug Architecture

Firebug Users See a single window and tab

Firebug User
tab1	tab2	↓	tab3	tab5
tab1	tab2	tab3	tab4	tab5
Window 1			Window 2
Firefox App
jsd	consoleService		xpcom
Firebug

Firebug sees events from all tabs and all windows

Lots of Firebug work and UI issues come from this difference

Problems at the Moz Interface

onScriptCreated(jsdIScript, frame) Needs

• script type identifiers (top, inner, eval, event, inline)
• info on compilation unit structure (top vs inner)
• filtering on origin window
• a stack frame (ditto all jsd)
• documented event structure

Missing info

• Event handlers
• Memory queries and GC events
• Closure sizes and contents
• setTimeout and setInterval inspection

More Function

• Control Program Counter, Call stack

Beyond 1.4

• Why is this green? Break on mutation events
• What's happening now? Event/Execution monitoring
• It's Javascript stupid: Direct JSON support
• Make it so: Update w/o reload
• It's perfect now: save edits
• No, it's your fault: Integrated JS/C++ crash analysis
• I've seen this before: socialized error correction
• Cross Site Debugging

Firebug 2.0

• jsDebug 2.0 for Web 2.0
• JSD Built in support for dynamics
• redesign API (stack frames pls!)
• Writable PC/frames
• All-event hook
• GC/Memory hooks
• Migrate firebug-service via shim API
• Mozilla 2
• Debug Support for Tamarin