Firefox DevTools: the Toolbox project

For the past year, we have landed a lot of developer tools in Firefox. A JavaScript Debugger, a Style Inspector, a DOM View, a Responsive Design Mode, a Command Line, … and more tools are coming. Think about it, a year ago, we only had the Web Console.

Well, now we are facing an interesting (but expected) problem: "the DevTools Donut".

Can you see the web page?

The "DevTools Toolbox" will fix this problem. The goal is to gather all the tools into one single box, and make this box "dockable" (dock it below the page, or on the side, or in its own window). This work will also introduce a DevTools API into Firefox that addons will be able to use. This API has been inspired by Firebug's API (we worked with the Firebug team on that). One of the goal being to be able to host Firebug panels inside this toolbox.

edit: Mike wrote a blog post about this new API.

Last week we manage to get the first prototype working. Here are some screenshot and a video of me demoing the Toolbox to the team (warning: no visual design yet. It's ugly.):

Toolbox at the bottom Toolbox on the right Toolbox in a window