Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mobile Emulation on Google Chrome

DZone's Guide to

Mobile Emulation on Google Chrome

· Java Zone
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

If you want to see what your web page will look like on a mobile device and also do debugging during development on your desktop, here is a very useful resource for you.

Google Chrome allows you to emulate different mobile devices, screen resolutions, user agents and things like touch screen, geolocation and the accelerometer.

To enable Mobile Emulation on Google Chrome, open the Developer Tools, go to Settings and enable "Show 'Emulation' view in the console drawer".

 

Then, press 'Esc' to bring up the Developer Tools console drawer and finally select the Emulation tab. You'll find four sections: Device, Screen, User Agent and Sensors.

A quick test to understand this powerful feature can be done by simply navigating to www.google.com, select a device (i.e. Google Nexus 5) and then click Emulate. You'll be able to see that Google Chrome will show you the mobile optimized version of the Google website.

 
To go back to the original settings, just hit Reset and you'll see the regular Google Chrome rendering of the web page.
Have fun playing with the other features!

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}