• Many fixes for the Debugger have been merged to Aurora this week. It has solidify a lot since Firefox 15 first went to Aurora. Thanks for all of the testing and bug reporting and thanks to the debugger team (Panos, Victor and Rob) for the quick fixes!
• You know that Firebug 1.10 that’s been in alpha releases for a while? It’s not gonna be alpha much longer.
• Joe will be posting details on a command line hackday are coming very soon, so keep an eye on this blog!
• Panos posted twoscreencasts of the in-progress GSoC “Timeline” project and it’s off to a great start. Try it yourself or check out the code by grabbing the xpi from GitHub. Awesome work by Optimizer.

Join us on Thursdays at 10am Pacific time if you want to add to the conversation!

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!

This week, additional progress was made on the Script Debugger. Panos has nearly finished the pieces that will enable stepping support, landing the protocol changes needed for the UI work which is currently in review and making use of Mihai’s SourceEditor breakpoint support. Victor has been working on providing editing of Object Properties in the Debugger. Little progress made on the Dark Theme this week, though it is close to being ready for review.

The Global Command Line Interface went through security review earlier this week. There was some discussion about allowing dangerous commands to be marked as such and enabled through a preference. Joe Walker also spent some time with the Orion team helping out with integration.

On the Page Inspector front, copy and paste support from the Rule and Computed views in the Sidebar has landed thanks to Mike Ratcliffe. Some UI patches for the Inspector have been stuck due to some accessibility issues.

In Firebug world, the team has shifted over to Github and has seen a huge number of followers and forks in a very short time. Honza is bracing himself for the inevitable onslaught of pull requests that must follow. He’s also beginning work on integrating the much-loved extension FireCookie forthwith.

Next week the Firefox Developer Tools team is going to be in London, England. We’re not sure yet what this means for our usual weekly meeting, but we are planning on hosting a community day on Thursday. Stay tuned!

Rob‘s newly-formed Script Tools team is working furiously to get our new script debugging panel ready for general use:

Mihai and Panos have landed some source editor changes which will let you set breakpoints from the script’s gutter.  Previously breakpoints could only be set in from the web console command line.  Rob and Paul are working on updating the script panel’s interface, bringing it in line with the Firefox Developer Tool visual style.

The JS team landed some of the underlying support we need to add real stepping support to the debugger.  They’re about ready to land support for listing the scripts in the page, so you won’t need to reload a page to see all the active scripts.  This change will also benefit Firebug when it is switched to JSD2.

Joe is continuing work on our toolbar, which will help tie the various tools together.  He’s working to integrate our command line into the toolbar to provide quick access to developer tools features.

Paul, Heather, and Mike have been working on our Inspector.  There’s a patch up to expose the pseudo-class lock feature directly from the highlighter’s infobar, rather than a difficult-to-find context menu.  There’s also a patch under review to copy information out of the rule and computed views, either by normal selection or a context menu to choose the specific information you want on the clipboard.  We hope to get both of these into Firefox 13.

The Firebug team has moved development to github.  See https://github.com/firebug for more information.

The full notes of this week’s meeting are available here, along with dial-in info we use every week for anyone interested in listening in live.

• Firebug 1.10a4 has been released
• the pseudo class lock feature has landed in Nightly. It’s on the context menu of the page inspector’s “infobar” that shows the tag/ID of the selected element.
• A handful of Style Inspector changes have landed and will soon be visible in Nightly
• Links to style sheets now open the Style Editor, rather than view source
• User entered values are remembered
• Invalid values provide a warning
• Specificity calculations in the rule view have had some fixes
• The HTML view now appears above the page inspector toolbar

• Firebug has integrated the Source Editor, but it turns out that this doesn’t work in SeaMonkey.
• Victor has a Blender importer for Tilt.
• Some new commands have landed for the command line (tilt with screenshot, edit and pref not far behind)
• Panos is experimenting with attaching the debugger to B2G
• Christian Heilmann reflected that we need to communicate more about why the built in tools are different from Firebug and where they’re going.
• I posted a blog post about the developer tools roadmap for 2012.

That’s it for this week! Come join us next week.

• Panos is now a devtools module peer!
• Firebug 1.10a3 coming tomorrow
• extension API should be roughly complete and stable
• multi-line command line is based on Firefox’s SourceEditor, which means it will have syntax highlighting
• Firebug is considering moving to GitHub
• Pseudo-class lock API has landed. UI work is underway.
• Paul has been experimenting with a new way to view the page inspector. Here’s a mockup with more tools.
• The Style Editor has been updated so that saving to local files (file:// URLs) is immediate (no file dialog)
• Cedric posted a video of the Style Editor showing inline documentation for CSS properties
• The textarea fallback for the SourceEditor has been removed
• The JavaScript Debugger that has been in development the past few months has landed. It’s not ready for real use, but this is the first step. It’s available in Nightly if you set devtools.debugger.enabled to true.

As usual, the complete meeting notes are on the wiki.

• A new Script Tools team has been created. The new team is led by Rob Campbell. Victor, Mihai and Panos are the first members of this new team.
• Firebug 1.10a2 is out and it’s restartless and features delayed loading.
• Firebug also has a new API for creating restartless Firebug extensions that use the AMD module format used by Firebug now.
• Highlighter updates are in the works. See them in action. Changes to the toolbar and new features for the infobar. More to come, and we’d love feedback!
• We have a fix in Firefox 12 for right-to-left locale users of the Style Rule View. We’re working on getting that in Firefox 11.
• Cedric presented some new ideas for the Style Editor including a generator for new stylesheets and the ability to do more with context of stylesheets.
• Panos has put up a video showing the debugger progress.
• Thanks to contributor “VD” for working on making the Source Editor themeable with CSS within Firefox.
• Firefox 10 input on the new developer tools has been very positive. Congratulations to the whole team for a huge release!
• Firefox Aurora and Beta are now advertising the developer tools on the home page

• Firebug 1.10 alpha 2 is coming tomorrow, and it’s restartless! And, almost all of the new Firebug is lazily initialized.
• Firebug 1.9.1 with a crash fix is planned for next week
• Many Tilt improvements have landed, including the ability to remove a node visually using the “x” key (the node is not removed from the DOM, just from the 3D view). The 3D view also now has a cool animation when you leave 3D mode.
• GCLI (Command Line) has been turned off again in Nightly. The plan is for it to reappear in the developer toolbar. Thanks for the feedback!
• The Page Inspector element highlighter now follows the element around if it moves on the page. This improvement will land in Firefox 11
• New mockups of the Web Console UI
• Style Editor’s filtering by stylesheet name has been removed. The plan is to put the search box back in Firefox 13 as a search in the stylesheet bug.
• Firefox 10 is coming out on Tuesday and will raise the profile of the developer tools
• I am working on a blog post about recent input we’ve gotten, and I summarized some of it during the meeting.

That’s it for this week. See you next week!

• If you’re running Firefox Nightly, you should get Firebug 1.10a1
• the GCLI command line  is being turned back off in the Web Console, but it will come back in the Developer Toolbar feature that is coming later
• Web Console is undergoing restyling
• Sonny has picked up the e10s patch for the Web Console, which we’re hoping will ultimately help the Web Console become remotable
• Style Editor transitions have landed
• Script Debugger is partway through superreview, and Panos has posted a document about the architecture

Those are the highlights for this week. Check out the full outline on the wiki, and join us next Thursday and say hi!