Skip to main content
Galeodan
Galeodan
Known Participant
April 18, 2021
Answered

How do I see browser window size in Chrome or FireFox to monitor Page Response to Resizing?

  • April 18, 2021
  • 2 replies
  • 34109 views

When previewing a responsive page in Chrome or Firefox (at least to begin with), I would like constant feedback on the browser window size (in pixels) so I can see how the page responds to resizing as well as at specific widths. Can anyone recommend browser extensions that accomplish this? (I know DW gives a Live Preview but I'd also like doublecheck how the page behaves in a regular browser.)

Thanks,

Sean

    This topic has been closed for replies.
    Correct answer Paul-M

    Yoo can use developer tools, F12 to access in both Firefox and Chrome:

     

    In Firefox: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

    In Chrome: https://developer.chrome.com/docs/devtools/device-mode/

     

    If you need any more info come back with questions  👍

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 18, 2021

    If you're building mobile-first and testing in actual mobile & tablet devices at portrait and landscape, you should be good to go for the majority of users.

     

    The Web Developer Toolbar addon from Chris Pederick is the one I use.  It includes, among other things, a responsive design mode from the Tools menu (see screenshot).

     

    And from the Web Developer Toolbar, click on Resize tab and select Display Window Size (see screenshot) which shows window and more importantly viewport size.

     

     

    Nancy O'Shea— Product User & Community Expert
    Galeodan
    GaleodanAuthor
    Known Participant
    April 19, 2021

    I have installed the extension and popup the window size as suggested. But how do you get it to stay visible while you resize?

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    April 19, 2021

    In Chrome, press `F12` to get the developer window.and click on `Toggle device toolbar`. Make sure that Responsive has been chosen

    Resize the window and see the dimensions in real time.

     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    P
    Paul-MCorrect answer
    Legend
    April 18, 2021

    Yoo can use developer tools, F12 to access in both Firefox and Chrome:

     

    In Firefox: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

    In Chrome: https://developer.chrome.com/docs/devtools/device-mode/

     

    If you need any more info come back with questions  👍

    Paul-M - Community Expert
    Galeodan
    GaleodanAuthor
    Known Participant
    April 18, 2021

    Thanks - I thought that might be the answer but I hadn't noticed that you can untoggle the device toolbar to see it as in regular PC screen. The links look pretty useful too. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices