Introducing debugger.html
Sometimes, when working on a project you sense you are working with one foot in the present and one foot in the future. Enormous potential lies ahead and exciting possibilities are getting closer everyday. I have this feeling as I am working on debugger.html, one of the latest projects from the Firefox DevTools team. Debugger.html is a brand new JavaScript debugger designed for Firefox and the Web. It ships within Firefox and is a completely new take on the debugger. Debugger.html rethinks how to write, maintain and access the debugger yourself.
This new debugger will soon be available in the Firefox Nightly version of DevTools (download a copy of Firefox Nightly to try it out yourself).
When starting this project we spent quite some time toiling over the approach, and specifically wondering when do you decide to throw in the towel on a project and start fresh? James Long, engineering lead for the debugger, gave a great talk at React Rally on this subject. We could have refactored the old debugger. In fact, another Firefox team took this approach; it has a lot of advantages. That other team is systematically rewriting the Firefox Web console using a very similar architecture but with a large refactor of the existing code. We took the opposite approach and decided to start from scratch. Both teams are learning as we go about the benefits and challenges of each approach. The console as a refactor within Firefox and the debugger living in a world outside Firefox.
The debugger.html project was written from scratch using a modern Web architecture of React and Redux. It started in the beginning of 2016 with an empty repo but a team with lots of experience writing debuggers and tools. The old debugger was written in an open yet effectively proprietary markup language called XUL (there is no Dana, only Zuul) that only Firefox supports. The old debugger was incredibly hard to change and much of this due to XUL. XUL is a spiderweb of model and view components that often prevents even simple changes from being easily achieved. All Firefox DevTools are transitioning away from XUL to a more modern architecture of reusable React components and a Redux store model. This modern approach simplifies the code into smaller modules. We believe this will make the debugger and all of our future developer tools more approachable, predictable, understandable, and testable.
Debugger.html was, however, designed for more than just Firefox. So, while we have prioritized Firefox development, we are in fact maintaining a more generic model that allows us to target multiple platforms. Though not yet ready for production, this debugger can attach to and debug Chrome tabs and Node processes using the Chrome Debugging Protocol. And because it is built with reusable components we’ve demoed the debugger being embedded in an editor and running as a CLI. Even if only part of the UI components are needed, the application model still works as intended allowing for many possible opportunities of reuse.
As a web developer you’ll find a much improved yet familiar environment in our new debugger.
The debugger now includes a Sources Panel on the left hand side. It organizes by folder and makes finding the source code you’re looking for much simpler than before.
On the right hand side we’ve reorganized things to give you easier access to the information you’re looking for like the Call Stack, Scope, and Breakpoints.
As with all Mozilla code, debugger.html code is open source and aims to be easy to get started with. The debugger.html project is built in GitHub and actually lands in Firefox as we need to update it. The project is small and focused and instructions are documented alongside the code. We’ve had a number of new contributors already who find it easy to locate, manage, and work with the code.
This is just the beginning phase for the debugger and the rest of the Firefox DevTools as we move to this new area. In the coming months we’ll be focusing on making the debugger even more approachable for those wanting to get involved. The team will also look at other debuggable targets and how we can integrate with other platforms. And finally we’ll be looking at new ways to release the debugger into Firefox and throughout the other platforms where it can be run in interesting ways.
The debugger.html is engineered by developers for developers and designed for all those interested in improving their debugging experience. There is no other tool being developed in the same open way. More contributors will make it even better. Join us on GitHub today.
For more information and technical details checkout the Hacks blog post.
