New Performance Tools in Firefox Developer Edition 40

Today Mozilla is pleased to announce the availability of Firefox Developer Edition 40 (DE 40) featuring all-new performance tools! In this post we will cover some of DE 40’s new developer tools, fixes, and improvements made to existing tools. In addition, a couple of videos showcase some of these features.

Note: Many of the new features were introduced in May, in an earlier Mozilla Hacks post.

Introducing the new performance tools

Firefox Developer Edition features a new performance tool that gives developers a better understanding of what is happening from a performance standpoint within their applications. Web developers can use these tools to profile performance in any kind of website, app, or game; for a fun insight into how these tools can be used to optimize HTML5 games, check out our post about the “Power Surge” game right after you’re done here.

All performance tools can now be found grouped together under the Performance tab, for easier usage. Performance is all about timing, so you can view browser events in the context of a timeline, which in turn can be extended to include a number of detailed views based on the metrics you choose to monitor.

In the following video, Dan Callahan demonstrates how to use the new performance tools.


The Performance tab contains the new timeline, which includes: Waterfall view, Call Tree view and a Flame Chart view.

All of the views above provide details of application performance that can be correlated with a recorded timeline overview. The timeline displays a compressed view of the Waterfall, minimum, maximum, and average frame rates, and a graphical representation of the frame rate. Left-clicking on the view and dragging to the desired range allows you to zoom into this timeline. This also simultaneously updates all three new views to represent a particular selected range.

The recording view gives developers a quick way to zoom into areas where frame rate problems are occurring.
recording

The Waterfall view provides a graphical timeline of events occurring within the application. These events include markers for occurrences such as reflows, restyles, JavaScript calls, garbage collection, and paint operations. Using a simple filter button you can select the events you want to display in the Waterfall.

perffilter

You can use console commands like console.timeStamp() to indicate, with a marker on the Waterfall, when a specific event occurs. Also, you can graphically show timespans using the console.time() and console.timeEnd() functions.

consoletimestamp

The Call Tree view shows the results of the JavaScript profiler for the specified range. Using this view you can see the approximate time spent in a function. The table displays total time spent within a function call or the self-time that a particular function call is using. The total time encapsulates all time spent in the function and includes time spent in nested function calls. The self-time only includes time spent in the particular function, excluding nested calls. This view can be very helpful when trying to locate functions that are consuming a large portion of processing time. This view has been available in previous iterations of Firefox, and should be familiar to developers who have used the tool in the past.

calltreeexample
The Flame Chart view is similar to the Call Tree in that it graphically illustrates the call stack for a selected range. For example, in the screenshot below the drawCirc() function is taking over 25 milliseconds (ms) to complete, which is larger than the allotted time for frame generation to produce 60 frames per second.
flamechartexample

Performance profiles can be created, saved, imported, or deleted. In addition, multiple profiles can be opened at once to contrast and compare performance statistics between runs. Profiles can be created programmatically or using the console, by entering console.profile(“NameOfProfile”) to start a profile and console.profileEnd(“NameOfProfile”) to stop a profile. This allows you to fine-tune when profiling starts and stops within your code.
consoleprofile
You can find complete docs for the performance tools on MDN. These include a tour of the UI, reference pages for each of the main tools, and some examples in which we use the tools to diagnose performance problems in CSS animations and JavaScript-heavy pages.

Additional features and improvements

In addition to the new Performance tools we’ve also implemented many new convenience features — mostly inspired by direct feedback from developers via our UserVoice channel — and over ninety bug fixes, representing a ton of hard work over the last eight weeks from Firefox Developer Tools staff as well as many contributors. Please continue to submit your feedback.

This video from Matthew “Potch” Claypotch shows off some the most requested feature implementations for Developer Edition 40.

Network Monitor improvements

As seen in the video above, the Network Monitor includes many improvements such data collection when the Network Tab is not active, and the ability to see quickly when an asset is loaded from the cache as opposed to the network.
cached
It is now possible to copy post data, URL parameters, and Request and Response headers using the context menu when selecting a row entry.
postdata

CSS docs integration

Firefox Developer Tools now support integration with MDN documentation for CSS properties, providing more information for developers while they are debugging web app styling and layout. To access this feature, you can right-click (Ctrl + click on Mac) on CSS properties within the Inspector, and select “Show MDN Docs” from the context menu.
mdncsslink

Improved Inspector layout

In the Inspector, whitespace in text node layout is cleaned up, providing a better view of your markup.
whitespace

Additional fixes

Many additional fixes are also included, like improvements to the Animation Inspector, scroll into view context menu support and Inspector search improvements. To see all the bugs addressed in this release have a look at this big list in Bugzilla.

We’d like to send a gigantic special thank you to all the contributors and individuals who reported bugs, tested patches, and spent many hours working to make Firefox Developer Tools impressive.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

20 thoughts on “New Performance Tools in Firefox Developer Edition 40

  1. Tom H

    Great work! Really like the CSS docs integration, speeds up development in newer areas like flexbox 🙂

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Dan Callahan

    We don’t currently have that information in the DevTools. If it’s something you need, please consider voting for it on the Firefox DevTools UserVoice

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. Martin

    How can I see 1) how the painted page looked at a certain time of rendering and 2) what was painted by which rule.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. Havi Hoffman [Editor]

    @Yeshvanth – It missed the train: The 3d view aka ’tilt’ was not working in 40 due to incompatibilities with e10s. It’s coming back though, so please keep an eye on upcoming releases… They happen every 6 weeks. Thanks.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Chris H

    Great work, love the browser and all of its tools!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. Yeshvanth

    Can you guys tell me, why the 3D view has been removed from the Firefox Developer Edition.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. Dave Voyles

    Great to see that these tools get implemented into beta and then standard FF so quickly. This web audio tool seems great! Liking the dark theme of the developer browser, too. I didn’t realize that existed until I saw this video. Nice work.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. Enrique

    Really awesome! Great job! You are the Champions! Chapeau! Torero! Firefox for president! God save the Mozilla guys!

    P.S.: Could anyone take care of the bug I submite a few weeks ago (https://bugzilla.mozilla.org/show_bug.cgi?id=1167111). It’s a same, but for many apps it makes Firefox come to its knees and I have to switch to Chrome. I guess that’s the same problem for (ten of) millions of users 🙁

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. satyendra karn

    Right on time. Great Work Guys !

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Josh

    Awesome! The only thing I wish we had here was eval/dynamic scripts debugging like IE11 does. That is the only thing stopping me from debugging in Firefox full time. Makes it hard to set a breakpoint in an optional script…

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. TJ

    is there a patch for the insta-fail downloads? every time i start a download i have to close dev edition and reopen and restart the download

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. Albert

    The new performance tool looks pretty impressive. Great work!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  13. vanderlei corr

    after updating Firefox Developer edition to version 40 then now the geolocation isn’t working correctly.
    it’s now detecting a position like 120Km far from here.
    initially thought it was the app being developed, but then testing same apps (3 different ones…) on Firefox 38.0.1 all worked well as previously, grabbing the right actual location.
    didn’t find anything on web mentioning this, so any way to check if geolocation feature has some bus on this updated version ??
    thanks,

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  14. Lars Bjerga

    This Edition is so amazing! no memery leaks runs much better then regular firefox and it has the dev tools built in. Good job GUYS!!!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  15. Havi Hoffman [Editor]

    @eric & hello everyone – if you have feature suggestions and constructive feedback, please share those on the Firefox Dev Tools UserVoice feedback channel: https://ffdevtools.uservoice.com/ Thanks!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  16. Matthias

    Really love it. Great work! :thumbsup:
    But one minor thing bugs me. The fade in effect for MDN docs. As a developer I want information fast, not fancy.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  17. Dan Callahan

    Yep! Features from Developer Edition move up to Firefox Beta and then to Firefox every six weeks, so you should see most of these features in plain ol’ Firefox in 12 weeks.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  18. eric

    websockets traffic monitoring in the network tab, please

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  19. Ferdy

    Will any of these features make their way into the regular editions of firefox?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply