Discover the simulation power behind the Device Mode feature in Google Chrome.
Chrome DevTools has a feature called Device Mode since Chrome 49. This feature extends some previous features by allowing you to simulate different devices and capabilities. Possible use cases include:
Disclaimer: This tool will only simulate the display of a web page rendered by your version of the Chrome browser, so don't assume it works as expected across all devices and browsers. It can't emulate the performance characteristics of a real device. There are tools and services that can be used to achieve this but is beyond the scope of this topic.
Enable the Device Mode feature.
Click on the Device Mode icon at the top-left of the Developer Tools window.
You could use shortcuts, but make sure the focus is on the Developer Tools window and not the browser window for it to work.
You can disable Device Mode by clicking on the icon or using the same shortcuts as above.
These controls give you the ability to test your web page across a variety of devices or directly interact with the responsive nature of it. You can change the device, width, height, zoom and orientation (if height is present).
You can add pre-configured devices to the list by clicking on Device dropdown > Edit.... Check the boxes of the devices you want to add to the list. Click on the device dropdown in the viewport controls to see your updated list.
You can add your own devices by following the same steps as above but instead of checking boxes you can click on the Add custom device... button.
Note: The simulator makes use of User Agent strings. These are used by web browsers and applications to identify themselves by web servers.
You can get a comprehensive list from User Agent String.com.
Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20120501 Firefox/12.0 SeaMonkey/2.9.1 Lightning/1.4
Tip: Increase the height of the Developer Tools window before adding the new device. The Settings modal overlays the Developer Tools window. If you increase the height of the window, the overlay will fill it. Unfortunately once the modal is open, the window height cannot be adjusted (at least not on Windows).
You can use the media query inspector by clicking on Show media queries in the vertical three dot menu at the top-right corner of the Viewport controls.
The media queries for the web page are detected and displayed as colored bars. When you right-click on a color, you can reveal the CSS in the source code.
@media only screen and (max-width: 960px)
@media (min-width: 768px) and (max-width:960px)
@media (min-width: 768px)
You can mimic different network related behaviors by throttling your connection speed for the tab you are inspecting on.
Click on Show throttling in the vertical three dot menu at the top-right corner of the Device Mode window. Select a speed to test your page at. You will need to refresh the page to see the result. You may also want to monitor your network traffic and page load time using the Network tab in the Developer Tools window.
For out more about optimizing performance under varying network conditions.
When developing on a desktop you are at a disadvantage as there isn't native support hardware for GPS and accelerometers.
Chrome DevTools has a Sensors Emulation feature which allows you to override geolocation coordinates and device orientation accelerometer data.
Click on the vertical three dot menu at the top-right corner of the Developer Tools window > More tools > Sensors.
Find out more about emulating sensors.