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.
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
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.
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.
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.
It is now possible to copy post data, URL parameters, and Request and Response headers using the context menu when selecting a row entry.
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.
Improved Inspector layout
In the Inspector, whitespace in text node layout is cleaned up, providing a better view of your markup.
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.
About Dave Camp
Dave Camp is Director of Engineering for Firefox at Mozilla.
About Jason Weathersby
Jason Weathersby is a Technical Evangelist for Mozilla, evangelizing Firefox OS. He is also a committer on the BIRT project at the Eclipse Foundation, and has co-authored several books on BIRT integration. He is a proponent of HTML5, Open Source and all things related to web-based gaming.