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. 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 →
    • Show actual pixels painted in paint events in the profiler

      The profiler shows paint events in the timeline, but there is no actionable information. I'd like to see a mini-screenshot of the actual pixels painted so I can see when the same region is being painted to much.

      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 →
      • clear button design

        Clear button looks in different location in network panel and console panel. also it is easily confused with the dropdowns in console panel. Please user an Icon instead of clear text I think every body can easily understand a trash can or similar icon's meaning. Also please move it to the top of the panels. it's hard to move the mouse to the button specially when auto hide dock is used in Macintosh.

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

          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 →
          • Add simple storage (for addons) to storage inspector

            When working with Simple-Storage[1] it can be difficult to debug as there isn't an easy way to see/modify the contents. There is an addon for this[2] but it is a bit rough around the edges.

            It would be nice to be able to view/modify simple-storage from the storage inspector.

            [1] https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-storage
            [2] https://addons.mozilla.org/en-us/firefox/addon/simple-storage-editor-for-a/

            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 →
            • Disable some parts, esp. Codemirror

              Right now i would like to see a way to get rid of Codemirror, because it "hangs" on a very regluar base.

              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 →
              • Scroll DOM element into view

                When selecting an element in the DOM tree of the inspector, I would like to be able to scroll it into view. This could be an explicit context menu action, an optional preference ("scroll selected DOM element into view") or even the built-in behavior.

                For example, an element might have been logged via console.debug(). Clicking it selects it in the inspector, but (as of Firefox 36) there is no way to find it on the page if it's not currently visible in the viewport. Even manually scrolling down does not help because while scrolling the page, the selected element is…

                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…)
                  1 comment  ·  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.

                  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 →
                  • Wrap and unwrap node in element

                    It would be useful to be able to quickly remove an element without removing the child elements. For example, take the following HTML:

                    <p>Sample <b>text</b> here</p>

                    I would like to be able to right click the b-element in the inspector and select "unwrap", then end up with the DOM corresponding to this HTML:

                    <p>Sample text here</p>

                    Likewise, I'd like to be able to wrap an element or a text node in a new element.

                    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 →
                    • group sources by location and folders

                      Show like a tree as in devtools

                      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…)
                        1 comment  ·  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.

                        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 →
                        • Option to apply sourcemaps before running script

                          Right now, when dev tools are opened, dev tools map minified scripts to source via sourcemaps. This is cool but when we, say, set a breakpoint, we see the original variable names in the script panel, but actual variable names are from the minifed script only. (so if uglifier uglified variable name `data` to `d`, and we are in a breakpoint at that line, the sources tab shows variable name `data`, but `data` is undefined in the console. It is actually `d` only).

                          There should be an option, that when the page is reloaded with the dev tools open, sourcemaps…

                          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 →
                          • Resend without edit

                            When I'm testing a locally-hosted application it would be nice if I could resend a request without editing, as the request may be fine but the server-side code is broken.

                            Currently this requires "click on request -> Edit & Resend -> send",
                            but click on request -> send" would be preferable.

                            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 →
                            • Better CSP error reporting in console

                              CSP errors in console does not report what JS line produces problem.

                              Im not sure is a problem just for inline JS or external also but in Chrome I can click on an error and it takes me to a JS line.

                              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…)
                                1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                              • Reverse debugging

                                When debugging JS code with step by step execution, allow to go one or more steps back in execution.

                                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 →
                                • Console: Show source file name for object

                                  It would be nice if we could have a link to the source file for an object

                                  Eg.

                                  Given the page has an object named window.WebFontConfig

                                  1. Type WebFontConfig [ENTER] in console.
                                  2. The output/print shows the file name where the object was defined.
                                  3. Optionally the file name has a link. When the link is clicked the Script Debugger is shown with the file opened.

                                  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 →
                                  • I would like to see all CSS rules, not just the ones being applied to Firefox

                                    In Google Chrome, I can see all CSS rules, whether prefixed with -webkit, or -moz. In Firefox dev tools, I would like to see all CSS rules being applied to an element, not just the CSS rules that are being applied to Firefox.

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

                                      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 →
                                      • An ABOUT entry to determine the version

                                        On Win 10 I get wacky notifications stating that there is a new ver available. But these vanish before anything can be done about them.
                                        If I then go in to FFDE I am unable to find any place that gives details on the version.
                                        If you have done any development work you know that version conflicts are everywhere and predominate. SO how about giving up the info that is available in std FF?

                                        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 →
                                        • Storage inspector for file://

                                          The Storage tab doesn't display localStorage and sessionStorage content when viewing local files (file://… or just /…), even though both localStorage and sessionStorage are available and work as expected.

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

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base