Remote Debugging Android Devices

Posted By : Ekta Bhadauriya | 29-Apr-2021

Testing and debugging websites on mobile devices can be challenging. Phones and tablets Browsers often don’t have built-in debuggers, and emulating phone is not so accurate. The desktop version of Chrome provides a solution with remote debugging to debug mobile websites on Android.

In this article, we will learn how to use remote debugging with Chrome from your computer. We can use any of the common desktop operating systems like Windows, macOS, or Linux.

 

 

Setting up

Before any remote debugging, we need to set up our computer to recognize our Android device. This means to allow Chrome’s debugger to recognize and connect to the phone. Start by setting some options on the phone.

Phone settings

Open up the Settings app on our phone. We’ll need to enable Developer options if we haven’t already.  Go to the “About Phone” menu to enable, which is located inside the System menu on modern Android devices. Once we’re in there, scroll to the bottom then we have to tap on “Build Number” seven times. then go back to the previous screen or into the “System” menu in the Settings app. There, you’ll now get a new menu item named “Developer options” near the bottom.

Once we’re inside Developer options, enable them on our phone by clicking the toggle at the top of the page. When the toggle is “On”, scroll down a bit and enable “USB debugging” . This will allow us to debug our device via a USB cable connection.

 

To debug Chrome on Android, start with your Developer options window

 

Computer setup (using Android USB debugging)

Driver installation

If using Windows the first thing we’ll need to install the USB drivers for our device. The Android Studio website has a list to find the drivers along with some instructions on how to install the drivers on our computer. 

In case the computer runs macOS or Linux there is no need to install drivers. Mac users are in fact ready to go. If the machine runs on Linux, there are some more setup steps required. make sure the user account belongs to a certain group and we’ll need to install a package with “udev rules”. 

Install Android Debug Bridge (ADB)

Once got the drivers or udev rules installed, we also need ADB to provides an interface to talk to the mobile devices. ADB and other Android platform-tools come with Android Studio, but can also download separately.

After it’s downloaded, run it to install ADB. after installation we need to navigate to the folder where it was installed (C:\Program Files(x86)\Minimal ADB and Fastboot by default) and double-click cmd-here.exe. which then opens a command prompt window in that folder.

Using either of the techniques, in the shell window, type in ADB start-server to start the ADB server.

Note: If we restart our computer, the server will not be running automatically. It’s not recommended to run the server as a permanent background service.

The last thing to set up the computer is to enable remote debugging in the Chrome developer tools by opening Chrome on the computer and go to the DevTools settings at chrome://inspect/#devices to do this.

To debug websites in Android make sure “Discover USB devices” is checked. 

 

 

Making the connection

To debug websites in Android on our device, plug the phone into the computer via USB. If didn’t do this as part of the driver installation, we might see a notification on our taskbar letting us know our computer is setting up our new device. Make sure the phone is on and unlocked and the ADB server is running, then we see a popup titled “Allow USB debugging?”.

 

Debug Android by allowing USB Debugging Popup

 

About Author

Author Image
Ekta Bhadauriya

Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.

Request for Proposal

Name is required

Comment is required

Sending message..