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

Author: Aaron

Aaron Snowberger is an experienced web developer, graphic designer, and educator in ESL and computer technology. He holds a Bachelor's degree in Computer Science, Master's degree in Media Design, and professional certifications for React (JavaScript) development, and as a Google Certified Educator and Trainer. Aaron is passionate about helping new learners discover the joys of technology, and has presented across the country at multiple local, national, and international conferences in both the ESL and web development fields. His most recent talk was given at the 2019 JSConf (JavaScript Conference) in Seoul on September 3, 2019. (https://2019.jsconfkorea.com/en/tutorials) View all posts by Aaron