How to Remotely Debug Websites on Android Chrome

With mobile platforms accounting for approximately 50% of global web traffic, it is safe to say that websites need to be optimized for access through mobile devices if they want to stand a chance at success. Consequently, businesses are now constantly working to provide users with a flawless web experience on mobile devices. For developers and QAs, this translates to comprehensive testing of web applications on real mobile devices and browsers that are popular among users.

Android is inarguably the most popular mobile platform on the planet, having grabbed 74% market share. Additionally, Chrome is the default browser for most Android devices. Naturally, Chrome dominates the mobile browser segment. Thus, testing on a device-browser combination that dominates the internet space is mandatory.

This article aims to guide developers or QAs on how they can remotely test and debug their websites for Chrome on real Android devices.

So let’s get started.

Debugging websites on Android Chrome using BrowserStack Live

BrowserStack makes Chrome debugging on real Android devices quite effortless. Developers get instant access to Chrome DevTools on their chosen Android handset. This makes it easy for the tester to trace specific bugs on a specific device.

Follow the steps below to get started with remote debugging on Android-Chrome.

1. Sign-up for a free trial on BrowserStack Live.
2. Once the account is created, navigate to the Live Dashboard.
3. From the available operating systems, choose Android.
4. Choose the desired vendor (Samsung, OnePlus, etc)
5. Hover over the desired handset. (Let’s take Samsung Galaxy S20 as an example) and click on the Chrome icon. This will initiate a new Chrome session on a real Samsung S20 device.
6. Once the session begins, users can simply navigate to the website they need to test and can start debugging using Chrome DevTools.
7. Start Chrome DevTools from the floating toolbar.

The screenshot above depicts how one can use developer tools to inspect or debug a specific web element on the Google website. The developer tool allows developers and QAs to modify and test code on the fly. This enables the debugging of HTML, CSS, JavaScript components for web elements.

Try Remote Debugging on Android for Free

Testing websites on multiple real devices requires an on-premise device lab. Such labs require significant financial investment, plus updating and maintaining it can prove to be a very tedious task. As a result, using a real device cloud is a cost-effective alternative.

Also read: How to inspect element on Android

Platforms like BrowserStack empower teams and individual developers by providing them with the ideal test infrastructure for remote testing. Organizations do not need to worry about maintaining an on-premise device lab. They just need to sign up for free, choose the desired device-browser combination, and get started. Additionally, features like Local testing and DevTools on mobile browsers help eliminate testing pain points and make the process noticeably easier.