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.
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 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