Screensize

Developer Tools
#1

I really like the new Firefox however I keep getting back to Chrome since when using the dev tools I need to see the current screensize when resizing. Could this feature be implemented?

1 Like
#2

You can get the same when you enable the rulers in Firefox: https://developer.mozilla.org/en-US/docs/Tools/Rulers

  1. You have to enable the Rulers Toggle under the DevTools Settings
  2. Then turn it on
  3. Then you should see the dimensions in the top right corner:
    image
    image.png912Ă—403 35.7 KB

Does this solve your problem?

1 Like
#3

Hello !
It can be implemented for sure, in fact, it’s already here :slight_smile:

  1. Go to the settings panel
  2. Turn on “Toggle ruler” under the “Available Toolbox Buttons” section
  3. Click on the ruler button in the toolbar
  4. Enjoy the rulers and the small page size indicator.

Screenshot at Nov 24 15-06-57
Screenshot at Nov 24 15-06-57.png1794Ă—1598 280 KB

Note that if you are dealing with responsive layouts and have a set of pre-defined page size to check, you can use the responsive design mode and create the sizes that you need :slight_smile:

3 Likes
#4

Thank you but I still do not see the dimensions (window width as a number). I do see the ruler. FF 58.0b5 dev edition, Mac High Sierra. Edit - on Windows I also do not see any dimension numbers as in your screenshots?

Screenshot-2017-11-24 Screensize
Screenshot-2017-11-24 Screensize.png865Ă—459 23.6 KB

#5

Right, this is in Nightly only (pushed 2 days ago :slight_smile: https://bugzilla.mozilla.org/show_bug.cgi?id=1402633 )
This will be in FF 59

2 Likes
#6

Alternatively, you can try to download Nightly to get all the cool stuffs as soon as they are built :smiley:

1 Like
#7

wasn’t it worth it? because now it’s gone again. I know of the responsive design mode, but that’s not what I need, I need the overly-simple functionality to show me the current viewport resolution in either the status bar or some tiny overlay. I don’t understand, why this isn’t there once again, not even in the developer edition. There’s no reason and the resp. design mode is clearly not the same. I want to be able to resize my browser and immediately see the new viewport size. Why is it not there? And if it is: good job in hiding it :wink:

1 Like
#8

Did you turn on the rulers as Nicolas described? Doing so shows a little overlay indicating the viewport size in the upper right corner of the page and updates when the viewport is resized.

I’ve just tested this right now on Firefox 69 and 71.0a1 (Nightly) on Windows 10 and it works fine for me.

Sebastian

1 Like
#9

Anyone else seeing height x width in the ruler though? It is quite annoying as everything else in the web world is width x height. Let me know if there’s a workaround for this thanks.

#10

Hello Alex,

This was fixed not long ago in https://bugzilla.mozilla.org/show_bug.cgi?id=1584020.
It will be available starting Firefox 71, which is currently Nightly.

#11

Thank you so much!!!

#12

I previously had a chrome extension for screensize as well but I love that it’s built-in. Thanks all!

#14

Please mind your tone. I suggest you to read the community guidelines so we can all have a professional conversation: https://www.mozilla.org/en-US/about/governance/policies/participation/

Looks like this is tracked in https://bugzilla.mozilla.org/show_bug.cgi?id=1584023

#15

In Firefox 73 I can re-enable the rulers after reloading. What version of Firefox are you on @Cotiga ?

#16

thanks for asking this question; it showed up as the 2nd result in my DDG web search for “viewport size in Firefox dev tools”! So clutch because I was also switching back and forth to Chrome, not knowing FF has the feature!