Mozilla Plans To Improve Firefox Developer Tools With In-Browser Editing, Better Firebug Integration, Network Panel & More

Last week, Mozilla technology evangelist Paul Rouget asked web developers what improvements they wanted to see in Firefox’s developer tools. Based on the feedback the team got on HackerNews and Twitter, the Firefox DevTools team spent the last week hacking and prototyping a number of new and improved developer features that will likely find their way into a stable version of Firefox in the future.

The number one request, Rouget writes, was to make it easier for developers to code in the browser and control the browser from editors and integrated development environments (IDEs). The team is exploring two approaches for this right now. The DevTools team built a proof of concept that shows live editing using the popular Sublime Text editor and Firefox’s built-in remote capabilities. In addition, though, Mozilla is also looking at adding an editor right into Firefox.

This wouldn’t be the first time for Mozilla to look into a browser-based editor. Back in 2009, Mozilla started working on Bespin, which later became Skywriter, but this project is now inactive. With the CSS and HTML editor Thimble, however, Mozilla recently picked up this idea again and while Rouget writes that the organization is still trying to figure out what a new editor in the DevTools could look like, there is clearly some expertise for how to build browser-based text editors at Mozilla.


Another feature developers asked for is a Chrome- and Firebug-like network panel and timeline; the team already developed a prototype that makes it easier to see how a web app uses the network.

The Firefox team is also working to improve the browser’s compatibility. Currently, Rouget writes, “if you’re a Firebug user, the Firefox DevTools might get in your way.” To ensure that doesn’t happen, Mozilla will add an option to disable the “inspect” menu from the context menu and the team is also looking for ways to integrate Firebug in the DevTools box.


Other improvements the team is working on include the ability to dock tools on the right side of the browser (already working in Firefox Nightly), support for CoffeeScript and debugging minimized CSS and JavaScript files, as well as the ability to see what gets repainted on a page (also currently available in Firefox Nightly).

Rouget notes that the team is also working on a number of other features (visualizing event bindings, offline storage tools and pseudo elements inspection).

Most of these improvements aren’t going to arrive right away and it may take a few months for some of them to make it out of the prototype stage. For developers, however, this is still welcome news as Mozilla is clearly dedicated to improving its developer tools and to keep them up to par with the competition.