Web developers often test a website on a specific browser (for example, Chrome) repeatedly during the development phase. This helps them verify how every change to their codebase reflects in the browser. This process ensures that web developers are optimizing their sites for the real world.
This article aims to explain how developers can view the mobile version of a website on Chrome via desktop. It also explains how one can test websites on real mobile devices.
First, let’s understand how users can instantly view the mobile version of any website.
Using Device Simulation in Chrome DevTools for Mobile View
Users can view the mobile version of a website by using Chrome Devtools.
Listed below are the steps to view the mobile version of a website on Chrome:
- Open DevTools by pressing F12.
- Click on the “Device Toggle Toolbar” available. (Icon turns blue when the device mode is turned on)
- Choose a device you want to simulate from the list of iOS and Android devices.
- Once the desired device is chosen, it displays the mobile view of the website.