Here we can find predefined profiles or add a new one.ĭevTools supports also such mobile specific features as geolocation and gyroscope. Throttling settings are accessible in Developers Tool Menu (F11) > Throttling tab. We can check if our application works sufficient, loads quickly and remains responsive in all environments. This feature is very useful when we want to simulate slow network connection for example open hot spots (airports, hotels).

pixel ratio (density which is used in retina display or similar high resolution displays).

Options available for defining a new device: On this tab we can enable/disable existing devices or add a new one. If there is a need to add a new mobile resolution to a predefined list, we can simply do that in Developers Tool Menu (F11) > Devices tab.

ORANGE – queries which target a minimum width.

GREEN – queries which target widths within a range.BLUE – queries which target a maximum width.To enable graphical representation for current CSS file we need to open “Three dot menu” and click on “Show media query” option. Media query bar is placed below the main toolbar and presents scales for typical phones and tablets resolutions. Typical behaviour like element hover is disabled, however mobile specific actions like display tapping or scrolling are enabled. In the emulation mode the standard cursor is replaced by a virtual pointer. Mobile emulation view appears after clicking on mobile device icon shown below. Open a site that you want to verify or debug and go to: Browser Menu > More Tools > Developer Tools (or use shortcut Cmd+Opt+I on Mac or F12 / Ctrl+Shift+I on Windows and Linux). I will introduce some really useful features related to mobile testing below. Chrome browser contains a tool called Chrome DevTools which consists of many very useful features like code inspection, DOM manipulation, integrated JS console, performance and network monitoring and many more.

Mobile_emulation = Ĭhrome_options.add_experimental_option('mobileEmulation', mobile_emulation)ĭriver = webdriver.All modern browsers provide integrated development and debugging tools for developers. To enable Mobile Emulation with a specific device name, the “mobileEmulation” dictionary must contain a “deviceName.” Use a valid device name from the DevTools Emulation panel as the value for “deviceName.”

Chrome mobile emulation