Question

I have debugged through JavaScript using Firebug more than hundred times without worrying about whats happening there.
I want to know how exactly a Firebug handles JavaScript/DOM debugging.

Say I set a break point on some statement inside a method and start debugging. I want to know what’s going on in there?

Answer 1

When you click on a line to set a breakpoint, Firebug records the file URL and line number in case you reload the page. Then it looks up the URL/line in its internal data structures to decide which Javascript function (called a ‘script’ in Mozilla) you want to breakpoint. Next it calls a Mozilla platform function to map the line number to a program counter relative to the start of the function. Finally it calls the platform to set a breakpoint on the program counter.

Back when you activated the Script panel, Firebug registered callbacks with the platform. One of those, onBreak, handles breakpoints. As the platform runs JS code it check its internal structures to see if the current program counter has a breakpoint set. If so, it stops JS execution and calls back to firebug.

Firebug then looks at the breakpoint to decide if this is a conditional breakpoint, if it has the correct data to support the debugger UI at this breakpoint, and so on. If conditions are ok, it tells the platform to suspend debugging, Javascript execution for the web page, and platform events for the web page. Then it shows the source file for the breakpoint and highlights the line. If conditions are not good, it just continues.

The complex parts come when the platform does no support correct line number to program counter mapping. For example, Firebug has lots of code to deal with eval() and browser generated event handlers.

Questions like these are better on the Firebug newsgroup in my opinion.