From the author: website testing is becoming more and more difficult. The days of testing functionality in a couple of browsers are long gone. Your app should be carefully evaluated on a variety of mobile, tablet and desktop devices with different OS, screen resolutions and capabilities. In extreme cases, this can take as long as the original development.
The process is further complicated by touch screens, hybrid devices and high density displays. If you write code on a regular PC using a mouse and keyboard, it is difficult to evaluate how your application will perform. Features such as mouse hover may not necessarily work and your application may become unusable. But how can you test your system during development and avoid the pitfalls of controlling and switching between multiple devices?
Fortunately, all modern browsers offer mobile emulation tools, and one of the best can be found in Chrome. This can help identify problems at an early stage, without leaving a comfortable computer and development environment.
Launch Chrome, go to the webpage you want to test, and open Developer Tools (Menu> Tools> Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).
You can now enable the browser emulator by clicking the Toggle device toolbar icon in the upper left corner:
A simulation of the device will now appear:
The emulated screen can be resized when the device type is set to Adaptive.
Touch Enabled Emulation
Hold Shift then click and move the mouse to simulate scaling.
Mobile Device Emulator Toolbar
It’s worth taking some time to familiarize yourself with the toolbar and menu above the mobile emulator:
scale (the screen can be enlarged or reduced to fit better into the emulator panel)
portrait / landscape toggle button
A three-dot menu allows you to show or hide additional controls:
device frame (if any, a picture of a phone or tablet)
CSS Media Query Panels
add device pixel ratio
add device types
take a screenshot (including the device frame, if shown)
take a screenshot of the entire page
CSS Media Query Bars
Select Show Media Queries from the three-dot menu to see a graphical color-coded representation of all media queries specified in CSS.
BLUE: Maximum width queries.
GREEN: Width-oriented queries within a range.
ORANGE: Minimum width-oriented queries.
You can click any panel to set the emulator screen to the desired width.
Emulated device parameters
The drop-down menu on the left allows you to select a device. There are dozens of presets for popular smartphones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy and so on.
Not all devices are presented at once. Click Change … at the bottom of the device drop-down list, or click the gear icon of the DevTools Settings and select the Devices tab:
You can enable or disable devices or enter your own by defining:
such a classification as “Mobile” or “Tablet”.
browser user agent string
and pixel ratio (for example, 2 for iPhone Retina screens, where the pixel density is twice the stated resolution of the viewport)
All browsers identify themselves with the user agent string sent in each HTTP header. This can be verified client-side or server-side and can be used to modify or provide a different user experience. As a last resort, the viewer will be redirected to another site. This method has always been imperfect, but has become largely redundant due to responsive web design techniques and has been unsustainable given the number of devices available on the market.
Modeling Bandwidth Adjustment
You can simulate the slow network speeds commonly seen when using mobile connections or slow Wi-Fi in hotels and airports! You can use this to keep your site or app loading quickly and staying responsive in all environments.
The throttling drop-down menu is available on the Network tab and on the Chrome device toolbar. You can set your own bandwidth configuration by clicking the DevTools Settings gear icon and selecting the Throttling tab:
Click Add your own profile, then enter:
incoming speed in kilobits per second
outgoing speed in kilobits per second
latency in milliseconds (typical latency when making a network request)
Emulated mobile sensors
Smartphones and tablets often have sensors such as GPS, gyroscopes, and accelerometers that are usually not found in desktop devices. They can be emulated in Chrome by choosing More Tools and then Gauges from the main three-dot Developer Tools menu:
A new panel will appear where you can define:
Current latitude and longitude, or select a major city from the drop-down list. You can also select Location Not Available to simulate how the app reacts when your device cannot receive a reliable GPS signal.
Standby state to check how the app reacts to the lock screen.
Remote debugging on a real device
Finally, Chrome allows you to connect a real Android device via USB for remote debugging of the device. Enter the address bar and make sure the Detect USB devices checkbox is checked, then connect your phone or tablet and follow the instructions.
Chrome allows you to set up port forwarding so you can navigate to the web addresses of a local server on your device. Chrome’s preview pane shows a synced view of the device’s screen, and you can interact with either the device or Chrome itself.
You can use the full range of developer tools, including the Application tab, to test Progressive Web Applications offline. Note that, unlike a real application that requires HTTPS, Chrome allows PWAs to be launched from localhost over an HTTP connection.
Super! I don’t need any more devices!
The Chrome mobile browser emulator is useful and effective, but it does not replace the interaction with your website or application on a real device to evaluate a complete user experience.
You should also know that no device emulator is perfect. For example, Chrome shows a page view on an iPhone or iPad, but doesn’t try to mimic Safari’s standards support or features.
However, for quick and rough testing of mobile devices, Chrome device emulation is excellent. It’s much easier than switching between real smartphones and you have all the developer tools at your disposal. This saves a lot of time and effort.
Author: Craig buckler
A source: www.sitepoint.com
Editorial staff: Webformyself team.
Follow us on Telegram, VK, Yandex.Zen
Bootstrap 4 framework. Quick start
Learn the basics of Bootstrap 4 with a hands-on example of how to design a blog from scratch!