Dynamic and graphical web page breakpoints

Breakpoints are perhaps the quintessential feature of a de-bugger: they allow a developer to stop time and study the program state. Breakpoints are typically specified by selecting a line of source code. For large, complex, web pages with multiple developers, the relevant source line for a given user interface problem may not be known to the developer. In this paper we describe the implementation of breakpoints in dynamically created source, and on error messages, network events, DOMmutation, DOMobject property changes, and CSS style rule updates. Adding these domain-specific breakpoints to a general-purpose debugger for Javascript allows the developer to initiate the debugging process via Web page abstractions rather than lower level source code views. The breakpoints are implemented in the open source Fire-bug project, version 1.5, for the Firefox Web browser. © 2010 International World Wide Web Conference Committee (IW3C2).