Quick Tip: Use Chrome’s Emulator Tool for Better Development

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:

  1. Chrome’s minimum browser width (400px) is still wider than the smallest device size (320px iPhone 3/4)
  2. 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
  3. The emulator shows a grid and rulers with pixel dimensions behind the device window

How to use the Chrome Emulator?

  1. Open the Element Inspector (right-click “Inspect Element”)
  2. Click on the mobile device icon in the upper-left corner of the Element Inspector (see screenshot)
  3. Select the device you wish to emulate from the dropdown menu at the top (see screenshot)
  4. Tip: Refresh the page for proper user agent spoofing and viewport rendering
google-chrome-inspector-element-device-mode
1. Open the Element Inspector and click the mobile device icon
google-chrome-inspector-element-device-mode-activated
2. Select the device you wish to emulate from the dropdown menu

 

Leave a Reply

Your email address will not be published. Required fields are marked *