Firefox UX
Categories: Firefox General

Coming soon: The Firefox Developer Toolbox

5 responses

In his book “Weaving the Web“, Tim Berners-Lee said he first envisioned the web browser as an application that could both display and edit webpages. The “editing” part of the vision never really happened, which I’ve always found a little disappointing.

Like most people I’m an experiential learner, which is just a fancy way of saying that I learn by doing. When I was a kid, I did print design, animation, and sound production, all of which were pretty easy to build a mental model around. What you saw is what you got and the feedback was instant. The web is different. There are so many levels of abstraction to go from an idea sketched on a napkin to something you can interact with in the browser.

In the early days, there were technical reasons why you couldn’t create and edit content in the browser. Those constraints largely don’t exist any longer, which is why I’m so excited about the work we’re doing with the Firefox Developer Toolbox.

In the past, if you were a web developer you almost exclusively used Firebug to prototype interactions and debug web content. Today the landscape is different. We now have a diverse and powerful suite of tools for web developers in Firefox, but they don’t always work well together.

Most of these tools were built by one developer (or a small team) focusing on solving one particular problem. Decisions about the user interface, visual design, and placement within Firefox were made with that one problem in mind. In addition, these tools started off as add-ons, not as part of a suite of applications.

The problem is that most developers aren’t solving just one problem at a time. Instead they follow a complex workflow that involves several tools within Firefox, switching between them several dozen times a day. Watching developers in the field, it wasn’t uncommon to see the content be completely hidden with only a few tools opened.

Two tools open…

Three tools open…

Four tools opened…

We also reconsidered tools that opened in a side panel. Many web designers and developers are creating “responsive designs”, which basically means that websites present themselves differently at different page widths. When a tool opens in a side panel, it doesn’t accurately reflect what the end users will see.

Ultimately we decided to move all tools out of the side panels into a single panel that sits below the content, which we call the Developer Toolbox. Though this change will be initially disruptive to developers, it will be a necessary step to a better experience.

The Developer Toolbox has been designed to allow users to focus on one tool at a time, while giving them easy-to-remember ways to switch between tools. In addition to UI controls, we tried whenever possible to take advantage of keyboard shortcuts (and maybe one day trackpad gestures).

Here’s a preview of what’s coming soon in Firefox for Web Developers:

The Developer Toolbox

Visual design by Stephen Horlander

 

The Developer Command Line

Visual design by Stephen Horlander

 

Easy access to new tools

Visual design by Stephen Horlander

 

5 comments on “Coming soon: The Firefox Developer Toolbox”

  1. Simon wrote on

    Keep up the good work you are doing with the developer tools in Firefox. I’m a big fan of using these over alternatives such as Firebug, mainly because of the native performance and better interface design. The responsive design view is particularly good.

    One thing that bugs me (excuse the pun ^_^) is the ommission of basic debugging features such as “watches” and the ability to hover a variable to see it’s current value. This makes it difficult to inspect complex objects.

    For example, if I want to inspect a property nested 3-4 levels down, and inside an array at a particular index, it’s pretty much impossible/very difficult in the current script debugger.

    Does the team have any plans to address this?

  2. Robert Kaiser wrote on

    Actually, in the early days, we had editing capability in the browser. Netscape included a website editor. The SeaMonkey suite still has a version of that one. Only when we went to the minimalised browser-only things like IE, Firefox and Chrome, we lost editing. It’s interesting how we are building some editing back, but all our developer tools are way less direct and user-understandable than the WYSIWYG editor in the browser was in the past.

  3. James wrote on

    This is terrible! There needs to be an option to have certain tools like the CSS inspector open wherever we want. I used it all the time when it was on the right side and now it’s useless to me.

  4. John Simmons wrote on

    Look, I get what you’re saying about developers not seeing how something might be presented to an end user, but most of us are using WIDE screens, so having the CSS console on the right (from top-to-bottom) made it an incredibly useful tool to determine why things weren’t displaying properly.

    I’m not talking about things displaying differently with different widths, I am talking about simply not displaying correctly at all.

    Now the damn thing is at the bottom in a tiny-ass box that’s about as useful as a priest at a porn-shoot.

    This change has made my job infinitely more complicated and more dofficult, and simple rendering investigations now take about 4 times as long as I have to keep resizing the top/bottom panels. And no, popping the panel out doesn’t help in the slightest either.

    Now, allow me to pop out the css panel only so I can relay it on the right side where it doesn’t interefere with what I am debugging (the site is by design a fixed-width), and I can start enjoying my job again.

  5. Paul wrote on

    These changes are a huge step in the wrong direction. The Inspector tool is far less useful than under previous versions. I urge you to stop work on these misguided efforts and revert to the useful functionality you had until just recently.