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.
- 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 2: Open the Drawer
In the top right right corner there is an icon to open the “Drawer” within Dev Tools.
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 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 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.
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.
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.
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.
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.
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.
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 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.
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.