Protip: Quick-Check Responsive Layouts for Smaller Devices with Google Chrome’s Vertical Inspector
When I’m in the zone and building a responsive app, sometimes I don’t want to break my streak by having to power up another device, set up the proxy, etc etc. If I am just checking the layout, this little Google Chrome trick works in a pinch. Obviously you should still check your app on real devices early and often, but I often find myself waiting until I reach a good stopping point to do so.
By default, Google Chrome won’t let you resize the browser below
400px in width, which is super annoying, but there is a way around it.
Chances are if you develop in Chrome you’ve got the inspector open most of the time. I noticed that if you switch the inspector to sit vertically in the browser viewport, you can resize it to shrink the viewport below
400px in width.
It’s simple. Press Cmd + Alt + I (or Ctrl + Alt + I in Windows) to open the inspector, click and hold the button on the bottom left to switch the view to vertical, and resize to taste. The short GIF above visualizes the steps.
If you are using Google Chrome to develop sites, I find the Window Resizer extension really useful for quick viewport resizing to some common resolutions. You can also create and save your own presets. Nifty stuff.