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. Option to show paint/reflow events on the timeline

    I'd like to be able to see paint/reflow events on the Network timeline. This way I could see (for example) which scripts are blocking rendering on page load.

    This would be similar to webpagetest.org's timeline view.

    19 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 3D View Mode option for the CSS Stacking Order

      An additional Colored Stacking Order view on top of this tool would be extremely useful to observe z-index order and debug general stacking context issues. CSS Stacking can be hard to figure out without a good visual. Plus it would clear up the fact that the current 3D view is not a representation of the actual CSS stack.

      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 →
      • box model labels

        add labels in box model to quickly indicate padding - border - margin

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

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

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

              142 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 →
              • 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?

                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…)
                  2 comments  ·  Flag idea as inappropriate…  ·  Admin →
                • Add "Screenshot of selected Element" to Inspector

                  Since the devtools get a Screenshot Button (https://bugzilla.mozilla.org/show_bug.cgi?id=991045) it would be even cooler, if the context menu of a selected node in the inspector could get an "Screenshot of selected element" entry, mapping to the --selector Option of the CLI.

                  44 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 →
                  • 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 :)

                    46 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 →
                    • Manage Firefox on Desktop the same way as FirefoxOS for OpenWebApps

                      Currently to install a Packaged OpenWebApp on FirefoxOS (whereas it is the Simulator or an actual device usb-connected to the computer), we can go to the "WebIDE" in dev tool to push and install a local webapp that is on the computer on the device.

                      However it is impossible to install local Packaged WebApps the same way on the Desktop, we have to go through a custom server which is really a big burden and complicated.

                      It'd be nice to have the current "Firefox Desktop" in the same runtime list as FirefoxOS devices/simulators and be able to install, lunch and…

                      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…)
                        0 comments  ·  Flag idea as inappropriate…  ·  Admin →
                      • Inspector as a full HTML Editor

                        It should not be too costly to add few more functions to use the inspector as a full live preview HTML editor as many great futures already there for a full "HTML Editor" (more like the great Style Editor utility). Open/save local project folders, editing the HTML page (not just node base) with auto complete/help, redo/undo, find etc..
                        Maybe some ideas (plugins, dom function outlining..) can be merged from other open-source editors like Brackets.

                        Please make the DevTools complete with HTML Editor.

                        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 →
                        • allow copy group selector

                          in addition to "copy unique selector" which is awesome it would be great to have a "copy group selector" workflow where you would tag a bunch of dom elements in the inspector and then get a selector that would target them all.

                          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 →
                          • zen coding for HTML edit and style editor

                            Who has patient to type <tagName></tagName> or border-right:4px; in the middle of debugging or developing?
                            Please add zencoding to html edit of inspector and style editor tab so that we can write tagName>children*4 and hit tab and it generates the markup, or write br4 instead of border-right:4px;
                            Thanks.

                            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 →
                            • Allow live edits of svg to be visible in 3D dev tool.

                              The 3D tool is good for visualizing a svg page.
                              Then changes to the viewBox are not reflected in the 3D view.
                              This would aid greatly in understanding the window viewport settings and impact of viewBox changes.

                              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 →
                              • Fix bugs, write tests, provide stability

                                I just want to make explicit that the biggest setback when using FF DevTools is the bugs encountered in everyday use. As someone in your target audience, I would love if you focused on fixing what you have, before adding features. Please prioritize quality over features.

                                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 →
                                • 50% zoom in Responsive Design Mode

                                  It would be cool to be able to display a page at 50 percent zoom in RDM, especially for simulating bigger screens when designing/developing on a fairly small screen (I’m using a 13 inch laptop).

                                  For instance, one could have a 800×500 frame that shows a 1600×1000 at 50% zoom. The viewport dimensions for that frame, as reported to the page, would be 1600px (width) and 1000px (height).

                                  I don’t know if others might want a 200% zoom option as well.

                                  13 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 accessibility information

                                    Show computed(implicit)/declared(explicit) ARIA information for accessibility purposes. In particular being able to jump to nodes related to the selected Node would be handy.

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

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

                                        Show CSS values for a property without waiting for first character

                                        96 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 →
                                        • Source map support improvement

                                          Firefox currently doesn't support sections, and aggressively loads source maps for all code before any code can be looked at. Those and other UX and feature improvements to source maps would be appreciated.

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

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base