Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

Participant ,
Apr 18, 2021 Apr 18, 2021

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

33.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 18, 2021 Apr 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  👍

Translate
Community Expert ,
Apr 18, 2021 Apr 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 18, 2021 Apr 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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 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).

image.png

 

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.

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 18, 2021 Apr 18, 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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 18, 2021

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

BenPleysier_1-1618801652846.png

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!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 18, 2021 Apr 18, 2021
LATEST

Thanks Ben - I have been doing that but thought there might be an add-on that showed screen-size live, up to full width, without going in to Developer Mode (which takes me to only 1679 of a possible 1900). But I can live with that. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines