How to emulate mobile devices using Chrome browser

Google Chrome continually changes, which usually means good news as new features appear. Unfortunately sometimes it means changes to our existing workflow.

This happened recently when Google released a new version of Chrome, but moved the Emulator settings.

I eventually found them, and show you how in the video below:

Watch on YouTube

Or for those of you that prefer to read, read on. I’ve added references at the bottom.

We have to start by using the Overrides in the Chrome developer tools settings. All the emulation used to exist here, but it has moved.

Right click, and Inspect, to show the developer tools. Then click the cog on the right to show the Settings. And show the Override settings.

So the first thing we do is make sure that we have checked “Show ‘Emulation’ view in console drawer”.

Great.

So now where is the console drawer?

Close the settings and in the dev tools on any of these tabs, we can display the “Console drawer” by pressing the escape key, and lo the drawer did appear and an emulation tab was present.

And we can use the emulation tab to help us test.

In the demo video I show this in action on the bbc site.

Choose a device to emulate. I pick the “Samsung Galaxy Note II” because I have a physical device for that on my desk, and if I encounter any issues I can try the same functionality on my device.

Choose Device, Click Emulate, and you can see the screen size refreshes to a scaled smaller size.

You can amend the display settings using the ‘Screen’ options. By default it is shown scaled, but you can make if full size if you want.

But we still don’t have the mobile site yet. So I refresh the screen. Using Ctrl+F5. And because Chrome is now sending the correct mobile headers for the Note II, we are directed to the Mobile site.

And now the issues.

I try and use the site. Click on the links. And nothing happens.

So, I change sensors and switch off the emulate touch screen. And we have a working site again.

This works on the Note, so it might be a BBC issue, or it might be a Chrome issue. But really it shows us the problems of testing through emulation, when we find suspected issues, we have to replicate them on a better emulator or a physical device.

But the Chrome emulation is so convenient on the desktop that for a first run check on the site, and certainly checking how your server responds to mobile headers, these are a great first step.

And you can stop the emulation by clicking the [Reset] button.

In the video I show a bonus, which I thought was an emulator bug, but seems to be by design by the BBC, where the Weather page does not redirect.

Chrome emulation? Very easy way to run a first check on the site, if you know how to access the functionality.

Additional References: