Website testing has become increasingly complex. Checking the functionality of a couple of browsers is long overdue. Your latest masterpiece needs to be thoroughly evaluated on a number of mobile phones, tablets and desktops with different operating systems, screen resolutions and features. In extreme cases, it can last as long as the original development.
The process remains complex with touch screens, hybrid devices, and dense screens. If you code on a regular computer with a mouse and keyboard, it’s hard to appreciate the performance of your masterpiece. Features like mouse hovering may not work and your application may not work. But how can you test your system during development and avoid the pain of managing and switching multiple devices?
Fortunately, all modern browsers offer mobile simulation tools, and one of the best can be found in the Chrome browser. It can help identify early problems without leaving your computer’s comfort and development environment.
Start Chrome, go to the webpage you’re testing, and open Developer tools (Menu> Tools> Developer tools, Cmd + Care about + I MacOS or F12 / Ctrl + Transfer + I Windows and Linux).
You can now click to enable the browser emulator Change the device toolbar icon in the upper left corner:
The device simulation now appears:
The dimensions of the emulated display can be changed at any time Reactive is selected as the device type.
Touch Used Emulation
touchend. Mouse-specific events and CSS effects should not occur.
Hold down Transfer click and move the mouse to mimic the pinch zoom.
You may want to spend some time exploring the toolbar and menu above the mobile emulator:
The default drivers are:
- device type (or Reactive)
- in accordance with the current resolution
- scale (the screen can be zoomed in or out to better fit the emulator screen)
- network speed
- vertical / horizontal toggle button
In the three-point menu, you can show or hide additional controls:
- device frame (if available, picture from phone or tablet)
- CSS media query bars (see below)
- pixel ruler
- increase the pixel ratios of the device
- add device types
- capture a screenshot (including the device frame if it appears)
- capture full page screenshot
choose View media polls from the three-point menu to see a graphical color-coded representation of all media queries set in CSS.
- BLUE: queries that target the maximum width
- GREEN: Queries that target widths in a specific area
- ORANGE: queries targeting the minimum width
Clicking on any bar sets the emulator screen to that width.
Emulated device options
You can select a device from the drop-down menu on the left. Several dozen presets are offered for popular smartphones and tablets, including iPhone, iPad, Kindles, Nexus tablets, Samsung Galaxy and so on.
Not all devices are shown at once. Click Edit… at the bottom of the device drop-down menu, or click DevTools settings wheel icon and select Equipment tab:
You can enable or disable devices or enable your own by specifying:
- classification such as “Mobile” or “Tablet”
- browser user agent string
- device accuracy
- and pixel ratio (such as 2 iPhone Retina screens with a pixel density twice the resolution of the reported view)
All browsers identify themselves with a user agent string that is sent to each HTTP header. This can be explored on the client or server side, and on the dark days of web development, it would be used to transform or provide a different user experience. In extreme cases, the viewer is redirected to another site. The technology was always flawed but it has become largely redundant due to responsive web design technology and was unsustainable given the number of devices on the market.
Bandwidth throttling simulation
The choke drop-down menu allows you to emulate the slow network speeds normally seen on cellular connections or on an embarrassing Wi-Fi network for hotel and airport use! This will ensure that your site or application loads quickly and remains responsive in all environments.
The throttle drop-down menu is available Network tab and the Chrome device toolbar. To configure your own bandwidth, click the DevTools tool settings gear icon and select Strangulation tab:
Click Add a custom profile then type:
- profile name
- download speed in kilobits per second
- download speed in kilobits per second
- delay in milliseconds (typical delay when making a network request)
Emulated mobile sensors
Smartphones and tablets often have GPS sensors, gyroscopes, and accelerometers that are not usually on the desktop. You can emulate these in Chrome by selecting More toolsthen Sensors From the three-item main menu of Developer Tools:
A new screen will appear allowing you to configure:
- Current Latitude and Longitude, or select a major city from the drop-down menu. You can also choose Location not available emulate how your application responds when your device is unable to receive a reliable GPS signal.
- Direction. Several presets are available, or you can click and drag to move the device image.
- Touch response.
- Standby mode to examine how the application responds to the lock screen.
Debugging the right device
Finally, Chrome lets you connect a real Android device via USB for remote debugging. Come in
Chrome lets you configure port forwarding to go to the web address of your device’s local server. The Chrome preview pane displays a synchronized view of your device’s screen, and you can interact with either your device or Chrome itself.
You can use all developer tools, including Application tab to test progressive web applications offline. Note that unlike a real application that requires HTTPS, Chrome allows PWA to be run from a localhost over an HTTP connection.
Glorious! I don’t need any equipment now!
Chrome’s mobile browser emulator is useful and powerful, but it doesn’t replace interaction with your website or app with a real device so you can evaluate the complete user experience.
You should also be aware that no device emulator is perfect. For example, Chrome displays a presentation of the page on an iPhone or iPad, but doesn’t try to simulate standard support or Safari oddities.
Chrome device emulation is great for fast and dirty mobile testing. It’s much easier than switching between real smartphones, and you have all the developer tools at your disposal. It saves hours.