Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Revisiting Firefox’s DevTools

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 Edition41271 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.

UI of the Venkmann JavaScript debugger2
Venkman, the JavaScript debugger. (View large version3)

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.

DOM Inspector add-on4
DOM Inspector add-on. (View large version5)

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.

The first Firebug UI6
Firebug, an all-in-one developer tool. (View large version7)

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 inspector8 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 Page Inspector9
The page inspector. (View large version10)

The web console11 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 web console12
The web console. (View large version13)

The JavaScript debugger14 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 JavaScript debugger15
The JavaScript debugger. (View large version16)

The network monitor17 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 network monitor's requests list18
The network monitor’s requests list. (View large version19)
The network monitor performance analysis20
The network monitor’s performance analysis. (View large version21)

The performance tools22 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.

The performance tool's waterfall graph23
The performance tool’s waterfall graph. (View large version24)
The performance tool's JavaScript flame chart25
The performance tool’s JavaScript flame chart. (View large version26)

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 Edition41271 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 function28 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 rules29. 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 inspector30 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 view31 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

Valence32 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 toolbar33 has a handy media command34 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 tooltips35 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 previewer36 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 filters37 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 eyedropper38 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.

Filter styles using the CSS rules view search bar39. 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 community40, which you can be a part of!

Feel free to download Firefox Developer Edition41271 to try out the latest version of the tools. And stay up to date on new features at Mozilla Hacks42.

(rb, jb, al)

Footnotes Link

  1. 1 https://www.mozilla.org/en-US/firefox/developer/
  2. 2 /wp-content/uploads/2015/10/venkman-opt.png
  3. 3 /wp-content/uploads/2015/10/venkman-opt.png
  4. 4 /wp-content/uploads/2015/10/dom-inspector-opt.png
  5. 5 /wp-content/uploads/2015/10/dom-inspector-opt.png
  6. 6 /wp-content/uploads/2015/10/firebug-opt.jpg
  7. 7 /wp-content/uploads/2015/10/firebug-opt.jpg
  8. 8 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
  9. 9 /wp-content/uploads/2015/10/inspector-opt.png
  10. 10 /wp-content/uploads/2015/10/inspector-opt.png
  11. 11 https://developer.mozilla.org/en-US/docs/Tools/Web_Console
  12. 12 /wp-content/uploads/2015/10/console-opt.png
  13. 13 /wp-content/uploads/2015/10/console-opt.png
  14. 14 https://developer.mozilla.org/en-US/docs/Tools/Debugger
  15. 15 /wp-content/uploads/2015/10/debugger-opt.png
  16. 16 /wp-content/uploads/2015/10/debugger-opt.png
  17. 17 https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
  18. 18 /wp-content/uploads/2015/10/netmonitor1-opt.png
  19. 19 /wp-content/uploads/2015/10/netmonitor1-opt.png
  20. 20 /wp-content/uploads/2015/10/netmonitor2-opt.png
  21. 21 /wp-content/uploads/2015/10/netmonitor2-opt.png
  22. 22 https://developer.mozilla.org/en-US/docs/Tools/Performance
  23. 23 /wp-content/uploads/2015/10/performance1-opt.png
  24. 24 /wp-content/uploads/2015/10/performance1-opt.png
  25. 25 /wp-content/uploads/2015/10/performance2-opt.png
  26. 26 /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/

↑ Back to top Tweet itShare on Facebook

Advertisement

Patrick Brosset is an engineer at Mozilla. He currently works in the Firefox Devtools team, on various things like the page inspector, style editor and animation tools.

  1. 1

    Daniel Glazman

    December 30, 2015 1:56 pm

    The DOM Inspector is much older than that IIRC. We were already using it at Netscape. And Venkman has only one trailing n and is also older than that.

    1
    • 2

      Patrick Brosset

      December 31, 2015 10:52 am

      Thanks Daniel. Those are the info I was able to gather. Happy to correct if someone can provide more accurate dates.

      0
  2. 3

    It doesn’t matter how good are the tools, firefox leaks memory as a monster
    Even I, that am using firefox for years by political conviction, have to change to chrome for my development purposes due to this problem that makes it unresponsible while you use it
    If mozilla people want to reraise the firefox usage this problem needs to be solve as #1 priority
    Mozilla: stop anything you’re doing to solve the memory leak issue in your browser. FOCUS or DIE

    -25
    • 4

      What on earth are you talking about? I do not experience your problems. Not on OSX, Windows or Linux. It’s probably a plugin that is giving you problems.

      11
    • 5

      I have tested memory usage with using Firefox for one whole day and Chrome for another day, Chrome didn’t even made the whole day since it’s memory usage was so much after couple of hours, I couldn’t even use other applications in my system.

      5
    • 6

      To anyone here talking about their system running out of memory because of their browser. 90% of the time it’s because of a plugin you’re using causing a memory leak. The other times, it’s because the code on the website you’re on was poorly written.

      As a developer, the solution is simple… buy more RAM. It’s very cheep these days. I loaded up 24GB of RAM in my dev machine and have yet to run into an issue with memory on any 64bit applications. You’ll be surprised how much faster you can get things done when you spend $50-$80 bucks on some RAM for your machine (as SSD wouldn’t hurt either).

      7
      • 7

        “…buy more RAM. It’s very cheep these days…”

        Birds cheep; RAM is cheap.

        Actually ECC RAM (which my Mac requires) may not be so cheap, but I get by with 16 GB.

        0
    • 8

      I’ve used Firefox since the very first released version. In the past memory was a big issue, but that ended a number of years ago.

      As Chris says below plugins are normally the “leak” issue now. Not all, some. And to make it worse, when some are combined with others it can get even worse.

      Chrome on the other hand creates process after process and consumes memory like a drunk sucking on a bottle of whiskey.

      I only have 8GB RAM in my desktop and Firefox is open all the time with multiple tabs, 56 plugins, and I have no issue.

      5
    • 9

      The Flash plugin is often leaking memory. I saw several old bug reports about it.

      But Firefox definitely isn’t a light-weight browser anymore. There is too much stuff built-in which I never use, e.g. Sync.

      0
    • 10

      Garito, I am surprised by your comment that you use Firefox out of political conviction. I uninstalled Firefox from all my devices about 3 years ago and have never used it since. This article on the dev tools drew me back. It does feel like picking up again with an old friend, an old friend who killed my dog, crashed my Mustang, and who’s been in jail for ‘vacations’ with underage Thai ladyboys, but an old friend nonetheless. I won’t leave my computer on when I leave the room, though.

      0
  3. 11

    Not a word about accessibility?

    0
    • 12

      Patrick Brosset

      December 31, 2015 10:51 am

      Indeed, I chose to focus on other features of the tools in this article. We do have plans for accessibility-related tools in Firefox though.

      3
  4. 13

    Garito: most people aren’t experiencing what you describe or we *would* drop everything to work on it. If possible, could you please try to diagnose the exact issue you’re experiencing and file a bug if you have a way to consistently reproduce it?

    I looked for a support page that says what I want, and failed to find it, but this general troubleshooting page covers most of it. My brief strategy for looking at problems like this: (1) make sure you can reproduce the problem at will, (2) restart in safe mode and see if it still happens, (3) try a different browser (Chrome/IE/Safari) to test whether a page is just gobbling too much memory, (4) go to the url about:memory and see what it tells you. If there still appears to be an issue, file a bug report and attach the memory info you get from about:memory’s “Save memory reports”.

    Thanks!

    3
  5. 14

    What I really miss is a simple way to simulate network speed, like the “throttle”-option in Chrome. This shouldn’t be too hard, and I hope we’ll see it in 2016!

    4
  6. 16

    hi

    does the Firefox developer edition have mechanism to test and debug REST calls, or do we use an addon made for “normal” Firefox?

    thanks

    0
  7. 18

    Yehia A.Salam

    January 3, 2016 9:44 pm

    How about a chrome Devon tools comparison?

    -1
  8. 20

    Saurabh Jinturkar

    January 7, 2016 1:51 am

    I think Firefox should have a tool to test REST APIs. Something similar to Postman. It will be really handy.

    2
  9. 21

    Very powerful tool. I’ll say, a ‘must have’ for developers.

    0
  10. 22

    Firefox devtools are a total marvel. Big ups to the Moz team working on them. I’ve been weening myself off of Firebug.

    It’s really hard to get used to the slightly different key command for “inspect” after close to a decade of Firebug! Wish that were a built in easy swap for transitioning. Sure it’s a google away but it might be cool to just offer it up front to those who have Firebug installed. Particularly because Chrome and Firebug use the same shortcut for inspect.

    The other thing I miss is the ‘large console’ view. I know you can use the scratchpad (and, I imagine, the IDE which I’ve yet to really investigate), but it’s kind of clumsy with the output; having it right there integrated into the Firebug console is awfully nice.

    Totally minor wishes.

    There are other incredibly nice features in the dev tools not mentioned in the article. The main one I found missing is the 3D view. It’s just brilliant. Brilliant! You can debug DOM problems that way (something not closed…? It’ll be obvious) and it’s an incredible learning tool when looking at other sites.

    For what it’s worth, I do find Firefox slowing after hours and hours of use with too many tabs open. Not sure if it’s Firefox or a plugin or my use or whatever but it doesn’t matter: Restartless Restart is a brilliant little plugin. One keystroke and you’ve started fresh after 6 seconds.

    1
  11. 23

    One of the features I mostly use FF Dev Edition for, you didn’t cover. You can see in the DOM inspector which elements have JS functionality bound to them, indicted by a little [ev] button after the tag. If you click [ev] it will then show all the bounf functions and which files they’re in. This has been a godsend when working with unfamiliar code.

    0
  12. 24

    daniel thornbury

    February 20, 2016 1:12 am

    I’ve been using the Firefox developer edition now for a while now. I push the browsers a little further than most and rely heavily on dev tools – Chrome was consistently locking up and eating memory (stopped using it altogether at v46) but Firefox is a little better and the inspectors/tools are considerably nicer to work with. It’s also interesting how many website just don’t work in Firefox – seems to have dropped off the browser testing list for a lot of devs.

    0

↑ Back to top