Responsive testing in Chrome

I recently read about a really handy feature in Chrome’s Web Inspector that makes it easy to test responsive designs with different viewport sizes and user agents. To emulate a viewport, first open up the Web Inspector (Option-Command-I on the Mac) and click on the little gear icon in the bottom-right of the inspector:

gear in Chrome's Web Inspector

This will show a panel with many advanced options for the Web Inspector. On the left-hand side of the panel, choose “Overrides” under “Settings.”

overrides

The Overrides section will allow you to choose a User Agent from a drop-down menu including Android and iOS mobile devices and you can set the emulated screen dimensions of the device. There is also a little handy button to flip your entered dimensions to easily emulate switching from landscape to portrait.

testing-responsive

I have found this feature to be incredibly handy for responsive testing and a feature, from what I can tell, to be missing from Safari.