Easy Mobile Browser Testing with Chrome Emulation

Testing designs across multiple browsers has always been a pain. When you add in various devices and their resolutions, you have quite the headache on your hands.

How do you know that your navigation menu is responsive across all resolutions? Do animations lag on mobile? Do you have any stock browser styles affecting the design? This laundry list could continue for ages.

Services like BrowserStack aim to remedy this issue. However, if you don’t have room in the budget you’re only left with a couple of options.

You can…

  • Own every device you want to test on
  • Resize the browser screen to the desired resolution
  • Fix the bugs as they’re reported by users

The above options are hardly ideal. So what are you left with? Thankfully, Chrome is coming to the rescue.

Chrome Device Emulation

As of Chrome 32 we have the ability to mimic the behavior of other devices. This is referred to as emulation. Emulating a device in Chrome is extremely easy. With some tweaking of a few settings within Chrome Dev Tools, we’ll be up and running in no time.

Step 1: Open Dev Tools

You can open the Chrome Dev Tools by pressing F12 on Windows or Cmd + Opt + I on a Mac.

Step 1

Step 2: Open the Drawer

In the top right right corner there is an icon to open the “Drawer” within Dev Tools.

Step 2

Step 3: Open the Emulation Tab

After the Drawer pops up from the bottom you should see several tabs to choose from. Select the “Emulation Tab.”

Step 3

Step 4: Select a Device and Refresh

From the drop-down menu we’re able to select from a myriad of devices. For starters, we’ll select the Apple iPhone 5. Once selected, click the “Emulate” button. You’ll quickly notice that the screen looks funky and nothing like you’d expect from an iPhone. To fix this, refresh the page.

Step 4

Step 5: Bask in Emulation Excellence

After the refresh, you’ll notice that that the page looks much better. As far as setup goes, you’re done. Next, we’ll focus on cool tricks and features that come with emulation.

Step 5

Additional Features

Choosing the device you want to emulate is a good start. Currently, it renders as a resized screen, but there’s plenty of features to explore.

Mobile Targeting

It’s not uncommon to see features or entire websites that target mobile devices. Below is an image of Twitter on an emulated iPhone 5. You can see that it resembles the Twitter app and there’s even a banner at the top to download it in the App Store.

Mobile Targeting

We can write code like this ourselves. Visit this CodePen and change your device to an iPhone to see the div appear.

Essentially all we’re doing in that CodePen is asking the browser what the User Agent is. The User Agent is just a long and crazy string that tells us some details about the device and browser that the user is running.

We’re asking the browser if the User Agent contains “iPhone” in its string. If it does, then we’ll assume the user is on an iPhone (even though you can spoof it like we’re currently doing).

Pinch and Zoom

Users rely on the ability to pinch and zoom for certain mobile applications. With Chrome’s emulation tools we can mimic this functionality. All you have to do is hold down the Shift key and scroll with your mouse or track pad.

Pinch and Zoom

If you’re unable to pinch and zoom then try another website. It’s likely that the website you’re currently on has disabled pinch and zoom within the meta tag.

Geolocation Spoofing

If you’re developing an application that uses HTML5 geolocation then you’re probably tired of using your same old static location. Thankfully with Chrome we can trick the browser into thinking we’re somewhere else.

Geo-location Spoofing

In the “Sensors” section we can enable the emulation of geolocation coordinates. So rather than the browser always detecting where we currently are, we can tell it that we’re actually somewhere else. This CodePen uses HTML5 geolocation. If you change your location within Chrome you’ll see it write out different coordinates to the document.

Animations

Animations are a really nice way of sprucing up your design. The downside is that they can be pretty choppy on mobile devices. If you notice that your animations lag on mobile, then you should consider disabling them for mobile users.

This CodePen uses a complex Regular Expression test to detect if the User Agent could possibly be one of many known mobile browsers. If it is not a mobile browser, the text will animate continuously. Whereas it will be disabled on a mobile device.

Recap

Testing web pages for multiple browsers and devices is traditionally a huge pain that can only be fixed by a third-party service or an unhealthy collection of devices. Fortunately, Chrome has marched in and made this problem much easier to deal with. Now we can see problems and specific device functionality without having to pull up the page in the actual device itself.

What do you use Chrome Emulation for? Share your examples with us in the comments.

David East

David East is a Developer Advocate for Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @eastdotnet.

Newsletter

4 Comments
  1. Min Apr 30, 6:06 pm

    I’ve been using Chrome inspect element for awhile and I never knew the option even existed.
    Thanks for sharing!!

    Reply
    +11
  2. RideToHeaven Apr 30, 8:04 pm

    Same here been using Chrome Inspect, will definitely be taking advantage of this. Thanks.

    Reply
    +2
  3. monstercritic May 1, 5:06 pm

    Thanks for sharing! This is extremely useful for me right now.

    Reply
    +2
  4. Abrams Jun 7, 8:46 pm

    It’s worth noting that a similar option (albeit without position) has been included in Mozilla Firefox for some time!

    It’s in their developer tools – or you can just hit Ctrl+Shift+M (on a PC keyboard) :)

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters