51

Is there any way in Firefox to show the dimensions of the current viewport? Ideally in the status bar and updating "live" as you resize the window, as this would be extremely useful for responsive layout testing!

I've used "MeasureIt" but that requires you to draw with a ruler, which is tedious and quite possibly inaccurate depending on the ability and mouse resolution of the user.

0

6 Answers 6

58

I know this is a 4 year old answer, but I don't see anyone mention that you just have to select the toggle rulers option. Go to the settings menu option in the developer tools and check it. That will bring up the ruler icon and just click it and you have your ruler. enter image description here

21

The popular Web Developer Extension has a "Display Window Size In Title" function (under the "Resize" menu) which updates when resizing. This displays both the window size and the viewport size in the following format: 1024x768 [1008x529] (window size, viewport size)

8
  • 2
    Both window size and viewport size can be shown! :)
    – haagel
    Dec 6, 2013 at 9:01
  • Another good option is "Display window size" which shows a small bar with that info, since on small window sizes the size may get cut off at the end of the title. Nov 21, 2014 at 13:49
  • 3
    But this is not update. It stays on te same value that was shown at startup.
    – f470071
    May 27, 2015 at 21:57
  • See the 'rulers' answer, you don't have to install anything to get this info anymore. Jan 12, 2016 at 21:54
  • 1
    The dimension information is appended to the title, and so cannot easily be seen because titles are often truncated due to narrow tab width. I found the "Custom Tab Width" add-on (which still works in FF 49.0) helpful to increase the tab width. Note also, the small bar overlay info (via "Display Window Size") does not dynamically update during window resize, but the title bar info (via "Display Window Size in Title") does. Sep 20, 2016 at 16:59
16

I've hacked together this piece of javascript (requiring jQuery) which is easy enough to include, but it would be nice to have this as an addon to output into the FF status bar.

On the plus side I suppose this can now be used in different browsers!

$(document).ready(function(){
    var MEASUREMENTS_ID = 'measurements'; // abstracted-out for convenience in renaming
    $("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
    $("#"+MEASUREMENTS_ID).css({
        'position': 'fixed',
        'bottom': '0',
        'right': '0',
        'background-color': 'black',
        'color': 'white',
        'padding': '5px',
        'font-size': '10px',
        'opacity': '0.4'
    });
    getDimensions = function(){
        return $(window).width() + ' (' + $(document).width() + ') x ' + $(window).height() + ' (' + $(document).height() + ')';
    }
    $("#"+MEASUREMENTS_ID).text(getDimensions());
    $(window).on("resize", function(){
        $("#"+MEASUREMENTS_ID).text(getDimensions());
    });
});
3
  • 1
    Everything's perfect except you should use window.innerwidth instead of $(window).width() as window.innerWidth is the property which scales linearly with our media queries.
    – bhavya_w
    Apr 22, 2015 at 6:43
  • The idea is good and the script shows some dimensions, but obviosuly those are not the ones corresponding to @media queries. So bhavya_w's comment might be the solution.
    – AndyZ
    May 13, 2015 at 7:54
  • add z-index:10000 to have it over all the things May 15, 2016 at 18:17
14

In fire fox open the developer toolbar with shift + f2

Then type >> rulers in the command.

It'll display rulers on the edge of the view. You'll have to do it for each tab/screen and after each refresh but pretty fast to access the functionality.

They should add an option to make it permanent.

Available since Firefox 40: https://developer.mozilla.org/en-US/docs/Tools/Rulers

2
  • 1
    When you refresh a page the rulers are gone. And it does not give you exact window (viewport) dimensions - you have to look carefully at rulers.
    – koral
    Nov 3, 2015 at 10:54
  • Thanks, added your info to the answer.
    – Leo Fisher
    Nov 4, 2015 at 5:11
14

Shortcut for responsive design view in firefox ctrl+shift+m works like a charm for this purpose I found.

2
  • 4
    The shortcut is Option-Command-m (⌥-⌘-m) for mac users. Sep 1, 2016 at 13:34
  • 1
    It says show current window dimensions. Your option changes the windows entering to this design view.
    – corlaez
    Sep 21, 2017 at 21:22
2

I suggest to use 2 addons:

  1. The Addon Bar - It basically brings back the old addon bar at the bottom of the firefox window.
  2. FireBreak: It shows the window viewport widthin a small box you can place in the Addon Bar.

I've placed the FireBreak textbox, inside the Addon Bar, at the bottom left, so when you resize the window you are still able to see it. If you, instead, place it at the default top right, after the address bar, it will be hidden as soon as you resize the windows below a certain size.

To get a bit more from firefox when dealing with responsive websites, you could even use Tile Tabs A useful use case is to have 3-4 tiles open at different sizes while working on the code so you can see how your layout is going and, if you use livereload it will shows all changes in real-time.

Here is a screenshot of what I mean: The same web page open in different tiles set to different sizes. To get the sizes of each tiles you will need of the "Web Deleoper Tools" Addon.

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.