Debugger Architecture: Difference between revisions

The Script Debugger in Firefox is composed of a number of separate subsystems that work in concert to provide this user experience. This document will hopefully serve as a guide for everyone who would like to have a better understanding on how it works, as well as the reasoning behind some of the design decisions.

There are two main parts to the Script Debugger: the UI bits and the Debugger server that manipulates the script that is executed on the page. These two parts communicate through the [https://wiki.mozilla.org/Remote_Debugging_Protocol Remote Debugging Protocol] in a traditional client-server architecture, exchanging messages specified as JSON objects. The protocol implementation resides in toolkit/devtools/debugger, while the debugger UI can be found in browser/devtools/debugger.

The debugger server consists of the files in toolkit/devtools/debugger/server. The main module is dbg-server.jsm. This module creates a sandbox in a separate compartment and loads the dbg-server.js code in it. dbg-server.js contains the core server logic that handles listening for and responding to connections, handling protocol packets and manipulating actor pools. For more information on actors see the [https://wiki.mozilla.org/Remote_Debugging_Protocol Remote Debugging Protocol]. The other two files in that directory contain definitions for particular families of actors. dbg-script-actors.js specifies essential actors for debugging a JavaScript environment: thread (or JavaScript context) actors, object actors, (stack) frame actors, environment actors, breakpoint actors, etc. dbg-browser-actors.js contains actors pertinent to a web browser, like the root actor and tab actors. These files use the [https://wiki.mozilla.org/Debugger Debugger API] for debugging the script in the page.

Outside of the server/ directory, we can find 3 separate things. The first is dbg-client.jsm, a module for hiding the remote debugging protocol behind an easy to use [https://wiki.mozilla.org/Debugger_Client_API JavaScript API]. The second is dbg-transport.js, which contains the low-level code that handles the protocol connection for both client and server. And the last thing is nsIJSInspector, a native helper component for entering and exiting nested event loops.