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.
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
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.
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.
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.
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!