1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
Mozilla recently celebrated the one year anniversary of Firefox Developer Edition, the company's browser and tools aimed specifically at developers.
When it first launched the Developer Edition of Firefox wasn't much different than the regular Firefox release, but that's changed over the last year. The latest version, Firefox DE 44, released earlier this month, packs a wealth of new features and improvements, particularly for anyone working with HTML5 and CSS 3 animation.
The Developer Edition's Page Inspector tool adds an animation panel that allows developers to step through animations node by node and easily scrub, pause, and inspect each animation on the webpage. The animation panel also ties into the DOM inspector so it's easy to switch between global and detail views of your animation. The animation panel also offers a visual cubic-bezier editor for tweaking any easing you need to apply to animations.
The animation tools make it much easier to create and edit animations in HTML without ever needing to leave the browser, but what might be the single most useful tool in Developer Tools 44 is the new memory profiling tools -- useful not just for developers, but by proxy end users who will thank you for reducing your memory footprint.
The memory tool offers a snapshot of everything in memory on a per-tab basis and then breaks everything down by type. There are four types of memory objects to look at: Objects, which are JavaScript objects grouped by class name, Scripts, Strings and a generic "Other" for everything that isn't one of the first three.
There's one other way to inspect memory, though you'll need to turn it on each time you need it since it uses quite a bit of memory itself, "allocation stack." With allocation stack activated (look for the checkbox at the top of the Memory Panel) you can quickly reference the actual code that created each object in memory. That means, if you've got some huge object you want to refactor, you can quickly see exactly which lines of code in your app created it. It might be the smartest JavaScript memory debugging tool I've ever used. Be sure to check out the <a href="https://hacks.mozilla.org/2015/11/firefoxs-new-memory-tool/">Mozilla Hacks blog</a> for more details and a nice video of everything you can do with the Memory debugger.
Equally useful, though rougher around the edges, is the new WebSocket Debugging API. This API allows for monitoring WebSocket frames. Eventually Mozilla plans to turn this into a new WebSocket inspection panel, but at the moment you'll need to install <a href="https://github.com/firebug/websocket-monitor/wiki">an "experimental" add-on</a> created by a Firefox Developer Tools engineer. Experimental or not I didn't have any problems using the add-on, it's no less stable than the rest of the Developer Edition. Because it's built atop a pre-release version of Firefox, the Developer Edition can be a bit less stable than traditional Firefox, but it does mean you get new features faster. For example, this release starts with support for Mozilla's Electrolysis project -- AKA multi-process Firefox -- enabled by default.
This release also adds a new CSS filter inspector that lets you visually create, re-order, and edit CSS 3 filters, viewing your changes in real-time on the page.
There are two new measurement tools in this version as well. The first is a set of pixel rulers along the page margins -- think the pixel rulers in Photoshop or Gimp. The second is the more useful new measurement tool. Click the icon in the developer panel toolbar and then just click and drag anywhere on the page to get a pixel-based measurement. This is one of those incredibly simple tools that once you use it you'll wonder how you ever did without it. It's a bit like what might be the single most useful tool for developers -- the forget button. The forget button resides in the toolbar and when clicked will quickly wipe your cache, cookies and browsing history for the last five minutes.
Part of the problem with Firefox Developer Edition is that it doesn't come with a detailed manual (there is some great documentation, but it often lacks real-world "recipes" to show what you can do with all the various tools). To address that and showcase some potential ways the developer tools can be useful, web animation engineer Rachel Nabors helped Mozilla create DevTools Challenger, an interactive showcase that's both an example of how to use the various tools and an example of what you can build with them.
When Firefox Developer Edition launched a year ago I was skeptical, especially given Mozilla's decision to abandon Mozilla Labs amid a string of failed projects. A year later however the Developer Edition has proved itself a valuable tool, with half a dozen features you won't find anywhere else. Even better, thus far, the development pace shows no signs of stagnating.
screenshots:
ff-dev-memory-allocation.jpg: Inspecting memory by allocation to quickly find any oversized chunks of memory your app is using.
ff-dev-cubic-bezier-editor.jpg: Visual editor for cubic bezier easing in animation.
ff-dev-inspecting-animation.jpg: Using the animation inspector.
ff-dev-css-filter-editor.jpg: Visually editing CSS filters with live feedback on the page.
|
