Firefox Developer Tools ideas

Welcome to the feedback channel for Firefox Developer Tools. This is a place for constructive feedback around the tools with ideas and feature suggestions. It is not a support forum or place to report bugs. For support, please go to the #devtools channel on Mozilla IRC or the firefox-developer-tools tag on Stack Overflow, and for reporting bugs, go to Bugzilla.

The documentation on how the Developer Tools work is available on MDN.

My idea is:

You've used all your votes and won't be able to post a new idea, but you can still search and comment on existing ideas.

There are two ways to get more votes:

  • When an admin closes an idea you've voted on, you'll get your votes back from that idea.
  • You can remove your votes from an open idea you support.
  • To see ideas you have already voted on, select the "My feedback" filter and select "My open ideas".
(thinking…)

Enter your idea and we'll search to see if someone has already suggested it.

If a similar idea already exists, you can support and comment on it.

If it doesn't exist, you can post your idea so others can support it.

Enter your idea and we'll search to see if someone has already suggested it.

  1. Display pseudo classes of an element in the DOM tree

    It would be great if we can see the pseudo classes associated to an element in the DOM tree like we can see the js events.

    6 votes
    Vote
    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      You have left! (?) (thinking…)
      0 comments  ·  Flag idea as inappropriate…  ·  Admin →
    • Simulate a slow connection.

      Got from a comment in: https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/5895504-give-me-a-way-to-fully-emulate-the-mobile-browse

      ------
      Anonymous commented · July 08, 2015 04:02 ·
      Simulating a slow connection would be great too.
      ------

      4 votes
      Vote
      Sign in
      Check!
      (thinking…)
      Reset
      or sign in with
      • facebook
      • google
        Password icon
        I agree to the terms of service
        Signed in as (Sign out)
        You have left! (?) (thinking…)
        0 comments  ·  Flag idea as inappropriate…  ·  Admin →
      • Add a mechanism to change the background color of the preview images

        When you are debugging images that are white on transparent background (eg icons), image previewer also has a white background and you see "nothing".

        It would be great to have a similar mechanism to change of the color units in the CSS inspector (Ctrl + Shift), that alternase the background color [white -> gray -> black -> ...]

        1 vote
        Vote
        Sign in
        Check!
        (thinking…)
        Reset
        or sign in with
        • facebook
        • google
          Password icon
          I agree to the terms of service
          Signed in as (Sign out)
          You have left! (?) (thinking…)
          1 comment  ·  Flag idea as inappropriate…  ·  Admin →
        • log all events for a given element

          enable logging all events for a given element.
          same as the http://getfirebug.com/wiki/index.php/HTML_Panel#Context_Menu 'Log Events' entry
          and the
          monitorEvents api
          https://getfirebug.com/wiki/index.php/MonitorEvents
          from firebug

          this helps to test what events get called and so what can be usefull to handle in the site/app

          3 votes
          Vote
          Sign in
          Check!
          (thinking…)
          Reset
          or sign in with
          • facebook
          • google
            Password icon
            I agree to the terms of service
            Signed in as (Sign out)
            You have left! (?) (thinking…)
            0 comments  ·  Flag idea as inappropriate…  ·  Admin →
          • Show what rule is overriding a CSS property you expected to be applied

            Often when you write CSS, and you want an element to have a specific property (say "padding: 0"), you might find that the property is mysteriously overridden by another rule (say with "padding: 5px"), and it is displayed strike-through. To help fix this, it would be great to see something like "property overridden by rule #something in style.css:42".

            1 vote
            Vote
            Sign in
            Check!
            (thinking…)
            Reset
            or sign in with
            • facebook
            • google
              Password icon
              I agree to the terms of service
              Signed in as (Sign out)
              You have left! (?) (thinking…)
              0 comments  ·  Flag idea as inappropriate…  ·  Admin →
            • Connexion throttling

              It's been a while since I was looking for such a feature, and Chrome added it this summer.
              As a web developer, I would love a native tool to reduce bandwidth in order to simulate a slow mobile (or ADSL) connexion to improve the user experience in those cases.

              78 votes
              Vote
              Sign in
              Check!
              (thinking…)
              Reset
              or sign in with
              • facebook
              • google
                Password icon
                I agree to the terms of service
                Signed in as (Sign out)
                You have left! (?) (thinking…)
                2 comments  ·  Flag idea as inappropriate…  ·  Admin →
              • Multiple sizes in responsive design mode

                It would be really handy to be able to have multiple size displays visible in RDM at the same time

                The harder but very cool option would be somehow having the same page rendered twice so you could interactively edit CSS and see the results at different breakpoints but that'd probably be complicated to do with JavaScript

                32 votes
                Vote
                Sign in
                Check!
                (thinking…)
                Reset
                or sign in with
                • facebook
                • google
                  Password icon
                  I agree to the terms of service
                  Signed in as (Sign out)
                  You have left! (?) (thinking…)
                  4 comments  ·  Flag idea as inappropriate…  ·  Admin →
                • A JS editor

                  Suppose we could edit JS just as we can edit CSS with the CSS editor. So we can change things on the fly and get instant feedback without having to reload the page. Right now the most I can do with regards to JS code is... debug it, which is a bit limiting.

                  It'd be awesome if I could edit the code of a function and have it automatically reevaluated and stuff. Not sure if this is even possible at all but hey this is an idea.

                  386 votes
                  Vote
                  Sign in
                  Check!
                  (thinking…)
                  Reset
                  or sign in with
                  • facebook
                  • google
                    Password icon
                    I agree to the terms of service
                    Signed in as (Sign out)
                    You have left! (?) (thinking…)
                    12 comments  ·  Flag idea as inappropriate…  ·  Admin →
                  • Inspection/debugging of stacking contexts for elements

                    Sometimes there are layering problems between different sets of elements, due to different stacking contexts:
                    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

                    Currently when you come across an element that's not showing as it should (e.g. Elem A has a higher z-index than Elem B, but shows underneath it), trying to work out what's causing the stacking context is a pain.
                    It basically involves walking up the DOM tree and looking at the styles of each ancestor node to see which CSS rule is creating the stacking context.

                    There are two different tools I can think of:
                    * When inspecting a single element, show what its…

                    30 votes
                    Vote
                    Sign in
                    Check!
                    (thinking…)
                    Reset
                    or sign in with
                    • facebook
                    • google
                      Password icon
                      I agree to the terms of service
                      Signed in as (Sign out)
                      You have left! (?) (thinking…)
                      3 comments  ·  Flag idea as inappropriate…  ·  Admin →
                    • Live html editor like in firebug

                      Hello there!
                      The only think that keep me from switching to firefox devtools completely is the luck of live html editing.

                      In firebug when you inspect the Dom tree there's an edit button on the left top corner that lets you edit the html I'm real time. This is very very helpful when you build or edit html frameworks.

                      Right now you can right click and edit the html but to see the changes you have to click outside of the box.

                      Hope you understand! Keep up the good work :)

                      73 votes
                      Vote
                      Sign in
                      Check!
                      (thinking…)
                      Reset
                      or sign in with
                      • facebook
                      • google
                        Password icon
                        I agree to the terms of service
                        Signed in as (Sign out)
                        You have left! (?) (thinking…)
                        0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                      • 1 vote
                        Vote
                        Sign in
                        Check!
                        (thinking…)
                        Reset
                        or sign in with
                        • facebook
                        • google
                          Password icon
                          I agree to the terms of service
                          Signed in as (Sign out)
                          You have left! (?) (thinking…)
                          1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                        • show a diff of style changes manually entered in the styles pane

                          When you make style changes, it would be awesome to have an option to show all your changes across the page together, for ease of extracting experimental changes.

                          E.g. I've made changes to a bunch of stuff, trying out a new style, and now I have to remember the changes I made, or at least the dom nodes so I can navigate to them and copy them out.

                          92 votes
                          Vote
                          Sign in
                          Check!
                          (thinking…)
                          Reset
                          or sign in with
                          • facebook
                          • google
                            Password icon
                            I agree to the terms of service
                            Signed in as (Sign out)
                            You have left! (?) (thinking…)
                            1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                          • Properly simulate touch events

                            When Simulate Touch Events is enabled in the responsive view, make the mouse cursor behave like a finger when inside the view:

                            * Make the cursor bigger (to simulate a finger)
                            * Emulate drag scrolling (so mouse wheel and scrollbar do not work, but click-dragging the mouse scrolls the page/element)
                            * Change :hover behaviour to match an actual touch screen device

                            Of course this won't exactly match something like a Windows 8.1 machine with both touchscreen and mouse, so maybe make this a touchscreen-only mode?

                            34 votes
                            Vote
                            Sign in
                            Check!
                            (thinking…)
                            Reset
                            or sign in with
                            • facebook
                            • google
                              Password icon
                              I agree to the terms of service
                              Signed in as (Sign out)
                              You have left! (?) (thinking…)
                              2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                            • Browse to function declaration when clicking its name in console

                              I'd like to be able to find the function declaration in the source (in the "Debugger" tab), when clicking on its name in the Console.

                              Right now, when one writes a function name (say "foo") in the console and presses enter, a "function foo()" string appears (provided it is actually declared somewhere, and is in scope). The name "foo" is clickable and opens the function object properties in the properties pane on the right. I'd like this behavior to change, or get enhanced. Clicking on foo, could bring you to the "Debugger" tab, and place the cursor on the "function…

                              8 votes
                              Vote
                              Sign in
                              Check!
                              (thinking…)
                              Reset
                              or sign in with
                              • facebook
                              • google
                                Password icon
                                I agree to the terms of service
                                Signed in as (Sign out)
                                You have left! (?) (thinking…)
                                0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                              • Save CSS changes from Inspector panel

                                Being able to save changes to the stylesheet from the inspector panel instead of the style editor would be an absolute game changer. Emmet LiveStyle that works with Chrome does that, but I haven't found anything that works with Firefox. My workflow is typically use inspector to find object I'm styling, find the line number then edit in Sublime. If I'm experimenting I'll try it out in inspector, then make those changes in Sublime. I'd love if those style changes were just made in browser.

                                6 votes
                                Vote
                                Sign in
                                Check!
                                (thinking…)
                                Reset
                                or sign in with
                                • facebook
                                • google
                                  Password icon
                                  I agree to the terms of service
                                  Signed in as (Sign out)
                                  You have left! (?) (thinking…)
                                  1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                                • Sort new CSS rules automatically from a-z... like in firebug!

                                  It would be nice to have a automatic sorting in the CSS rules form a-z like this:

                                  .foo {background-color: red; filter: blur(20px); padding: 10px; z-index: 1000 }

                                  In the moment its sorted..but if you add some a news styles it will not be sorted from a-z like in firebug! I know its cosmetic but useful!

                                  4 votes
                                  Vote
                                  Sign in
                                  Check!
                                  (thinking…)
                                  Reset
                                  or sign in with
                                  • facebook
                                  • google
                                    Password icon
                                    I agree to the terms of service
                                    Signed in as (Sign out)
                                    You have left! (?) (thinking…)
                                    0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                  • A shortcut for the eydropper!!!!!

                                    Would be really, really, really helpfull to have a keyboardshortcut for the new eyedropper!!!

                                    9 votes
                                    Vote
                                    Sign in
                                    Check!
                                    (thinking…)
                                    Reset
                                    or sign in with
                                    • facebook
                                    • google
                                      Password icon
                                      I agree to the terms of service
                                      Signed in as (Sign out)
                                      You have left! (?) (thinking…)
                                      2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                    • Complete Selector Path like in Firebug

                                      It would be very helpful to let users copy the complete CSS path for an element...not only the explicit selector! Maybe you can add a second option for that in the context menu!???

                                      11 votes
                                      Vote
                                      Sign in
                                      Check!
                                      (thinking…)
                                      Reset
                                      or sign in with
                                      • facebook
                                      • google
                                        Password icon
                                        I agree to the terms of service
                                        Signed in as (Sign out)
                                        You have left! (?) (thinking…)
                                        3 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                      • Use Tab key to jump from one value to the next in the box model...

                                        In firebug I can jump e.g. form padding-top to padding-right only with the tab key. This is a must have for the inspector! Please add this!
                                        THX! :)

                                        8 votes
                                        Vote
                                        Sign in
                                        Check!
                                        (thinking…)
                                        Reset
                                        or sign in with
                                        • facebook
                                        • google
                                          Password icon
                                          I agree to the terms of service
                                          Signed in as (Sign out)
                                          You have left! (?) (thinking…)
                                          2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                        • Support source maps like any other modern browser

                                          A lot of people have started building frontend application with tools like [browserify](http://browserify.org/) or [webpack](https://github.com/webpack/webpack). These tools allows to pack CommonJs/AMD modules for the browser and debugging the applications built with them heavily relies on source maps.

                                          Let's consider for example, the following project:
                                          https://github.com/gaearon/flux-react-router-example

                                          The first problem is that Firefox doesn't use source maps in the web console (this issue https://bugzilla.mozilla.org/show_bug.cgi?id=670002 was opened 3 years ago), so essentially every single log is useless because it's impossible to see from where it has been originated.

                                          Compare the following:
                                          http://i.imgur.com/fDCJONW.png
                                          With:
                                          http://i.imgur.com/OumC301.png
                                          This is supported by Chrome,…

                                          35 votes
                                          Vote
                                          Sign in
                                          Check!
                                          (thinking…)
                                          Reset
                                          or sign in with
                                          • facebook
                                          • google
                                            Password icon
                                            I agree to the terms of service
                                            Signed in as (Sign out)
                                            You have left! (?) (thinking…)
                                            2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                          ← Previous 1 3 4 5 19 20
                                          • Don't see your idea?

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base