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 vote and comment on it.

If it doesn't exist, you can post your idea so others can vote on it.

Enter your idea and we'll search to see if someone has already suggested it.

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

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

      Show CSS values for a property without waiting for first character

      74 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 →
      • 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 →
        • Simple cache invalidation

          It would be great if the network view had a context menu option for each request to unconditionally purge the cache for a particular resource.

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

            36 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 json as structured data (just like xml files), allow code folding

              json is the new xml, firefox was convenient for development in the past because it rendered xml as structured data instead of just plain text which is convenient when you work with web services. Today, web services use json not xml, yet we render json as plain text. Pleas implement what the JsonView extension does! https://addons.mozilla.org/fr/firefox/addon/jsonview/

              18 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 →
              • Live Refresh of Imported Stylesheets

                When importing a stylesheet in style editor. It'd be great to have the file live. e.g as i save in text-editor it updates the imported file therfore updating the styles on the page

                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.

                  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…)
                    1 comment  ·  Flag idea as inappropriate…  ·  Admin →
                  • Web Audio panel editor

                    Web audio editor is connecting removing creating differents web audio api modules in real time. And it's showing js source too..
                    eg:
                    analyzerNode =audioCtx.createAnalyser();
                    gainNode = audioCtx.createGain();
                    filter = audioCtx.createBiquadFilter();
                    delayer = audioCtx.createDelay();

                    So if i disconect delayer, the delayer line is removed in realtime source

                    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 →
                    • make the scrollbar in responsive view more obvious (bigger, more colourful)

                      In responsive view (ctrl-shift-m), the scrollbar can be tiny (if the page is long) and is very faint (very light grey). It can be very difficult to see it, especially for people with visual problems. I have a screenshot if you want to see it.

                      It would be really nice to have a way to change the colour and to make it wider. I could find no documentation on how to do this, but would be happy with a bit of css to put in the user chrome file.

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

                        64 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 filter network tab data

                          I've been missing this one for years! In a lot of my dev-work I need to check specific requests (e.g. Google Analytics or Adobe Analytics), which I cannot easily search for or filter out in Firefox. This makes me go back to Chrome for development all the time (see https://developer.chrome.com/devtools/docs/network#sorting-and-filtering). A simple search over the request URLs would suffice as a first step.

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

                            53 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 →
                            • Easily get xpath and csspath for element

                              When selecting an element and rightclicking it there should be two items:
                              1. Copy unique xpath
                              2. Copy unique css path

                              For easy use in applications and/or css.

                              23 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 →
                              • Display IP address in Network tab

                                It would be nice to display resolved IP address along with the domain in the `Network` tab.

                                Maybe as tooltip information or as an additional column right after the `Domain` one (Firebug-like).

                                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 →
                                • filter files list in JS debugger

                                  When a page loads hundreds of scripts, it's really hard to locate the correct one in the sources pane.
                                  They either need to be presented as a tree (like in Chrome) or add a filter so that the needed script could be located quickly

                                  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 →
                                  • Bookmarks custom arrange

                                    i have many bookmarks items and each time need to scroll bookmarks menu to access my last bookmarks. please add a option to choose arrange bookmarks old to new, or, new to old

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

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

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

                                          Firefox Developer Tools ideas

                                          Feedback and Knowledge Base