{"id":1719,"date":"2012-10-24T16:23:05","date_gmt":"2012-10-24T23:23:05","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=1719"},"modified":"2016-02-19T14:41:37","modified_gmt":"2016-02-19T06:41:37","slug":"coming-soon-the-firefox-developer-toolbox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2012\/10\/coming-soon-the-firefox-developer-toolbox\/","title":{"rendered":"Coming soon: The Firefox Developer Toolbox"},"content":{"rendered":"

In his book “Weaving the Web<\/a>“, 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

In the past, if you were a web developer you almost exclusively used Firebug<\/a> 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

\"\"<\/a>

Two tools open…<\/p><\/div>\n

\"\"<\/a>

Three tools open…<\/p><\/div>\n

\"\"<\/a>

Four tools opened…<\/p><\/div>\n

\n

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.<\/p>\n

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.<\/p>\n

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).<\/p>\n

Here’s a preview of what’s coming soon in Firefox for Web Developers:<\/p>\n

The Developer Toolbox<\/strong><\/p>\n

\"\"<\/a>

Visual design by Stephen Horlander<\/p><\/div>\n

 <\/p>\n

The Developer Command Line<\/strong><\/p>\n

\"\"<\/a>

Visual design by Stephen Horlander<\/p><\/div>\n

 <\/p>\n

Easy access to new tools<\/strong><\/p>\n

\"\"<\/a>

Visual design by Stephen Horlander<\/p><\/div>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Read more<\/a><\/p>\n","protected":false},"author":481,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[246,1],"tags":[],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/1719"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/481"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=1719"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/1719\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=1719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=1719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=1719"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=1719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}