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.

    327 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…)
      13 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!

      108 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 →
      • Scrolling mouse wheel on css numeric values should increment/decrement them

        Chrome already allows scrolling to change CSS values. Firefox should do the same.

        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…)
          0 comments  ·  Flag idea as inappropriate…  ·  Admin →
        • Improve general devtools performance, especially console tab

          I started using Firefox devtools instead of Firebug because if was much faster. But it seems days have changed.

          Some pages (for example https://fezvrasta.github.io/bootstrap-material-design/) are rather fast when firefox devtools are not open. They load decently when devtools are open, with Inspector tab selected for example... but when you try to load this page while having devtools open, with Console tab selected, it's very, very slow !

          I have this problem on Linux and OS x. Chrome does not seem affected by this problem.

          I really think performance should be considered as a major feature for devtools !

          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…)
            1 comment  ·  Flag idea as inappropriate…  ·  Admin →
          • showing data in network response tab

            When inspecting items in the Response Tab, it would be usefull to have some options.

            Sometimes its JSON and its all collapsed. Maybe and expand all, or view as structured string.

            Sometime its a long string, and you have to scroll because it doesn't soft break.

            sometimes api's return JSON but don't set the header so its not formatted at json. Maybe autodetect.

            Thanks

            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…)
              4 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 :)

              52 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 →
              • 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.

                72 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 →
                • 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.

                  164 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 →
                  • Offer a minified (toolbar) mode

                    The Firefox devtools could offer a minified mode, where only the top row (tabs/buttons) of the devtools are shown, and stacked at the bottom of the page.

                    Quick mock-up: https://dl.dropboxusercontent.com/u/145744/fx-devtools-minified.png

                    Situations in which such a mode would be useful:

                    1. On smaller screens (e.g. 11" and 13" laptops).
                    2. As a way to access specific tools quicky.
                    3. As a way to monitor script errors, console messages, network requests, etc., using counters or indicators to show that there is new logged activity. For instance this would allow browsing and using several pages from a site and watching out for JS…

                    27 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 →
                    • Add type inference to JS debugger

                      Add type inference to the JS debugger, like in WebKit's inspector.

                      See the following tweet including a picture : https://twitter.com/kangax/status/558974257724940288/photo/1

                      28 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 →
                      • 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.

                        115 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 →
                        • 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.

                          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…)
                            1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                          • Add extra functionality to console.log (custom line numbers, images, buttons)

                            It should be standards-compatible like the %c syntax, but could add extra information like
                            * line numbers other than where console.log was called
                            * inline-images or screenshots of what the page looked like when the log was created
                            * buttons or controls like sliders that can have events attached
                            * updatable graphs of performance or other data

                            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 →
                            • Breakpoints for variables

                              Allow to set breakpoints on JS variables. So once variable is read or written by some code, execution immediately stops on this code. Breakpoint options could allow to pass reads but break on writes, or filter by module.

                              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 →
                              • Relevant JS Console error messages

                                When I debug with Firefox an app using JQuery the console don't show the relevant js error, but the jquery.js line.

                                Example: TypeError: ev is undefined jquery-1.11.1.min.js line 2 > eval:217

                                The 'ev' is not deffined in some line of my app, not in jquery. With Chrome I can view the line where ev is really undefined.

                                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 snippets system to webIDE

                                  I find that a snippets completion system would be a very useful addition to webIDE - instead of typing 'function' over and over again, one could simply type 'f', press tab and get the result 'function'.

                                  Adding options for user created snippets would allow developers to tailor it to their needs.

                                  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 →
                                  • source panel like chrome

                                    User can show it folder structure in js, css ,images category wise
                                    and easy to search file name ,and navigate to each other.
                                    like example in Google chrome

                                    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 →
                                    • Undocked developer tools always on top

                                      Sometimes we need to show the developer tools on a separated window, but we can't click the browser window without bring it to the front of the developer tools. It would be great to be able to see the developer tools while iterate with the browser without the need of two monitors. Can an `always on top` setting be added?

                                      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 →
                                      • Inspect print version

                                        Add an abitity to inspect not only the screen version, but also a print version of the site. It's useful for inspecting @media print styles

                                        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 →
                                        • 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,…

                                          22 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 17 18
                                          • Don't see your idea?

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base