Web Page Debugging

• Web Debugging is Important: the World Wide Web!
• Web Debugging is Difficult: Web 2.0, big apps, complex pages.
• Web Debugging is extra important and difficult: User Interface debugging!

Firebug: Firefox Extension

Click the icon to open Firebug UI.

• Firebug a Web Page debugger embedded in Firefox.
• HTML, CSS inspection, Javascript debugging, Net traffic view, ...
• >2 million users

Javascript breakpoint debugger integrated with UI inspector

New Kinds of Breakpoints

Breakpoints: Quintessential feature of debuggers

1. Find the line of source you want to investigate
2. Set a breakpoint
3. Run the program
4. Debugger halts execution, you poke around

Setting Breakpoints

Real systems are hard to debug

• 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

Conventional breakpoints require comprehensive code understanding

Contribution

implementation of dynamic and user-interface-event breakpoints in a production debugger

Dynamic Javascript Breakpoints

Widely used by JS frameworks e.g. eval() in dojo No identifiers for eval() buffers Breakpoints require unique buffer ids

Implementations

1. Hack in identifiers with //@ src=URL at the end of buffers, or
2. Compute MD5 hash of buffers to identify them.

Detailed implementation depends on non-standard javascript debug APIs

Generated Filename

Dynamic Javascript with Generated Filename

Load the duck and cat functions by AJAX Load Anonymous Animals Open the Firebug Script Panel and select evaluated script, then set a breakpoint on line 10 Call the Duck and Cat functions Prod Anonymous Animals You should halt in the debugger on a breakpoint in dynamically created source code

Graphical Breakpoints

Problem

• Debugging is reasoning back from (bad) results to causes
• When the result is part of a stream, time helps us find the cause
• When the result is graphical, causes are harder to find

Solution

• Breakpoint on UI events, modification, activations, errors
• Recognize rather then Recall

Two examples, XHR and HTML

Network Event breakpoints

AJAX applications wide spread Firebug Net panel shows requests, response Which JS function caused the request?

Implementation

1. Intercept request start calls,
2. Compare XHR URLs to XHR breakpoints
3. Halt Javascript and open debugger on match.

Break On Network Event

Select the Firebug Net Panel Click the Break on XHR button () Execute XHR: XHR Firebug will break on the XHR event

Conditional Network Breakpoints

• http://.../xhrDemo.json?param=1 Run
• http://.../xhrDemo.json?param=2 Run

UI Modification Breakpoints

Dynamic UI construction Break on addition/removal of elements Dynamic UI modification Break on attribute modification

Implementation

1. DOM Mutation Event handlers (standard)
2. Halt Javascript and open debugger

Breakpoints on HTML Events

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

Breakpoints on Cookies

Extensible Breakpoints

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

Related Work

• Contribution: Dynamic and Graphical Breakpoints
• Find source by breaking into it
• Broad integration of graphics and breakpoints
• Coherent user experience: break into code from anywhere
• Same ideas should work in all browsers
• Other breakpoints we implement overlap:
• Break on Error resemble Eclipse break on exception
• Break on DOM changes resemble break on memory writes
• Other graphically-oriented debuggers: Whyline, Firecrystal
• Not easily integrated with breakpoint debugging.

Summary & Links. Questions?

Dynamic and Graphical Breakpoints for Web debugging For large user interface systems on the Web Deployed in Firebug 1.5 Home: getfirebug.com Blog: blog.getfirebug.com Discusssion Group: groups.google.com/group/firebug Issue List: code.google.com/p/fbug/issues/list