Mozilla Hacks

What do you want from your DevTools?

By Dan Callahan

Posted on March 26, 2015 in Developer Tools and Featured Article

Editor’s Note: Thanks to everyone who took the time to share constructive feedback and ideas for Firefox Devtools via our UserVoice channel. This forum is no longer available. We’ve decided to move the conversation over to the mozilla.dev.developer-tools Google group, where the conversation is lively, and Firefox DevTools team members are available to answer questions and respond to comments. See you there! (March 2016).

Every tool starts with an idea: “if I had this, then I could do that faster, better, or more easily.” The Firefox Developer Tools are built atop hundreds of those ideas, and many of them come from people in the web development community just like you.

We collect those ideas in our UserVoice forum, and use your votes to help prioritize our work.

Last April, @hopefulcyborg requested the ability to “Connect Firefox Developer Tools to [Insert Browser Here].” The following November, we launched Firefox Developer Edition which includes a preliminary version of just that: the ability to debug Chrome and Safari, even on mobile, from Firefox on your desktop. We called it Valence.

Good ideas don’t have to be big or even particularly innovative as long as they help you accomplish your goals more effectively. For instance, all of the following features also came directly from feedback on our UserVoice forum:

The color picker introduced in Firefox 31

The color picker introduced in Firefox 31

Though somewhat small in scope, each of those ideas made the DevTools more efficient, more helpful, and more usable. And that’s our mission: we make Firefox for you, and we want you to know that we’re listening. If you have ideas for the Firefox Developer Tools, submit them on UserVoice. If you don’t have ideas, vote on the ones that are already there. The right people will see it, and it will help us build the best tools for you.

If you want to go a step further and contribute to the tools yourself, we’re always happy to help people get involved. After all, Mozilla was founded on the open source ideal of empowering communities to collaborate and improve the Internet for all of us.

These are your tools. How could they be better?

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

27 comments

  1. micnic

    Thanks for this great tool!

    I want from DevTools more performance and stability, debugging is quite slow, sometimes the elements panel does not show any element and I have to do a page refresh to see them.

    I want WebSockets in the network panel of DevTools!

    March 26th, 2015 at 08:24

  2. Antoine Turmel

    Something for game developers ?
    Handling, testing gamepad, providing snippets to handle gamepads, canvas stuff ?

    March 26th, 2015 at 08:48

    1. Victor

      Check out our canvas debugger: https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/

      …and the shader editor: https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/

      March 26th, 2015 at 11:42

  3. Egbert Gerber

    A URL filter box, like the one the HttpFox Add-on has, would be extremely helpful!
    https://addons.mozilla.org/en-US/firefox/addon/httpfox/

    March 26th, 2015 at 10:02

  4. Darren

    The ability to slow motion dom changes. I want to be able to slow down dom changes using dev tools so i can see what is happening animation wise, or with dynamic code that is altering the dom. Sometimes its just too fast and difficult to diagnose an issue.

    Having the ability to see dom changes in ‘slow motion’ would be invaluable for animation debugging, etc.

    Saves me dumping stuff to console or trying to set conditional breakpoints.

    March 26th, 2015 at 11:59

    1. Tim Nguyen

      You can check DOM Profiler : https://github.com/captainbrosset/domprofiler

      Doesn’t work on e10s.

      March 27th, 2015 at 10:51

  5. Dimas

    For me giving relevant JS error messages are basic for a good devtool: https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6711274-relevant-js-console-error-messages

    March 26th, 2015 at 14:16

  6. Florent F.

    After Script live edition, my dream would be this:
    https://bugzilla.mozilla.org/show_bug.cgi?id=851014

    Unfortunately, it seems people don’t understand how powerful it would be :( :
    https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6413889-being-able-to-proxy-resources

    Florent

    March 26th, 2015 at 14:55

    1. fvsch

      This can be done using BrowserSync, as far as I can tell. For example:
      https://gist.github.com/fvsch/cf7a7decf639c8372b8c

      And see this issue for more context:
      https://github.com/BrowserSync/browser-sync/issues/514

      March 27th, 2015 at 14:18

    2. sroucheray

      +10

      April 1st, 2015 at 11:45

  7. Brett Zamir

    Memory monitoring, ideally tied to code debugging.

    March 26th, 2015 at 18:45

  8. Surya

    An easy way to see the ip address in the network monitor. It’s there in the old Firebug and I really miss it in the new dev tools!

    March 27th, 2015 at 03:29

    1. J. Ryan Stinnett

      The IP address and port are now displayed in the request details in Firefox Nightly: https://cloudup.com/cujoNDzstAk

      March 27th, 2015 at 09:54

      1. Surya

        Thanks. Last time I checked I didn’t find it there for some reason or an other. But still, it’s more convenient the way it is displayed in Firebug 2.x

        March 27th, 2015 at 12:48

  9. Žilvinas U.

    Ability to filter network requests the same way one can in Google Chrome. Since Network Monitor in Firefox is now kinda useless if you are running into pages which hundreds of requests.

    March 27th, 2015 at 12:16

  10. Luke

    I really hope the view source bug is fixed before the beta becomes the “stable” – this will drive developers bonkers wondering why a changed page looks the same as the previous view-source window:
    https://bugzilla.mozilla.org/show_bug.cgi?id=1146081

    Inspector improvements would be welcome – Lately it seems the “:hover” check doesn’t stick so you can’t see how it affects sub-elements, and sometimes just hovering over something in the devtools will cause it to highlight everything with some property, making screen jibberish.

    March 27th, 2015 at 22:15

  11. niels

    Here are some small wishes

    If I press “install and run” then the debug window should stay open.

    If I press “install and run” while having unsaved files then webide should offer to save them

    A keyboard shortcut for “stop-app”

    It could be nice to have jshint integration.

    March 29th, 2015 at 23:26

  12. Scott

    AngularJS support!

    I’m one of the unfortunate ones who gets to develop in an office where we can’t support chrome due to over-paranoid security teams hearing of a bug long since patched in Chrome and axed it henceforth until the end of time with “better things to do” than revisit it. /shakes-fist

    Being able to render console stack traces, automatically hyperlinking URLs, even with line numbers into the debugger would be a great start. Other enhancements include an Angular scope examiner and scope.$emit/$broadcast trackers would also be beneficial. I could go on for days, but anything that helps support AngularJS would be of immense help!

    April 1st, 2015 at 08:57

    1. J. Ryan Stinnett

      There is an experimental port of the AngularJS DevTools extension for Firefox: https://github.com/angular/angularjs-batarang/pull/106

      It’s been some time since the last update, but hopefully this brings at least some of what you’re looking for.

      April 1st, 2015 at 11:08

  13. David Alan Hjelle

    At the moment, the biggest reason I am using Chrome’s DevTools instead of Firefox’s is their support of source maps within the console for errors and such. (i.e. a thrown error’s stack trace will show the original script’s filename and line number, rather than a compiled or minified number). See https://bugzilla.mozilla.org/show_bug.cgi?id=670002 for the bug report and current progress.

    April 1st, 2015 at 10:12

  14. Don

    Ability to clear sessionStorage and indexDB

    April 1st, 2015 at 11:56

  15. Taiger

    Native Acebug: https://addons.mozilla.org/en-us/firefox/addon/acebug/

    April 1st, 2015 at 12:03

  16. Tom Jensen

    Would love it if you could manage localStorage and sessionStorage. As of now it only seems to allow viewing the data.

    April 1st, 2015 at 14:21

  17. J W

    I would like the debugger to keep working after 30 mins of use. After a while, you can’t even set breakpoints and it has to be restarted.

    April 2nd, 2015 at 15:19

  18. JAM

    Some kind of accessibility tools would be nice!

    April 7th, 2015 at 08:37

  19. Bundyo

    Ability to copy all URLs or to open them in new tabs would be nice.

    April 7th, 2015 at 21:12

  20. Egbert Gerber

    In Network panel, sometimes one needs to capture only some of the requests that occur upon page load. So how about adding start/stop or pause buttons for the network panel, like the ones the HttpFox Add-on has?
    https://addons.mozilla.org/en-US/firefox/addon/httpfox/

    April 14th, 2015 at 07:41

Comments are closed for this article.