Mozilla relaunches JavaScript debugger as part of tools transition plan

With its open source debugger.html tool, launched this week, Mozilla is providing a JavaScript debugger that can debug multiple targets and work in a standalone mode. The effort is part of a plan to redo Mozilla’s developer tools using the React JavaScript library.

Built as a web application using React and the Redux state container for JavaScript apps, debugger.html ships within Firefox and offers “a completely new take on the debugger,” said Mozilla’s Bryan Clark, Firefox developer tools product manager. “Debugger.html rethinks how to write, maintain and access the debugger yourself.” Still in development, debugger.html will replace the current debugger in Firefox Developer Tools.

In using React and Redux, Mozilla is moving its Firefox tools away from XML User Interface Language (XUL). “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.