In using React and Redux, Mozilla is moving its Firefox tools away from XUL (XML User Interface Language). “All Firefox DevTools are transitioning away from XUL to a more modern architecture of reusable React components and a Redux store model,” said Clark. XUL was “open yet effectively proprietary,” with only Firefox supporting it, he said. “The old debugger was incredibly hard to change and much of this due to XUL. XUL is a spider web of model and view components that often prevents even simple changes from being easily achieved.”
Using React and Redux simplifies code into smaller modules. “We believe this will make the debugger and all of our future developer tools more approachable, predictable, understandable, and testable,” Clark said.
The debugger.html user interface has three main regions: a sources panel, with a view of current sources for the application being debugged; an editor panel, displaying source files and setting breakpoints; and a right sidebar, displaying the call stack, current breakpoints, and variables when the debugger is paused. The tool will be offered in the FireFox Nightly version of Firefox DevTools.
Debugger.html currently debugs Firefox, connecting via the Firefox Remote Debugging Protocol. It also can connect in an experimental fashion to the Chrome browser to debug Chrome tabs, and to Node.js, to debug Node processes.