How to open a link in desktop mode

Home Guide How to view Mobile Version of a Website on Chrome

How to view Mobile Version of a Website on Chrome

By Jash Unadkat, Technical Content Writer at BrowserStack -

Table of Contents

Web developers have to test websites on specific browsers to ensure the sites compatibility with said browsers specifications. Tests are run repeatedly during development to help them verify how every change to the codebase reflects in the browser. This process ensures that web developers are optimizing their sites for the real world.

However, developers must bear in mind that 56.16% of all web traffic came through mobile phones. As a result, they need to ensure that websites are well-optimized to run on mobile browsers. Chrome is indisputably the leading mobile browser with a current market share of 64.73% worldwide. Hence testing mobile versions of websites on Chrome is crucial.

This article aims to explain how developers can open a websites mobile view in Chrome browser via desktop. It also explains how one can test websites on real mobile devices online.

First, lets 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:

  1. Open DevTools by pressing F12.
  2. Click on the Device Toggle Toolbar available. [Icon turns blue when the device mode is turned on]
  3. Choose a device you want to simulate from the list of iOS and Android devices.
  4. Once the desired device is chosen, it displays the mobile view of the website.

Note: This approach just lets you simulate different viewports on your desktop browser. However, this is not the most accurate way to test the mobile version of a website on Chrome, as it is just a device simulation. It cannot simulate all aspects of a real mobile device.

For web developers to gain accurate test insights, extensive testing on real devices is non-negotiable. It enables them to verify websites in real user conditions.

BrowserStacks Real Device Cloud for Live Testing

The ideal way to test a website is to test it on a real device. This helps developers monitor websites on mobile browsers that are installed on real Android and iOS devices. By doing so, QAs can evaluate how a website performs across multiple mobile devices and browsers in the real world.

BrowserStacks real device cloud provides 2000+ real devices and browsers to test on.
A few of its highlights:

  1. Latest Android devices from Samsung, Oneplus, Google and Motorola
  2. Latest Apple devices like iPhone X, iPhone 11 Pro
  3. Multiple versions of leading browsers like Chrome, Firefox, Safari, Opera installed on real devices

QAs can test on any real Android or iOS mobile device directly from their browser. They do not have to download any browsers or emulators. To open a mobile version of a website on Chrome, QAs can simplylog in, select the device-browser-OS combination and start testing. The image below is an exact representation of a live testing session [Chrome Browser Testing on Samsung S10+] on BrowserStack.

View Mobile Version on Real Device Cloud for Free


BrowserStack also provides the following features :

  1. Upfront access to DevTools that enables inspection of web elements on the page
  2. Geo-location testing
  3. Integrations with popular bug reporting tools like Jira, Trello, and Slack
  4. Testing of features like pinch to zoom and device rotation

The methods explained above can help developers eliminate their pain points while debugging any issue. These methods also help optimize a websites performance across multiple devices. Knowing how to open a websites mobile view in Chrome is an essential part of a QA engineers skillset, and this article will help them with mastering this skill.

Was this post useful?
Yes, Thanks Not Really

We're sorry to hear that. Please share your feedback so we can do better

Thanks a lot for your feedback!
Tags
Cross browser testing Emulator and Simulator Responsive

Related Articles

How to inspect an element on iPhone

Learn two intuitive methods that helps in inspecting web elements on the iPhone. Don't miss out on t...

Learn More

Manual Testing for Beginners

An informed guidepost that will explain everything one should know about Manual testing. Learn the s...

Learn More

Difference between Selenium Standalone server and Selenium server

Learn the differences between two Selenium standalone server and Selenium server, what they do, and ...

Learn More

Featured Articles

How to inspect an element on iPhone

Manual Testing for Beginners

Difference between Selenium Standalone server and Selenium server

Cross browser testing Emulator and Simulator Responsive

Test Instantly on 2000+ Real Devices & Browsers Contact us Get Started Free

Get your website tested in seconds

Video liên quan

Chủ Đề