Google Chrome has a pretty nifty emulator tool that enables better website development by emulating the different devices that you would want to test your websites on.
A few keys points about the emulator that makes it unique and much better for development than merely stretching your browser window to various sizes:
- Chrome’s minimum browser width (400px) is still wider than the smallest device size (320px iPhone 3/4)
- Using the emulator tool also changes the
user agent
variable in Chrome so that it thinks and acts as if it were the actual device it is emulating - The emulator shows a grid and rulers with pixel dimensions behind the device window
How to use the Chrome Emulator?
- Open the Element Inspector (right-click “Inspect Element”)
- Click on the mobile device icon in the upper-left corner of the Element Inspector (see screenshot)
- Select the device you wish to emulate from the dropdown menu at the top (see screenshot)
- Tip: Refresh the page for proper
user agent
spoofing and viewport rendering
![google-chrome-inspector-element-device-mode](https://i0.wp.com/files.aaron.kr/media/2015/01/google-chrome-inspector-element-device-mode.png?resize=300%2C251&ssl=1)
![google-chrome-inspector-element-device-mode-activated](https://i0.wp.com/files.aaron.kr/media/2015/01/google-chrome-inspector-element-device-mode-activated.png?resize=300%2C256&ssl=1)