Future of Firefox DevTools

10 days ago, I asked in various channels about what web developers would like to see in the Firefox DevTools. I was impressed by the amount of answers we got (especially from HackerNews and Twitter). We computed and prioritized all these inputs. Then the DevTools team met, and spent a week hacking on these different requests.

Coding in the browser & controlling the browser from editors/IDEs

This is the number one request. Breaking the painful Editor ⇄ Browser ⇄ DevTools workflow. Staying in the browser, or not leaving the editor.

We are exploring 2 approaches: letting other editors interact with Firefox, and integrating editors in Firefox.

A python library to interact with Firefox

Proof of concept. Firefox CSS live editing via SublimeText:

A lot of editors are scriptable in Python. And Firefox has remote capabilities (a DevTools protocol accessible over the network). So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.

This will work for mobile as well.

Authoring in the browser

Another approach is to let the user write code directly from Firefox. Basically having editors in the DevTools. We are still trying to figure out what this could look like. Do we want a jsfiddle-like tool? Do we want a file based editor? Not sure yet, still exploring.

Authoring tool mockup:

Don't expect these 2 things to happen soon. It will take us a couple of months to get the Python library, and more to get the in-Firefox editors.

Network Panel & Timeline

These are tools you'll find in Chrome and Firebug, but not in the Firefox DevTools yet. We have decided to start with a Network Panel. Victor Porof is working on this, and he managed to get a working prototype:

A better story about Firebug

If you're a Firebug user, the Firefox DevTools might get on your way. We need to improve that. We will do several things like a more obvious way to disable the "Inspect" menu from the context menu.

Another thing we're looking at is a way to use the Firebug panels in the DevTools box (and let the user select which tools he wants).

Jan 'Honza' Odvarko (main Firebug developer) is experimenting with this, and made some good progress:

This is an experiment. It probably won't end up like this.

Docking the tools on the right side of the browser

Good news! We have built that and it's now in Firefox Nightly:

CoffeeScript support

To address this, we are integrating support for SourceMap. Nick Fitzgerald demonstrated a version of the Firefox debugger that supports SourceMap and CoffeeScript:

Nick's work will also help for debugging minimized CSS/JS files.

Also, I'd like to mention that Paul Miller managed to get CoffeeScript and LiveScript support into Firefox Terminal (blog post):

An aggregate repaint view

Being able to see what gets repainted on the page (a costly operation) is useful for performance work. I landed that on Monday. It's not perfect yet, but a good first step:

Controlling the animation clock

A lot of people have requested a tool to debug CSS transitions and animations. I have been working on a proof of concept:

More

Other things have been requested, like visualizing event bindings, offline storage tools and pseudo elements inspection. We are also looking at this seriously. I hope to have some good news about these soon :)

Thank you HN!

Seriously, you guys rock! Invaluable feedback. Keep on sharing ideas/bugs/feedback (leave a comment here or ping me on twitter: @paulrouget).

-- The Firefox DevTools team

Comments