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

    189 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 →
    • Ability to disable security checks

      Chrome supports a --disable-web-security command line option to bypass same-origin policies (and explicit CORS settings), to make it easier to test requests / web sockets in development. It also has a --ignore-certificate-errors to allow self-signed at other bad certificates. It would be nice to have similar things in Firefox to ease development.

      As development options, it is fine to make this hard to use as long as it can be set up once and reused later. Don't want to let random grandmas use it for Facebook.

      26 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 emmet support to dev tools

        I think emmet (http://emmet.io) is a brilliant to minimize the amount of code you have to write. It's great for moving fast and I'd love to have this available in my dev tools.

        I've contacted the developer before asking him to merge it with google dev tools. He said no, unless the google team pays him to do it.

        I've also requested this feature multiple times with the google dev tools team.

        21 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 →
        • Make the close button of the find toolbar easier to see

          The close button appears on the far right of the find (ctrl + F) toolbar and is nearly invisible with the 'Developer Edition' theme of Firefox. Please make it more visible, like the close button of the tabs of each page.

          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 →
          • Right click "open image with an external editor" like photoshop, gimp or stuff like that!

            It would be a really great feature to have an built-in "open image with external editor" option to firefox where users can choose there own programm!

            I know... there is a cool addon called Open with photoshop" which is very handy:

            https://addons.mozilla.org/de/firefox/addon/open-with-photoshop/

            But sometimes it dont work. I think it depends on the used Firefox Version. In Version 39 it works but in the newest developer Version it don´t work. :(

            To avoid to much addons I would love to see such a feature in the newer versions of firefox! :)

            5 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 →
            • shader compilation result

              In the shader debugger for webgl, the ability to see the resulting code sent to the GPU once firefox compiled it from ESSL to OpenGL/directx
              ( much like the https://github.com/KhronosGroup/WebGL/blob/master/sdk/tests/conformance/extensions/webgl-debug-shaders.html extension does)

              Would greatly help shader optimisation ?

              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 →
              • change syntax highlighting colors

                We need the ability to change syntax highlighting colors in the dev tools, a simple theme system. I'm doing most of my CSS in Firefox now and while the default colors are okay, they're not what I'm used to, and it's confusing when jumping back and forth between my code editor (TextMate) and FireFox. It really sucks that classes and attributes are the same color.

                This should be implemented so that we can save our settings and share them as XML files or another file format that is a lightweight, standard format that anyone can open and edit easily.

                If…

                12 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 →
                • Syntax highlighting for alternative languages

                  We have source maps which give us the ability to debug languages like typescript and dart, but at least for typescript there is no syntax highlighting in the dev tools debugger. This is a pain for larger programs!

                  We can debug these languages nicely, now let's view them nicely as well.

                  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…)
                    2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                  • Don't limit me to only one development tool at a time

                    When I open the development tools, there are tabs for the Inspector, Console, Debugger, Profiler, etc. I have large monitors and would like to open several of these at once, but I can't split the tabs into multiple windows; only one can be visible at a time. It should be possible to have all the development tools visible at once.

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

                          97 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 →
                          • 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!

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

                              372 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 →
                              • Create a shortcut 'universal clear'

                                Create a shortcut 'universal clear'.

                                When triggered, console and network tabs would be clear at the same time.

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

                                  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 →
                                  • Break points but for http requests

                                    It would be useful to stop the http requests before they are sent to a server for analyze and modify their informations

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

                                      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 →
                                      • 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!

                                        2 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 CSS Shape Editor

                                          Something that helps editing the polygons/shapes of the CSS property.
                                          There's a Chrome addon for that http://razvancaliman.com/writing/css-shapes-editor-chrome/

                                          12 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 →
                                          ← Previous 1 3 4 5 19 20
                                          • Don't see your idea?

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base