Firefox Developers

Developer Tools for the Open Web

Future posts are on Mozilla Hacks

March 5th, 2014

TL;DR: We’ve moved

We’re not adding new articles to this blog, but there are several alternatives to get your fix of Firefox developer tool news:

Comments Off on Future posts are on Mozilla Hacks

New Firefox Command Line for Developers

June 21st, 2012

There are many many tools and features that we’d like to add to Firefox developer tools, but if we do them all, there’s a risk that the interface will get really messy. So we’re creating a command line to help us contain the small tools. It’s quick to use and unlike conventional command lines, it helps you out, rather than requiring you to learn command parameters.

The developers toolbar should land in Firefox 16 or 17 and will look like this:

The challenge is creating enough commands: It might be stretching things a little to call the command line a ‘platform’, and commands ‘apps’, but a command line without commands is useless. We’ve created several, and we’re working on more, but we’d still like help.

So we’re planning on a hackathon on 26th June to add to the list of commands and to check that it really as as easy as we think it is to extend.

By the time the 26th rolls around bug 724055 should have landed which will make creating new commands and easy as setting a pref to point to a directory where you have put some JSON (ish) files, describing your commands, and you’re done.

In the next few days I’ll update this post with a set of resources for creating commands and ideas for commands. We’ll hang out in IRC and crank away and see how many commands we can get written in a day.

If you can spare some time, we’d love to have some help.

(Update: Originally this post had a typo and said the 27th. The real date is the 26th)


Firefox Developer Tools Update, June 21

June 21st, 2012

The weekly update is back! This post has the highlights of the past week in developer tools. The full notes, as before, are on the wiki.

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

Comments Off on Firefox Developer Tools Update, June 21

Top Requests for Firefox Developer Tools (March 2012)

March 19th, 2012

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:

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?

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!


Firefox Developer Tools Update, March 15, 2012

March 16th, 2012

Firefox 11 shipped this week and included the Style Editor and the 3D Page View in the Inspector. Big ups for Cedric Vivier and Victor Porof and all the reviewers and supporting cast who helped make those features a reality!

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!

Comments Off on Firefox Developer Tools Update, March 15, 2012

Firefox Developer Tools Update, March 8

March 8th, 2012

This week in the world of the Firefox Developer Tools team:

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


Weekly developer tools update, March 1

March 1st, 2012

The full meeting minutes are on the wiki.


Comments Off on Weekly developer tools update, March 1

Weekly developer tools meeting, Feb 16

February 16th, 2012

The weekly meeting minutes are up on the wiki. Here are some highlights:

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

Comments Off on Weekly developer tools meeting, Feb 16

Weekly developer tools update, Feb 9

February 9th, 2012

Here are the highlights from this week’s developer tools meeting.

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

Comments Off on Weekly developer tools update, Feb 9

Weekly developer tools update, Feb 2

February 2nd, 2012

Apparently, the groundhog says we’re in for another 6 weeks of winter. With this week’s release of Firefox 10, we’re also in for about 6 weeks of beta for the next Firefox and 6 weeks of development for Firefox 13. Follow along with our development by joining our meetings or reading the notes below from the latest meeting.



Next Page »