blog
discuss
contribute
documentation

Firebug Breakpoints Demo

These demos illustrate the article Dynamic and Graphical Web Page Breakpoints by John J. Barton and Jan Odvarko, submitted to WWW 2010

New Kinds of Breakpoints

Breakpoints: Quintessential feature of debuggers

  • Find the line of source you want to investigate
  • Set a breakpoint
  • Run the program
  • Debugger halts execution, you poke around

Why Setting Breakpoints On Source Does Not Always Work

  • Large programs: you forget which line of code does what
  • Frameworks: your code is lost in a sea of other code
  • Multi-developer: your code and 26 other folks too

User-Interface Oriented Breakpoints

  • Solution: Breakpoint first then see the line of code
  • Break on UI events: modication, activations, errors
  • "Recognize (browse)" rather then "Recall (search)"
    • Contribution: implementation of many UI event breakpoints in a production debugger

Demos

To run the demos:

  1. Open Firefox 3.5 or newer
  2. Install Firebug 1.5 or newer
  3. Reload this page
  4. Follow the instructions below for each kind of breakpoint

Individual Demos:

Breakpoints in Dynamic Javascript via eval()

Dynamic Javascript with User Supplied Filename

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Load the duck and cat functions by AJAX
  3. Open the Firebug Script Panel and select "payloadCatsAndDucks.js", then set a breakpoint on line 10
  4. Call the Duck and Cat functions
  5. You should halt in the debugger on a breakpoint in dynamically created source code

Note the special comment at the end of the source. This comment is parsed by Firebug to set the file name.

Dynamic Javascript with Generated Filename

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Load the duck and cat functions by AJAX
  3. Open the Firebug Script Panel and select "payloadCatsAndDucks.js", then set a breakpoint on line 10
  4. Call the Duck and Cat functions
  5. You should halt in the debugger on a breakpoint in dynamically created source code

In this case the user code did not give a file name, so Firebug created one by computing an MD5 hash of the file, so that it can reset the breakpoints on reload

Breakpoints on Javascript Execution

Break on Next Javascript Call

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Script Panel
  3. Click the Break on Next or Pause button ()
  4. Click this button
  5. Firebug will break on the event handler

Break on a Generated Event Handler

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Script Panel
  3. Click the Break on Next or Pause button ()
  4. Click this button
  5. Firebug will break on the browser-generated event handler

These simple examples make the Javascript break on next feature look more useful than it is in practical experience. Timer, XHR, and mouseover events trigger break on next far too often in real-world code

Breakpoints on Errors

Break on a Error Shown in the Console

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Console Panel
  3. Click this button
  4. Click the Breakpoint button ()

    5. BUG: The Breakpoint image does not update


  5. Click the Fail on Error button again
  6. Firebug will break on the error-generating line

Break on All Errors

  1. Select the Firebug Console Panel
  2. Click the Break on All Errors or Pause button ()
  3. Click this button
  4. Firebug will break on the error

Note that this feature was previsously implemented as Break On Errors option accessible in Script panel option menu. Use the Break On All Errors pause button within the Console panel now.

Breakpoints on Network Events

Break On Next Network Event

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Net Panel
  3. Click the Break on Next or Pause button ()
  4. Click this button
  5. Firebug will break on the XHR event

Conditional Network Breakpoints

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug Net Panel
  3. Click this button to generate a XMLHttpRequest
  4. Click on the left hand bar to create a breakpoint for xhrDemo.json URL
  5. Right click on the breakpoint and insert following condition count==1
  6. Click following buttons to generate XHR with parameter count set to either to 1 or 2
  7. Firebug will break on the XHR event only if the target URL is xhrDemo.json and a parameter count is available and set to 1

Breakpoints on DOM (HTML) Mutation Events

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug HTML Panel
  3. Use HTML Inspector to find this element
  4. Right click on the element and pick Break On Attribute Change menu item.
  5. Click this button
  6. Firebug will break when the attribute is changed.

Breakpoints on DOM Property Changes

  1. If you are stopped in the debugger, either click the blue continue button or reload the page
  2. Select the Firebug DOM Panel
  3. If you are stopped in the debugger, either click the blue continue button or reload the page
  4. Expand the _testObject to see it's properties
  5. Click on the left hand bar to create a breakpoint for propA
  6. Click this button
  7. Firebug will break when the property is changing.

Breakpoints on CSS Style Rule Changes

This feature not yet implemented, but we have prototype that shows it can work.

  • Click this button

    • Breakpoints on Event Handlers

    This feature not yet implemented

    Breakpoints support for Extensions

    This feature not yet implemented