Debugger Architecture
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.
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 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 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 Remote Debugging Protocol.