GetFirebug logo

Firebug Lightning Demo

Velocity 2010, June 23, 1040am Ballroom ABCD

John J. Barton, IBM Almaden Research Center
Jan Odvárko, Mozilla Corp.

getfirebug.com

Note these slides are also demos if you open Firebug 1.6+ and reload

Scrolling Tab Panel

Firebug Swarms: Tested Extension Collections
Coming Soon!
1.5: Firebug Panels Overflow
1.6: Panel Scroll and Selector

Firebug Navigation

  • Well known back/forward pattern
  • Go back to previous panel
  • Go back to previous file (within a panel)

Tracking Paint Events

  • Displaying paint events in the timeline.
  • Page load optimization (the less repaints the better)
  • See the green vertical lines in the Net panel

Export HTTP Logs

  • The log format is: HAR
  • HAR is supported by many tools:
    • Firebug/NetExport
    • HttpWatch
    • PageSpeed (HAR2PS)
    • ShowSlow
    • DebugBar
    • WebPagetest
    • GTmetrix


HAR allows interoperatibility among HTTP tracing tools.

Break On Network Event

  1. Select the Firebug Net Panel
  2. Click the Break on XHR button ()
  3. Execute XHR:
  4. Firebug will break on the XHR event

Conditional Network Breakpoints

Breakpoints on HTML Events

  1. Use HTML Inspector to find this element
  2. Right click on the element and pick Break On Attribute Change menu item.
  3. Click this button

Breakpoints on Cookies

Extensible Breakpoints

  • Cookies panel
  • Manage Cookies & Permissons
  • Break On Next Cookie Change
  • Conditional Breakpoints

Summary & Links. Questions?

This demo with Firebug 1.6a13, http://getfirebug.com/releases/firebug/1.6X