Top Requests for Firefox Developer Tools (March 2012)

Joe Walker

4

Feedback, and lots of it

Back in January, I wrote about some of the input we have received about the latest developments in Firefox tools for web developers. We get lots of input from many sources, including a new round of user studies that we just completed last week. What people are saying about our tools and asking for helps us to set priorities, so keep the feedback coming. Blog posts, tweets, the Firefox Aurora/Beta “feedback” button… it’s all good.

I wanted to highlight some of the top requests and what we’re doing and thinking in those areas. Though I see a good deal of input for Firebug as well, I’m going to focus on the Firefox built-in developer tools for this article.

The tone of the input that we’ve gotten has been overwhelmingly positive. I hear things like “I like what you’ve got here and want to see more”. And we want to give more to you!

If you want to offer suggestions on our approach to the features in this article, you can get in touch on the dev-apps-firefox mailing list. You can also feel free to file bugzilla bugs or comment on the bugs linked below.

“Global UI”

Users of our tools describe this request in many different ways. Here are a few key wants:

  • leave room for the website/application that they’re working on
  • put the tools on a separate monitor
  • move more easily from one tool to another

We have definitely been thinking about how we want to handle these cases. At first, we had just the Web Console. Then we added Scratchpad. That was followed by the Page Inspector and its collection of page element-centric tools. Now we’ve added the Style Editor and the Page Inspector 3D. The Script Debugger is not far off.

We want to scale the UI to support the increasing number of features we have planned while keeping it focused on your task at hand. The Developer Toolbar and Tools in Windows features are the key pieces here. We’ve got some ideas and, in the case of the Developer Toolbar, pieces of implementation, but we’re definitely open to input.

For those of you looking for a user interface that ties our recently released tools together, rest assured that this is definitely very visible on our radar.

The Network Timeline

This comes up consistently in user studies. Just about every web developer makes extensive use of page/style inspection, console for errors and experimentation with JavaScript, and a network timeline.

What do people use the network timeline for?

  • Viewing the network activity
  • Looking at the details of a specific request
  • Getting a further look at specific kinds of requests
  • Visualizing the load time

The Web Console already lets you view request/response details. Unlike other consoles, the Web Console also shows every request, not just the XHR requests after initial page load. The Web Console’s filtering also makes it possible to find specific requests.

However, the Web Console doesn’t offer the load time visualization or statistics that you find in the network panels. It also doesn’t offer an easy way to organize requests by different properties of the request. For example, you can’t sort the Web Console by response size.

These are important use cases, and we’ll be deciding on an approach here soon. There’s a feature page for network request timeline view and details will be filled in there.

Copy/Paste from the Style Inspector Rule View

People love tweaking CSS rules live in their browser. The instant feedback is addicting, isn’t it?

Of course, once you’ve got the page looking the way you want it to, you need to get the changes back into your source CSS files.

In the latest Firefox release, you can use the Style Editor to make live changes to CSS and save them. Starting in the next release (Firefox 12), you can save to file:// URLs without even seeing a save dialog.

A workflow that many developers are used to is tweaking the rules in the Style Inspector’s rule view. Once they have the desired look in hand, they want to copy the changed rule straight out of the Style Inspector. Unfortunately, the rule view did not support copying of rules. I say did not, because this improvement recently landed. Firefox 13 (going to the Aurora channel later this week) makes it really easy to copy rules out of the Style Inspector.

Layout View

Tools like Firebug offer a view that takes the computed style values for things like margins and padding and puts it into a little picture of the box model. The Style Inspector already offers the information but the data is not grouped together.

Further, Firebug visually displays the margins and padding around an element right in the page. I’ve gotten the impression that this feature is used more often than the separate box view with the actual values of margin and padding, but they’re both popular features. There’s a bugzilla bug for displaying layout right in the page.

The separate layout view also has a bugzilla bug which has an actively developed patch and looks pretty close to landing.

Arrow Keys FTW

Sometimes it’s the little things. People love being able to tweak margins and padding (and other numeric values) using the arrow keys. There’s a bugzilla bug for this, and I’ve bumped up the priority.

JavaScript Debugging

It’s hard to make a strictly ordered list of user requests. JavaScript debugging is one of those features that lots of people never use and many others absolutely rely on.

The good news here is that the in-progress Script Debugger landed (turned off) last month. Panos Asthitas wrote about this new debugger soon after it landed. This is a really big feature, both in terms of what it will ultimately provide developers and in terms of the infrastructure it is built on. Panos’ blog post talks a bit about that, but there’s a brand new JavaScript debugging API and remote access protocol behind this new feature.

The Script Debugger is well on its way.

HTML/Style Inspectors should reopen automatically

When the Page Inspector debuted, many people praised its clean, uncluttered look. The breadcrumbs on the toolbar provide a minimalist way to navigate between page elements, and the Style Inspector sidebar was only there when you needed it and provided lots of vertical space to explore your styles.

However, having to hit the keyboard shortcuts (which are documented on MDN’s Page Inspector page) every time you opened the Page Inspector was getting some people down. You probably wouldn’t be surprised to read that there’s a bugzilla bug for that. You’ll probably also be happy to hear that that change has landed and will be in Firefox Aurora this week.

Pseudo-Class Lock

Want to style a page element that has styles applied on :hover? You’re not alone. Among other changes mentioned above, the Firefox 13 Aurora release lets you lock the :hover, :active and :focus pseudo-classes. It works really well for pure CSS menus on the like.

A Tale of Two Context Menu Items

Firebug users have probably noticed that they now have “Inspect Element” and “Inspect Element with Firebug” in the context menu on the page. It’s easy to accidentally get one tool when you were expecting the other.

I have seen tweets and blog posts that point out that you can turn off Firefox’s built-in “Inspect Element” context menu item. You set the “devtools.inspector.enabled” pref to false in about:config. That’s not a great solution, though, because that removes the whole Page Inspector feature. Want to fire up the amazing 3D view? You’ll be out of luck, because the Inspect menu item will be gone from the Web Developer menu, too.

I’ve filed a bug to make it possible to turn off the context menu item without disabling the whole feature. This would let you have the context menu you want, and still have access to great Page Inspector features. There are other possible solutions as well and we’ll definitely find a good solution.

Keep it coming!

Hearing what people like and dislike is really useful. I look forward to the next batch of articles, tweets, input and email!

4 responses

  1. pd wrote on :

    Thanks for this: devtools.inspector.enabled Most useful function from the native devtools yet, or at least until it’s all even remotely close to Firebug’s abilities, I’ll happily turn it off.

  2. _ck_ wrote on :

    Thanks for the list!

    But can we please get the style inspector copy/paste in the FF12 beta?

    Not comfortable running alpha for day-to-day use.

    1. kdangoor wrote on :

      To get our releases out on time, we don’t merge much into beta. Every patch comes with some risk that it may cause other problems. The good thing, though, is that the beta channel will have this next month!

      Also: I personally run Nightly builds and *those* are pretty stable. Aurora is not like your typical alpha. They’re fairly solid.

  3. Larry Gerndt wrote on ::

    I just wanted to counter the cynical first comment above by encouraging you to keep going, I think it’s going to be great.