Smashing Magazine

Revisiting Firefox’s DevTools

• By Patrick Brosset
• December 30th, 2015
• ToolsWorkflowBrowsers
• 12 Comments

If you do any kind of development for the web, then you know how important tools are, and you like finding tools that make your life easier. Developing and testing new browser features, however, takes time. Between the time a useful tool first appears in an experimental nightly build and the time it’s available for everyone to use in Firefox, a while has passed.

That’s one of the reasons Mozilla released Firefox Developer Edition⁴¹²⁷¹ in November 2014 as the recommended Firefox browser for developers. It gets new feature updates more quickly so that you can use the latest tools.

Of course, testing your websites in the standard Firefox release is still crucial. Thankfully, Developer Edition makes this easy by letting you run both programs side by side. Plus, Developer Edition comes with a slick new theme that matches its tools.

A Bit Of History Link

How far back do we go? Way back in 2001, a debugger called “Venkman” was available for Netscape Navigator version 7. The Netscape corporation had a system for UIs named XML User Interface Language (XUL). It also had a love of the movie “Ghostbusters” and its demonic character Zuul; so, Rob Ginder, who wrote that early debugger, had four options for naming his new debugger, and Venkman beat out Stantz, Spengler and Zeddemore.

²

Venkmann was just a JavaScript debugger. It couldn’t inspect the DOM or show network traffic. Netscape had a built-in console, but that was it as far as debugging tools went.

The next piece of the puzzle was the DOM inspector, which was released around 2004 or 2005. It wasn’t friendly to web developers, and it was about debugging XUL as much as HTML.

⁴

So, in early 2006 Firefox had three pieces of the puzzle: a built-in console, a debugger and a DOM inspector — each separate and not all built in.

In late 2006 Joe Hewitt, who worked on the early release of Firefox, released Firebug version 1.0. Firebug broke new ground in allowing developers to view the DOM and in providing a JavaScript console and debugger and DOM inspector all in the same tool.

⁶

But Firebug was never an official Mozilla project, and with Joe’s departure to Parakey and then Facebook, the development of Firebug was taken up by a group of volunteers led by John J. Barton. Mozilla contributed to the project, supporting Honza Odvarko, who led the project after John left.

In 2011 Mozilla decided that it needed to put more effort into its developer tools and start from a clean slate to build some next-generation tools, while continuing to support the maintenance of Firebug.

One of the challenges with developer tools is that they need to reach deep into the platform to understand how the system works. They need to be a part of the browser and can’t easily be made as add-ons.

So, as Firefox gets updated, keeping Firebug running as a separate add-on becomes harder and harder. Upgrading the debugger APIs, which Firebug needed to keep up with, was significant work, and when the initiative to have separate browser and content processes in Firefox was announced, Mozilla decided to rebuild Firebug on top of the built-in tools.

A Solid Set Of Standard Features Link

Firefox’s DevTools have come a long way since their inception, quickly bridging the gaps between Firebug and other browsers’ developer tools. It now has all of the tools you’d expect from a browser. Let’s go through some of the main ones.

The page inspector⁸ has a a box-model highlighter, a CSS rules editor, a viewer for computed styles, fonts and layout, support for pseudo-elements, and a search tool.

⁹

The web console¹¹ lists JavaScript, CSS, and network and security logs. It supports custom formatting, as well as previews and inspection of DOM nodes, objects and arrays, allowing you to search and filter them.

¹²

The JavaScript debugger¹⁴ lets you halt the execution of scripts at any point, navigate the call stack and inspect variables. It supports source maps, pretty printing of minified sources, and black boxing of library files. And it supports dynamically evaluated scripts.

¹⁵

The network monitor¹⁷ lists all requests that Firefox makes for a web page. It displays headers, responses and cookies, letting you search through them. It also shows a performance analysis of the page load.

¹⁸

²⁰

The performance tools²² give you insight into a website’s JavaScript and layout performance by recording browser activity over time and exposing frame-rate data, memory usage, JavaScript calls and browser-rendering events such as styling, layout and paints.

²³

²⁵

Some Key Differentiators Link

On top of the usual set of tools, Firefox has a number of neat features to make your life as a developer or designer easier. We’ll go over some of them now, but download Firefox Developer Edition⁴¹²⁷¹ and try them out for yourself.

Work With Animations Link

CSS animations and transitions are a great way to improve the UX of a website, but they’re also hard to get right, and they can easily get in the way instead of guiding the user’s flow. If you want your animations to look and feel just right, then you’ll need to spend time finetuning those keyframes, durations and timing functions. Firefox comes with a set of tools to help with just that. Let’s go through a few.

Timing function Link

The timing function²⁸ drives the way that an animation or transition progresses through time. Timing functions are often described with a cubic-bezier curve. Coming up with the perfect curve is not straightforward; so, Firefox’s DevTools comes with a tooltip that allows you to modify a curve visually or even choose from a list of presets.

CSS animations are described with a set of @keyframe rules²⁹. Firefox displays these keyframe rules in the view for CSS rules when the selected element is animated, so that you can directly edit them there, where you’d expect. You can even edit keyframe properties while an animation is playing.

Animation inspector Link

The animation inspector³⁰ allows you to view all individual animations on a page, detect when they get added or removed, as well as pause them at any point, slow them down or speed them up. It’s a powerful feature for looking at animations in detail.

Test on Multiple Devices, Browsers and Screens Link

When it comes to making sure a website displays correctly for everyone, things are a lot more complex than they used to be. We now have to deal with many aspect ratios and pixel densities, as well as many browsers on all sorts of operating systems and devices. Thankfully, Firefox comes with tools just for this.

Responsive design view Link

The responsive design view³¹ makes it really easy to see how a website looks at different screen sizes. Either choose a size from the list of presets or adjust the size to anything you want by entering custom dimensions or dragging the viewport. The responsive design view can quickly be toggled from the keyboard (Command + Alt + M or Control + Shift + M) or by clicking the corresponding icon in the DevTools toolbar.

Valence Link

Valence³² is an add-on that comes preinstalled with Firefox’s WebIDE. WebIDE already allows you to connect Firefox’s DevTools to any website or app on Firefox OS and in Firefox for Android. Now, with Valence, you can also connect the tools to Chrome on Android and the desktop and to Safari on iOS and Mac OS X. Valence gives you pretty much all you need for multi-browser testing without having to leave the DevTools you’re used to.

Developer toolbar Link

The developer toolbar³³ has a handy media command³⁴ that’s useful for emulating any media type in the browser. It’s very useful for testing your website’s print CSS, for instance.

Discover, Use and Understand Complex CSS Features Link

CSS can be complex. Some strings of syntax are hard to remember, some you might not even know about, and others, even ones you know of, have effects that are hard to predict. Firefox’s DevTools, being built into the browser, are ideally positioned to give you all of the information necessary to work with the syntax. Let’s see some examples.

CSS properties tooltips Link

The CSS properties tooltips³⁵ help you remember the different values and syntax constructions that properties can have. Firefox makes it super-easy to get documentation for any CSS property directly in the tools where you need it. Right-click on any property’s name in the CSS rules editor to get documentation in a tooltip, with a list of possible values and documentation about them, too.

CSS transforms previewer Link

The CSS transforms previewer³⁶ helps you understand how a given set of transform functions have changed an element. The transform property is the sort of CSS property that is hard to get right just by looking at the code; a visual rendering of what has happened is usually much better. The CSS transform previewer highlights the element as it was before and after it got transformed, so that you can easily see the effect of the transformation.

CSS filter tooltip Link

Filters are a relatively new feature in CSS and really powerful. With them, you can blur, add shadow or rotate the colors of any element simply. Writing a valid CSS filter function isn’t the easiest thing in the world, and you can chain as many functions as you want, so Firefox’s DevTools has a handy tooltip that allows you to create filters³⁷ in a simple and visual way.

Miscellaneous Tips and Tricks Link

Ever need to take a screenshot of all or part of a page? Capturing web pages or parts of web pages as images is a powerful way to show a design or a bug to other people. Doing this in Firefox is easy, either by right-clicking on any node in the page inspector or by using the full-page screenshot button in the toolbar (make sure it’s enabled in the options panel first).

Eyedropper tool Link

The eyedropper³⁸ tool is useful for sampling any color from a page. If you need to copy the color of any part of a web page or want to change the color on an element’s CSS property, then use the eyedropper. In the CSS rules view, with an element selected, click on the color swatch next to any color property’s value to change it. Or, in the developer menu bar, choose the eyedropper item to copy colors from the page.

Highlight all elements that match a selector by clicking on the selector icon in the CSS rules view.

CSS rules view search bar Link

Filter styles using the CSS rules view search bar³⁹. This might be helpful if you’re not sure which property has overridden another.

Closing Words Link

Firefox’s DevTools have evolved quite rapidly in recent years, and feature-packed versions are now getting released every six weeks. The project is being driven by an active community⁴⁰, which you can be a part of!

Feel free to download Firefox Developer Edition⁴¹²⁷¹ to try out the latest version of the tools. And stay up to date on new features at Mozilla Hacks⁴².

(rb, jb, al)

Footnotes Link

1. 1 https://www.mozilla.org/en-US/firefox/developer/
2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/10/venkman-opt.png
3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/10/venkman-opt.png
4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/10/dom-inspector-opt.png
5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/10/dom-inspector-opt.png
6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/10/firebug-opt.jpg
7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/10/firebug-opt.jpg
8. 8 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/10/inspector-opt.png
10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/10/inspector-opt.png
11. 11 https://developer.mozilla.org/en-US/docs/Tools/Web_Console
12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/10/console-opt.png
13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/10/console-opt.png
14. 14 https://developer.mozilla.org/en-US/docs/Tools/Debugger
15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/10/debugger-opt.png
16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/10/debugger-opt.png
17. 17 https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/10/netmonitor1-opt.png
19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/10/netmonitor1-opt.png
20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/10/netmonitor2-opt.png
21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/10/netmonitor2-opt.png
22. 22 https://developer.mozilla.org/en-US/docs/Tools/Performance
23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/10/performance1-opt.png
24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/10/performance1-opt.png
25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/10/performance2-opt.png
26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/10/performance2-opt.png
27. 27 https://www.mozilla.org/en-US/firefox/developer/
28. 28 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions
29. 29 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes
30. 30 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector
31. 31 https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
32. 32 https://developer.mozilla.org/en-US/docs/Tools/Valence
33. 33 https://developer.mozilla.org/en-US/docs/Tools/GCLI
34. 34 https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands
35. 35 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties
36. 36 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms
37. 37 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters
38. 38 https://developer.mozilla.org/en-US/docs/Tools/Eyedropper
39. 39 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules
40. 40 https://wiki.mozilla.org/DevTools/GetInvolved
41. 41 https://www.mozilla.org/en-US/firefox/developer/
42. 42 https://hacks.mozilla.org/category/developer-tools/

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like yourself? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook