Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by Rick Rakin
Rick Rakin
6,531 Points

Chrome Browser resizing -- Window Resizer Extension alternatives?

Window Resizer seems great because it displays the viewport size in the bottom right hand corner as the window size is dragged.

But it doesn't do this viewing an html page on the local host--making it mostly useless to tweak a website unless it is already hosted. Any alternatives? I've tried:

  • Page ruler 0.1.4
  • Pendule 1.0.0
  • Resolution Switcher 1.0.2
  • Resolution Test 2.0
  • Responsive Site View 0.1.1
  • Reponsive Tester 2.5
  • ruul. Screen Ruler 5.6.6
  • Screen Resolution Tester 1.1
  • Screen Size 1.0.6
  • Window Size 1.0

I'm amazed at how many that don't even work. Some work well, but none as good as Window Resizer and none show the display size as it is being resized. About to switch to Firefox as primary developing browser. Any leads?

2 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Richard:

I've used Window Resizer in the past. I usually develop in a dev area on my own server, and occasionally I have to use XAMPP and localhost, so I've never noticed that the Resizer extension doesn't work on localhost.

What I normally do is manually resize the window, and figure out where various breakpoints occur outside of the normal device resolutions. I use the site http://www.whatsmy.browsersize.com to tell me how big my browser currently is, and it works pretty good for me. Works on localhost and the live Web. Two things to be aware of if you use this: you have to refresh the page each time you want the size of the browser window, it doesn't adjust dynamically. The other thing is I add about 20 pixels to whatever it says and that ends up being accurate, I'm not sure if that's just my own personal computer or what. Hope that helps somewhat.

Rick Rakin
Rick Rakin
6,531 Points

Thanks for the response. I've found that Firefox can resize dynamically without any 3rd party add-ons using the Web Developer thing-a-ma-jig (forgot if it is built in or not). Tools --> Web Developer --> Responsive Design View working great all day.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I also like the box model view for CSS rules in Firefox as well.

Rick Rakin
Rick Rakin
6,531 Points
Rick Rakin
Rick Rakin
6,531 Points

Figured out how Guil is using the Window Resizer extension in chrome to test a simple HTML file in the first media queries video, but it is kind of a hack to accomplish.

The first part is to put the file and associated CSS in your DropBox account (assuming everybody has DropBox).

Next log into your DropBox account through the Chrome web browser and navigate to the HTML file.

Next, click the share link icon on the right. Then, modify the url and change www to dl as described here.

Bang, pseudo-localhost HTML file that can be viewed with the help of the Window Resizer extension.