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 ⇄ DevToolsworkflow. 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:
To address this, we are integrating support for SourceMap. Nick Fitzgeralddemonstrated a version of the Firefox debugger that supports SourceMap and CoffeeScript:
Nick’s work will also help for debugging minimized CSS/JS files.
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:
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
Actual Author is Paul Rouget http://paulrouget.com