Let’s Talk About Mobile Emulation in Google Chrome

Simply said, we love Google Chrome. It runs smoothly, looks simple, and has many useful Apps. From a developer’s point of view, Google Chrome is always one step ahead in terms of supporting the latest Web standard, which is great.

It also comes with a number of tools for web development, some of which have yet to be implemented in other browser built-in developer tools. These include the Viewport Emulation, Geolocation and Device Orientation Override, and Touch Emulation.

Recently, Google Chrome pushed a new feature called Mobile Emulation that enables us to see, on Chrome, how a website will react, work, and behave as if in an actual mobile device. Sounds cool? Well, Let’s see how it works.

To Be Responsive Or Not

Even though Responsive Web Design is being more adopted these days, but it couldn’t fit the needs of all types of websites. Some types may require a dedicated, separate mobile site due to the limitations of mobile devices — some elements of the site may disappear on mobile; features may behave differently while on mobile and on desktop.

Take Amazon.com as an example. When you view it on desktop and resize the viewport size, nothing will happen. Take your mobile phone, view it, and it displays the simplified mobile version of the site. Amazon takes the separate mobile site route, rather than turning its website responsive.

How it Works

If you want to do the same, build a dedicated mobile site, you can now use Mobile Emulation in Chrome to ease your job for debugging the site. This feature, at the time of the writing, is only available in Chrome Canary. It can be found under a new tab Emulation in the DevTools.

It is worth noting that the location or the name could be changed in the future once it is pushed to “regular” Chrome.

Chrome has a number of predefined devices including Google Nexus, iPad, iPhone, Blackberry, and Kindle. Pick one, hit the Emulate button.

The device specifications such as the Viewport Size, the User Agent String, and the Pixel Ratio, as well as other Settings automatically reflect the dimensions of the selected device.

Refresh Chrome, and you should now be able to navigate the site as if it is viewed on mobile. If you take a closer look, you will notice that the mouse cursor turns into a circle indicating aTouch Event. On your laptop touchpad, you can use two fingers for scrolling and three fingers for a swipe, like so.

Furthermore, you can explore this feature on some websites that have a dedicated mobile version, such as:

• Facebook
• Google
• Target
• New York Times
• Youtube