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

    298 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…)
      10 comments  ·  Flag idea as inappropriate…  ·  Admin →
    • Memory monitoring

      I want to be able to monitor memory usage in my mobile web app. I want my mobile ap to use as little memory as possible.

      208 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…)
        started  ·  9 comments  ·  Flag idea as inappropriate…  ·  Admin →
      • Make the network panel always active

        Almost every time I open the network panel the first thing I have to do is reload the page I was on because it wasn't active when the requests I care about were made.

        I can understand if there are concerns about memory usage on busy AJAX pages but it seems like at least the level of information present in the Resource Timing API would be enough for the vast majority of tasks I use the network panel to answer.

        203 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…)
          6 comments  ·  Flag idea as inappropriate…  ·  Admin →
        • Inspect websocket connections

          It will very useful for who works with websockets inspect the traffic and connections.

          200 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…)
            6 comments  ·  Flag idea as inappropriate…  ·  Admin →
          • CSS Animation Editor

            CSS frame-by-frame animation editor. I believe someone on devtools started this project (might have been Paul Rouget?) and I would love to see it resurrected.

            157 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…)
              started  ·  5 comments  ·  Flag idea as inappropriate…  ·  Admin →
            • Can you please add user agent switcher in tool?

              Add device, screen size and user agent in under user switcher control.

              146 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 →
              • Log ajax request / response in the Web Console

                Firebug has a nice console representation of both sides of an AJAX request, including activity indicators when the requst is still pending.

                related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1004535

                134 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 →
                • Give me a way to *fully* emulate the mobile browser in FF desktop

                  Not just emulating dimensions for responsive. Browser should override media queries, lie about other feature detects, etc, so my mobile app ACTUALLY WORKS like it's on mobile.

                  121 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 →
                  • Grey out non-applied fonts

                    Consider this example CSS rule:

                    body, td, th, input, select, option, optgroup, .text_input {
                    font-family: "Open Sans","Helvetica Neue",Arial,Helvetica,sans-serif;
                    }

                    Only one of these fonts is going to be applied on the page, depending on what is available on the system.

                    It would be nice if the devtools' Rules view would grey out all the fonts that are not actually applied, so as to let the user know which one got applied in the end.

                    related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=994559

                    114 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…)
                      planned  ·  0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                    • View Source in a tab

                      Opening a new small text window for viewing source is so 1999. Let's open it in a new tab.

                      106 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…)
                        5 comments  ·  Flag idea as inappropriate…  ·  Admin →
                      • 81 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…)
                          planned  ·  0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                        • Recalculate JS line numbers after pretty print

                          Whenever there is any kind of console notification (log, warn, error, etc) it prints the line number, and clicking that takes you to that line in the debugger. However, if your code is minified that number is invariably 1 or 2. There is already the option to pretty print minified code, but it would be nice if after prettifying, you could then jump to the actual line number that triggered the console alert.

                          Chrome currently supports this.

                          Thanks for all the awesome work everyone!

                          80 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 →
                          • CSS Autocompletion: Show all possible values for a given property

                            Show CSS values for a property without waiting for first character

                            75 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 →
                            • easier cookie deletion

                              Deleting a cookie right now is quite cumbersome. You have to bring up the developer toolbar, then use the cookie list + cookie delete commands.

                              It would be a lot easier if the cookies could be deleted directly from the tools. e.g in the network tab, where cookies are listed.

                              69 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 →
                              • Security Tab - to show TLS/SSL, CSP, SRI, etc features

                                Add a "Security" tab to highlight features that the browser provides.

                                e.g. most developers have no idea what a CSP (Content Security Policy) header is... and even if implemented, the only way to view it is though the network headers (not easy to read).

                                This new tab can help list features, and make suggestions on how to make improvements (e.g. adding HSTS, or HPKP, or X-XSS-Protection, or X-Frame-Options headers).

                                I've started making a mockup on GitHub, so you can click around to see what could be included (I bet there is at least one thing on there you didn't know…

                                66 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…)
                                  5 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                • Support live editing with any external editor

                                  The architecutre of fb-flo is very nice: http://facebook.github.io/fb-flo/

                                  It sounds like it needs some deep JavaScript VM foo to do hot code reloading.

                                  Maybe a Fx Addon for Facebook Flo support?

                                  Maybe a from scratch way to support any external editor with any codebase?

                                  65 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 →
                                  • Make collapsing margins visible and show from which element they come from

                                    When inspecting HTML elements, CSS margins which collapsed should be highlighted with a new color. It also would be nice if it was possible to show some information about the elements involved and which the margin of which element is visible.

                                    63 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 →
                                    • Ability to resize columns in network pane

                                      Currently the columns in the network pane are fixed width. Sometimes I want quickly look at a number of requests which all go to the same domain and have long urls (the part I want to see is at the end).

                                      54 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 →
                                      • Better output for objects and arrays

                                        The way it is nowadays, we can only see one object at time!
                                        It would be much better if we could, for example, expand or compact multiple objects ... this way, we could even compare objects or arrays.

                                        54 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 →
                                        • Show compressed and uncompressed size of http responses in network tab

                                          The Size column in the list of http requests in the network tab only shows a number. It would be useful to know if this is the compressed size, how.much the uncompressed is, a percentage, etc

                                          45 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…)
                                            planned  ·  4 comments  ·  Flag idea as inappropriate…  ·  Admin →
                                          ← Previous 1 3 4 5 18 19
                                          • Don't see your idea?

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base