Mozilla to come up with JavaScript debugger as a part of tools transition plan

The most popular free and open-source web browser, Mozilla is providing a JavaScript debugger that can debug multiple targets and also can work in a standalone mode with its open source debugger.html tool, launched recently. The effort is part of a plan to redo Mozilla’s developer tools using the React JavaScript library.

Offering “a completely new take on the debugger,” debugger.html ships within Firefox. Well not only that it is built as a web application leveraging React and the Redux state container for JavaScript apps. Explaining more, Mozilla’s Bryan Clark, Firefox developer tools product manager, said, “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 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.

Features- The debugger.html user edge has three main provinces: 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. Currently Debugger.html debugs Firefox involving 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.