How to view Mobile Version of a Website on Chrome

How do devs ensure that a website works? (Like they want it to and not in mysterious ways, that is.) Well, they test, test, and test! Practice makes a human perfect. Tests make a website (and other applications) perfect. Well, that’s until the next issue decides to “bug” the party.

Web devs test their websites on specific browsers and browser versions to confirm it works (like it should, not mysteriously 😊). Processes are put in place to auto-run these tests every time a dev increments the codebase.

According to a study, in 2023’s first quarter, 58.33% of global website traffic came from mobile devices. The implication is devs must ensure that websites are optimized to run well on mobile browsers, too.

As of March 2023, Google Chrome is the leading mobile browser, with a market share of 64.8% worldwide. Hence, testing mobile versions of websites on Chrome is crucial.

Source

This article will explain how developers can open Chrome mobile view via desktop. It also explains how one can test websites on real mobile devices online.

Why test Mobile version of a website on real Chrome browsers?

Before we tell you how to do it, let’s finish what’s still unfinished–why do it?

The reasons are:

• Since Chrome is the most popular among users, you must develop websites and web apps with this user base in mind.
• Ensure your website renders and operates flawlessly on different Chrome versions.
• Check how a Chrome version interacts with the hardware of a particular device. 

The last point adds another layer of testing to the web development process. Emulators and simulators can’t replicate all the requirements for accurate testing. For example, they may not replicate every feature in every Chrome version.

And that leaves us with inconclusive and unreliable results. (If that has you worried, the mission is accomplished. 😜)

Now that you know why, it’s time to see how. There are two ways:

• Using the Device Simulation feature
• Using BrowserStack’s Real Device cloud

Using Device Simulation in Chrome DevTools for Mobile View 🧰

To view the mobile version of a website on Chrome:

Listed below are the steps to view the mobile version of a website on Chrome:

1. Press and hold the Function (fn) key (until it comes off 😜) and then press F12.
This opens DevTools.

2. Click Device Toggle Toolbar.
The icon turns blue when the device mode is turned on. (Don’t fancy blue? We are with you.)

3. From the devices list, select the device you want to simulate.

The display changes accordingly.

But this isn’t entirely reliable. Coz it uses a simulator to get the job done, and we’ve already seen why simulators aren’t reliable. Instead we should test websites on real Chrome browsers.

Using BrowserStack’s Real Device Cloud for Live Testing 🧪

The ideal (yep, you read that right! Ideals didn’t exist until BrowserStack 😉) way to test a website is to test it on a real device. This helps you monitor websites on mobile browsers that are installed on real Android and iOS devices. Also, you can see how a website performs across multiple mobile devices and browsers in the real world.

BrowserStack’s real device cloud provides 3000+ real devices and browsers to test on. You can test on any real Android or iOS mobile device directly from your browser. No need to download any browsers or emulators.

To view the mobile version of a website on Chrome:

1. Sign up for a free BrowserStack account. (Nothing comes free, they say. And here we are. Challenging the norm! 😉)

2. Go to BrowserStack Live.

3. After the dashboard opens, select the Chrome browser (and version!) on a device of your choice.

In this example, we’ve selected the Chrome browser running on Samsung Galaxy S23.

After you’ve made your selection, a new test session starts up on a real Samsung Galaxy S23.

4. Go to the website you want to view on the device, and check how it renders.

And you’ve tested the mobile version of your website from the comfort of your desktop (or laptop). 🎉

That’s how it’s done! 😜

But this end feels premature, and you’d like to know more? (About BrowserStack, of course!)

Here are a few highlights of BrowserStack’s Real Device cloud:

• No setup nor download needed.
• No queues for testing. Pick a device-OS-browser combination and start testing.
• Latest Android devices from Samsung, OnePlus, Google, Motorola, Vivo, Oppo, and Realme.
• Latest iOS devices like iPhone 14, iPhone 13 Pro Max, iPhone 12 Mini, and more.
• Latest and legacy versions of Chrome, Firefox, Safari, and Opera installed on real devices.
• Latest macOS Ventura, and Windows 11, along with older versions.

With BrowserStack, you can test on any real Android or iOS mobile device directly from your browser. No need to download any browsers or emulators. To open a mobile version of a website on Chrome, QAs can log in, select the device-browser-OS combination and start testing. The image above represents a live testing session (Chrome Browser Testing on Samsung S10+) on BrowserStack.

Also, you have direct access to:

• DevTools that’s handy with inspecting web elements
• Geo-location testing
• Integrations with popular bug-reporting tools like Jira, Trello, and Slack
• Testing of features like pinch-to-zoom and device rotation

These can go a long way in eliminating your debugging pain points and optimizing your website’s performance across devices.