Remote debug Android devices to debug SLS issues with interactives

 https://developer.chrome.com/docs/devtools/remote-debugging/

As a beginning mobile developer, the ability to remotely debug Android devices has been a game-changer for me. Being able to identify and resolve issues on the go has saved me a lot of time and effort. In this post, I will be sharing my thoughts on remote debugging and how it has helped me in my work.

Remote debugging is a process of debugging an application on a device that is not physically connected to your computer. It is a powerful tool that allows developers to troubleshoot issues on devices that are not readily available. In Android development, remote debugging is essential, as it allows developers to test their applications on real devices as well as emulate on the DevTools console..

https://vle.learning.moe.edu.sg/mrv/home testing a recent interactive i made using EJSS authoring toolkit which uses many video as animations and EJSS as interactive layer.

There are many tools available for remote debugging in Android. One of the most popular tools is Android Studio, which has a built-in remote debugging feature. To use this feature, you need to connect your device to your computer via USB and enable USB debugging in the developer options. Once you have done that, you can launch the application on your device, and Android Studio will automatically detect the device and enable remote debugging.

But i used this tool instead that I have found useful for remote debugging and it is Chrome DevTools. Chrome DevTools is a web development tool that allows developers to debug web applications on desktop and mobile devices. With the help of Chrome DevTools, developers can debug their Android applications remotely by connecting their device to their computer via USB and enabling USB debugging. Once the device is connected, you can launch the application on your device, open Chrome DevTools, and connect to the device to start debugging.

connect via USB-C to USB-C cable connecting phone to Mac

Remote debugging has been a lifesaver for me on many occasions. For instance, when I was working on an application that had a critical bug (video didnt play and I had to create console.log to see what is missing) that only occurred on a Android and iOS devices, remote debugging helped me identify and resolve the issue quickly. I was able to connect to the device remotely and debug the application in real-time, which made it easy for me to identify the issue and resolve it. I assume Android and iOS has the same issue, so fixing the bug on Android will benefit the iOS device.

In conclusion, remote debugging is an essential tool for Android developers. It allows developers to test their applications on real devices. With the help of tools like Chrome DevTools, developers can debug their applications remotely and identify and resolve issues quickly. I personally love the ability to debug issues on the go, and I think remote debugging is a must-have tool for any Android developer.

Check out Google's blog here https://developer.chrome.com/docs/devtools/remote-debugging/

Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:

• Set up your Android device for remote debugging, and discover it from your development machine.
• Inspect and debug live content on your Android device from your development machine.
• Screencast content from your Android device onto a DevTools instance on your development machine.

#Step 1: Discover your Android device

The workflow below works for most users. See Troubleshooting: DevTools is not detecting the Android device for more help.

1. Open the Developer Options screen on your Android. See Configure on-device developer Options.

2. Select Enable USB Debugging.

3. On your development machine, open Chrome.

4. Go to chrome://inspect#devices.

5. Make sure  Discover USB devices is enabled.

   

6. Connect your Android device directly to your development machine using a USB cable.

7. If you are connecting your device for the first time, the device will show up as "Offline" and pending authentication.

   

   In this case, accept the debugging session prompt on your device's screen.

8. If you see the model name of your Android device, DevTools has successfully established the connection to your device.

   

9. Continue to Step 2.

#Troubleshooting: DevTools is not detecting the Android device

Make sure that your hardware is set up correctly:

• If you're using a USB hub, try connecting your Android device directly to your development machine instead.
• Try unplugging the USB cable between your Android device and development machine, and then plugging it back in. Do it while your Android and development machine screens are unlocked.
• Make sure that your USB cable works. You should be able to inspect files on your Android device from your development machine.

Make sure that your software is set up correctly:

• If your development machine is running Windows, try manually installing the USB drivers for your Android device. See Install OEM USB Drivers.
• Some combinations of Windows and Android devices (especially Samsung) require extra set up. See Chrome DevTools Devices does not detect device when plugged in.

If you don't see the Allow USB Debugging prompt on your Android device try:

• Disconnecting and then re-connecting the USB cable while DevTools is in focus on your development machine and your Android home screen is showing. In other words, sometimes the prompt doesn't show up when your Android or development machine screens are locked.
• Updating the display settings for your Android device and development machine so that they never go to sleep.
• Setting Android's USB mode to PTP. See Galaxy S4 does not show Authorize USB debugging dialog box.
• Select Revoke USB Debugging Authorizations from the Developer Options screen on your Android device to reset it to a fresh state.

If you find a solution that is not mentioned in this section or in Chrome DevTools Devices does not detect device when plugged in, please add an answer to that Stack Overflow question, or open an issue in the developer.chrome.com repository!

#Step 2: Debug content on your Android device from your development machine

1. Open Chrome on your Android device.

2. In chrome://inspect/#devices on your development machine, you see your Android device's model name, followed by its serial number. Below that, you can see the version of Chrome that's running on the device, with the version number in parentheses.

   

3. In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.

   

   Each remote Chrome tab gets its own section in chrome://inspect/#devices. You can interact with that tab from this section. If there are any apps using WebView, you see a section for each of those apps, too. In this example, there's only one tab open.

4. Click Inspect next to the URL that you just opened. A new DevTools instance opens.

The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you're used to.

#More actions: pause, focus, reload, or close a tab

Below the URL you can find a menu to pause, focus, reload or close a tab.

#Inspect elements

Go to the Elements panel of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device.

You can also tap an element on your Android device screen to select it in the Elements panel. Click Select Element  on your DevTools instance, and then tap the element on your Android device screen. Note that Select Element is disabled after the first touch, so you need to re-enable it every time you want to use this feature.

#Screencast your Android screen to your development machine

Click Toggle Screencast  to view the content of your Android device in your DevTools instance.

You can interact with the screencast in multiple ways:

• Clicks are translated into taps, firing proper touch events on the device.
• Keystrokes on your computer are sent to the device.
• To simulate a pinch gesture, hold Shift while dragging.
• To scroll, use your trackpad or mouse wheel, or fling with your mouse pointer.

Some notes on screencasts:

• Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Chrome address bar, the Android status bar, or the Android keyboard.
• Screencasts negatively affect frame rates. Disable screencasting while measuring scrolls or animations to get a more accurate picture of your page's performance.
• If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast.