Developer Edition 49: Network Request Stack Traces and more

This week marks the release of Firefox Developer Edition 49! This post covers some of the big changes that landed in this release.

Request stack traces in Network Monitor

The Network Monitor now has a new “Cause” column that shows how a given network request is initiated. The column shows the type of the request, includes a tooltip with the loading document, and, most importantly, if a JavaScript stack trace is available, you can see it in a popup bubble.

The JavaScript stack trace is most interesting for XHR requests, but is available also for any other request that is directly or indirectly initiated by a script, like when a script inserts a <script> or <img> element into the page.

This feature is useful if you want to figure out why and from where on the page a particular HTTP request is issued. (See bug 1134073.)


Animation performance info in Inspector

You can use the Inspector panel to investigate details of your CSS and DOM animations. In Firefox 49, you can now get detailed performance information for your animations. If an animation property cannot be run on the compositor (i.e., cannot be hardware-accelerated), it is underlined in the expanded animation view, and an associated tooltip explains what’s going on.

In the example below, the transform and width properties cannot be accelerated at the same time. With this new tool in Inspector, you can now spot under-performing animations and learn what changes you need to make to accelerate them.

Read David Baron’s blog post if you want to learn more about how animations are optimized in Gecko. (See bug 1254408 for more detail.)


Reorganized context menu in markup view

The Inspector has a context menu with many actions, which was becoming long and unwieldy. Contributor Moaaz Sidat reorganized the menu, dividing it into several sub-menus. (See bug 1211613.)


Other improvements in the Inspector Panel

Firefox 49 adds support for #rrggbbaa and #rgba syntax for color values. The Inspector in developer tools now supports this syntax, too. (See bug 1271191.)


In the CSS rule editor, autocomplete now displays more possible properties, in a scrollable list. As a result, it’s much easier to find the value that is relevant to you, or learn about new CSS properties that you were not familar with previously. (See bug 1260419.)


In the markup view, self-closing tags like <br> are now displayed as <br></br> only if the doctype is XHTML. For normal HTML, the markup is now displayed in a more accurate and less verbose form. (See bug 820926.)

Links to MDN reference docs From Console JavaScript errors

When you see an unfamiliar error message in the Console, you no longer need to copy the message and search online for documentation. You can simply click on a direct link to the MDN reference page about the error that is a part of the message. Read a blog post by @floscholz and @mrrrgn to learn more about this feature and how you can contribute to make it better. (See bug 1179876.)


New color scheme for syntax highlighting

We thought our syntax highlighting colors were looking a little dated, so we changed them up in both the light- and dark-themed versions of Developer Edition Firefox. The new colors are optimized for accessibility: they have better contrast and are easier to distinguish in all situations.



Accessibility improvements

We’ve made important accessibility improvements throughout this release. Most developer tools UI elements now have a clearly visible focus indicator, the UI is navigable using the keyboard, and accessibility semantics in the Inspector panel were improved. (See bugs 1242694, 1242715, and 1242851.).

Other notable changes

In addition to the improvements above, we have polished various areas throughout the developer tools, in particular:

  • The about:debugging page displays a warning when service workers are disabled, whether by private browsing mode or by a pref. (See bug 1266415.)
  • Step by step, the Storage Inspector is becoming more editable. In this release, we are adding a context menu option to delete an IndexedDB database. (See bug 1205123.)
  • Network Inspector now shows the exact number of bytes if the response size is smaller than 1KB. (See bug 1263945.)
  • Pressing the ‘h’ key in the Inspector panel, which is a shortcut to hide the selected element, now also grays out the element markup. (See bug 1127572.)

Thanks to everyone who has contributed to this Developer Edition release! Grab a copy of the latest Developer Edition now and let us know what you think.

About Jarda Snajdr

Firefox contributor who enjoys learning about the browser internals and solving complex problems.

More articles by Jarda Snajdr…


  1. Gerd Neumann

    Nice to the progress, good work! As a user I want to thank you!

    I very much appreciate that you put so much work into writing these release articles. The more I find it a bit unfortunate that the images are not “readable”. A picture says more than a 1000 words. And in this case they are just blurry, e.g.×218.png I rather look at these screenshots than reading the text.

    Since this is a normal wordpress blog, it shouldn’t be too much hassle to have unscaled images uploaded which are then open on click (either opening in a popup or just in an extra tab)

    June 16th, 2016 at 01:24

    1. Havi Hoffman [Editor]

      Editor’s comment: @Gerd Neumann – Thanks for this constructive feedback. We’ve updated the image links to open the full size images in a new tab on click.

      June 17th, 2016 at 16:49

      1. Gerd Neumann

        Thanks for updating.

        I’ve got another comment, but this time more informational than just on layout things: I’ve noticed that many people don’t know

        “This Week In Servo” does the outreach to new contributors very, very well. Please take a look at it. Every blog post ends with a list of new contributors and also with a link to beginner friendly bugs. E.g. see and

        It’s all already there, e.g. also on, just tell potential new contributors about it. To end these release notes of the Firefox *Developer* Edition with such a short paragraph would seem like a perfect fit to me.

        June 20th, 2016 at 02:37

        1. Adam


          That’s cool! I didn’t know about it either!

          Also, about:performance is pretty cool too

          June 21st, 2016 at 04:26

  2. Xavier Dutel

    Hi, thanks for the post and good work on this new release.

    Do we have an option to change the new syntax highlighting for the old one ? I love the old one and I don’t want to let it go !


    June 20th, 2016 at 00:05

    1. Jens

      @Xavier @Quentin: Unfortunately, there isn’t (as a user I regret this myself). FWIW, you might want to follow the bug report on and raise constructive critism there.

      June 20th, 2016 at 14:29

  3. Quentin

    Thanks for the amazing work.

    The new colorscheme is nice but I’d like to be able to choose which one to use. I was more comfortable with the old one.

    June 20th, 2016 at 01:26

Comments are closed for this article.