Every tester probably heard about Chrome Device Mode, if you didn’t, don’t worry, we will try to introduce you with it.

Open the Chrome DevTools and Toggle the Device Mode button Device Mode to turn Device Mode on or off. Device Mode will emulate your site across different screen sizes and resolutions. In Viewport Controls you can change the device for emulation or you can make your own custom device presets.

ViewportControls
It’s a very simple tool and easy to use, but if you need more details check out Google’s directions.

So, Device Mode vs Real Device?

Let’s see what are limitations of the Chrome Device Mode:

  • Device hardware
  • GPU and CPU behavior are not emulated.
  • Browser UI
  • System displays, such as the address bar, are not emulated.
  • Native displays, such as <select> elements, are not emulated as a modal list.
  • Some enhancements, such as number inputs opening a keypad, might vary from actual device behavior.
  • Browser functionality
  • WebGL operates in the emulator, but is not supported on iOS 7 devices.
  • MathML is not supported in Chrome, but is supported on iOS 7 devices.
  • The iOS 5 orientation zoom bug is not emulated.
  • The line-height CSS property operates in the emulator, but is not supported in Opera Mini.
  • CSS rule limits, such as those in Internet Explorer, are not emulated.
  • AppCache
  • The emulator does not override the UA for AppCache manifest files or view source requests.

Then why using Device Mode when have so many limitations? Real device can cost a lot of money and it’s hard to have them all. For quick mobile testing, Chrome’s device emulation is excellent. It’s far easier and faster than switching between real smart phone and tablet devices. Just imagine you need to save screenshot from every device and send it to location where you writhing your tickets. Using Device emulator will save hours of effort.

However, the final testing definitely needs to be performed on a real device.

Similar Posts from the author: