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

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

Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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

Views

21.8K

Translate

Translate

Report

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  👍

Votes

Translate

Translate
Community Expert ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

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
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

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