All products featured on WIRED are independently selected by our editors. However, we may receive compensation from retailers and/or from purchases of products through these links.
You asked for them and now Mozilla's Firefox developer tools team is hard at work building a slew of new tools for web developers.
A few weeks back Mozilla's Paul Rouget asked developers what they'd like to see in future versions of Firefox's developer tools. The resulting thread on Hacker News is quite extensive and full of some great ideas that Rouget and others have been hacking on ever since.
The result is a bunch of new tools that are mostly still at the experimental mock-up stage, though a couple are available now in the Nightly Channel if you'd like to try them out.
The most popular request, and by far the coolest of the bunch, is the ability to do live edits in the text editor of your choice – effectively controlling Firefox with your editor. The video below shows an example of live editing via the popular Sublime Edit. This would essentially eliminate the need to jump from your editor to the browser, hit refresh, jump back to your editor, and so on. A dance that most of us are all too familiar with. Perhaps the best part, Rouget says this will work with the mobile version of Firefox as well.
Mozilla is also working on the opposite idea – authoring in the browser. That means putting an editor inside Firefox's Dev Tools suite. Thus far this idea is less fleshed out, but the possibilities include putting in something like jsFiddle or perhaps a more traditional file-based editor.
Other new tools include some catch up features that bring Firefox's Dev tools up to speed with what you'll find in WebKit browsers. Examples include a new network panel prototype and the ability to doc the tools to the right side of the screen – great for wide monitors (this is already available in Nightly). There's also a new "repaint" view that shows what gets repainted on the page, very useful if you're trying to improve performance. Rouget has also been working on a new, dark theme for the Firefox dev tools.
Rouget recently added a font inspector panel (available in the Nightly Builds) that makes it easy to see which fonts a page is using, including details like whether or not the font file is local or served through a service like Typekit, as well as the actual @font-face code used.
In what appears to be an unrelated effort, Mozilla developer Dave Townsend has been hacking on Firefox's Tilt View Tool. Tilt View offers a 3D look at a page that can be very helpful for visualizing the structure of your code and spotting bugs you might otherwise miss. Townsend has come up with a number of ways to extend Tilt, including showing only links and only elements that change on hover.
Townsend even suggests that in the future you might be able to pair Tilt with your site analytics to see which links are most frequently clicked. Unfortunately you'll have to wait a while before these features are actually available in Firefox; Townsend's hacks rely on some core Firefox features that aren't ready for prime time just yet.
While many of these coming features are, as yet, only prototypes, things are clearly looking up for Firefox's dev tools. For more details on everything that's new, be sure to check out Rouget's post, as well as the (https://news.ycombinator.com/item?id=5393864) thread that Rouget has been posting to with some follow up info.
