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.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>