Mozilla has released the latest update of Firefox Developer Edition with always active network monitoring and CSS rules filtering.
In the Mozilla Hacks article on Developer Edition 40, engineer Brian Grinstead said the release "took a major effort by Developer Tools contributors to address feedback" from the developer community.
Chris Adams, co-organiser of Cleanweb, suggested to make the network panel "always active" -- with the idea receiving over 200 votes from the community in the feedback channel for Firefox Developer Tools. Adams said with the submission:
Almost every time I open the network panel the first thing I have to do is reload the page I was on because it wasn't active when the requests I care about were made. I can understand if there are concerns about memory usage on busy AJAX pages but it seems like at least the level of information present in the Resource Timing API would be enough for the vast majority of tasks I use the network panel to answer.
While the bug was resolved, Firefox engineer Panos Astitha also commented in the development notes that the change had increased the time to open the toolbox by approximately 15% across platforms.
He said "Although we should keep trying to come up with more ways to improve performance, this change clearly needs to make the toolbox open event trigger more work than previously, so some degradation is expected." However, Firefox predict with the improved workflow, network panel fix and other unrelated improvements, the overall experience for users will be faster.
Also new are some "major updates" to the animation inspector, including AnimationsActor should return all animation below a given node, requiring changes to the AnimationsActor.getAnimationPlayersForNode method. Related in the update was Animation target dom nodes should be previewed in the animation panel.
Dave Camp, director of engineering for Firefox, told InfoQ that together these changes would allow developers to see all CSS animations applied to the selected node and any child nodes, with it being common for several Web animations to be combined to get a single effect. An example of this is found in Ana Tudor’s CSS-only animation demo.
Continuing with the CSS improvements, with the update to add playback rate selection to the animation inspector panel Camp said the goal was "to allow the developer to slow down or speed up an animation as part of the process of determining what animated ‘feel’ they want to impart."
The reception to the Developer Edition Update was generally warm from the community, although one user commenting on the release asked specifically "Doesn’t chrome tools devs have much of these features already and even better?"
User Kamal Bhatt replied "I don’t use Chrome day-to-day, so this could be harsh, but when I have had to use it to debug a problem, I have found the Chrome tools sometimes lacking. I find the profiling tools somewhat better in Firefox, and the JS error messages are a lot better in Firefox. Try intentionally breaking your JS code and see the differences. With this release, I think I am going to switch off Firebug."
Camp told InfoQ that the Firefox team are "focused on the core use cases of inspecting CSS and HTML, logging and monitoring via the console or the network monitor, or debugging" and that they are working on improving their capabilities around diagnosing performance problems in websites, and innovatoing around newer Web platform capabilities including WebGL, Web Audio and Web Animations.