Chrome Developer Tools Emulation Mode

Testing our websites has become a complex exercise for webmasters. Back in the day it was complete after verifying functions of a couple of browsers. However new websites must now be tested on a variety of platforms including mobile, tablets, desktop devices as well as various operating systems and screen resolutions and capabilities – touch-screens and HD displays..

In some cases it can take the same amount of time as website development. Building code on just a PC will not allow you to appreciate the various other devices that consumers might consume media. The challenge is knowing how to test various systems without the need to switch amongst various devices.

 

Chrome Emulation mode

Happily the latest version of Chrome V32 (google.com/chrome) has come to our aid with its new Emulation mode in developer mode.

This helps to identify how your masterpiece will render on various devices without leaving your PC You just need to start the browser, navigate to the website you are testing, open up Developer Tools and choose your emulation setting from a plethora of devices, platforms and resolutions.

 

Devices

The devices section has all the most popular devices such as iPhones, iPads, Nexus Tablets, Samsung Galaxy devices etc

Screens

the screen setting lets you set things like Apple Retina display with twice resolution of viewport User Agent This will show how your work will be viewed in every device if you wish to go that deep.

Sensors

Sensors this gives you device emulation such as touch, geoloaction and even accelerometer

 

User Agent

The user agent can be tricked enabling client and server-side code to act as apprpriate. This save you enabling the user agent switcher Chrome addons.

 

Chrome Developer Tools Emulation Mode is not perfect so give it a go and perhaps test on real life devices as a double check.