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

firefox-logo-250

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.

acTVIBr

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.


Product: Firefox
Website: mozilla.com
Company Mozilla

Firefox is a Web browser created Mozilla Corporation. Since its release in 2002 (as Phoenix 0.1, later named as Firebird then Firefox as of 0.8 to present), the browser has become one of the most popular Web browsers in the market, trailing only Microsoft’s Internet Explorer as of July 2009.

→ Learn more
Company: Mozilla
Website: mozilla.org
Launch Date: February 1, 1998
Funding: $2.3M

Born from Netscape’s 1998 open sourcing of the code base behind its Netscape Communicator internet suite, Mozilla Firefox currently holds approximately 22.48% of the world market for internet browsers as of April 2009. Version 1.0 was released on November 9, 2004 after a series of name changes, and within a year close to 100 million downloads of the browser technology had occurred. The following two years saw upgrades to version 1.5 in November 2005 and 2.0 in October 2006....

→ Learn more