Debugger Architecture: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 1: Line 1:
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.
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 gain a better understanding on how it works, as well as the reasoning behind some of the design decisions.


== Overview ==
== Overview ==


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.
There are two main parts to the Script Debugger: the front-end part and the Debugger server that interfaces with the script that is running on the page. These two parts communicate through the [https://wiki.mozilla.org/Remote_Debugging_Protocol#Actors 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 protocol implementation ==
== The protocol implementation ==


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.
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 program: 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 (or browser) actor and tab actors. These modules 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.
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.
Line 13: Line 13:
== The Debugger UI ==
== The Debugger UI ==


The
The client part of the client-server architecture (modulo the dbg-client.jsm library) resides in browser/devtools/debugger. There we can find the DebuggerUI.jsm module that serves as the main entry point from the browser to the Script Debugger
Confirmed users
231

edits