Skip to content

Mobile debugging (Android)

Jump to bottom
Greg Slepak edited this page Jun 26, 2024 · 2 revisions

Android Debugging

The conversation below may be helpful in obtaining the console logs from a phone.

After reading the the conversation please also be aware of these tips:

  • Append ?debug=true when loading the page URL to get more logs
  • If no devices are shown in brave://inspect/#devices even after following all of the tips below, try opening a different Chromium browser. E.g. on GrapheneOS there is a browser called Vanadium, and that seems to sometimes wake up Brave (on Desktop) to take notice of the new tabs you have open on the device (even the ones on Brave on the phone).

User

I have an Android phone and macOS and the Brave web browser (Chromium). How do I extract the console logs from the phone in order to debug a web page? I want to see these logs on my mac.

Claude 3.5 Sonnet

To extract console logs from your Android phone and view them on your Mac for debugging a web page, you can follow these steps:

  1. Enable USB debugging on your Android phone:

    • Go to Settings > About phone
    • Tap "Build number" seven times to enable Developer options
    • Go back to Settings > System > Developer options
    • Enable "USB debugging"

  2. Connect your Android phone to your Mac using a USB cable.

  3. On your Mac, download and install Android Studio, which includes the necessary tools for debugging:

  4. Once Android Studio is installed, open it and go to "Tools" > "SDK Manager"

    • Make sure you have the latest Android SDK Platform-Tools installed

  5. Open a terminal on your Mac and navigate to the platform-tools directory:

    cd ~/Library/Android/sdk/platform-tools

  6. Use ADB (Android Debug Bridge) to forward the debugging port:

    ./adb forward tcp:9222 localabstract:chrome_devtools_remote

  7. On your Android phone, open the Brave browser and navigate to the web page you want to debug.

  8. On your Mac, open the Brave browser and go to:

    chrome://inspect/#devices

  9. You should see your Android device listed. Look for the web page you're debugging under "Remote Target" and click "inspect".

  10. This will open a new window with Chrome DevTools, where you can see the console logs, inspect elements, and debug your web page.

Alternatively, if you prefer a simpler method without using Android Studio:

  1. Install the "Chrome Remote Debugging" app on your Android phone from the Google Play Store.

  2. Follow steps 1 and 2 from above to enable USB debugging and connect your phone.

  3. Open the "Chrome Remote Debugging" app on your phone.

  4. On your Mac, open Brave browser and go to chrome://inspect/#devices

  5. Follow steps 9 and 10 from above.

These methods should allow you to see the console logs and debug your web page on your Mac while it's running on your Android phone.

User

For step (6), I tried running that adb command but got this error:

adb: error: no devices/emulators found

What do I do?

Claude 3.5 Sonnet

This error typically occurs when your Mac can't detect your Android device. Here are some steps to troubleshoot and resolve this issue:

  1. Ensure USB debugging is enabled on your Android device:

    • Go to Settings > Developer options
    • Make sure "USB debugging" is turned on

  2. Check the USB connection:

    • Try using a different USB cable
    • Try a different USB port on your Mac

  3. On your Android device, when you connect it to the Mac, you might see a popup asking to "Allow USB debugging". Make sure to tap "Allow" or "OK".

  4. Install Android File Transfer on your Mac:

  5. Restart both your Android device and your Mac.

  6. On your Mac, open a Terminal and run:

    ~/Library/Android/sdk/platform-tools/adb devices

    This should list connected devices. If it doesn't, try:

    ~/Library/Android/sdk/platform-tools/adb kill-server
~/Library/Android/sdk/platform-tools/adb start-server
~/Library/Android/sdk/platform-tools/adb devices

  7. If your device still isn't recognized, you may need to install the appropriate USB drivers for your Android device on your Mac. The process for this can vary depending on your device manufacturer.

  8. For some Android devices, you might need to change the USB connection mode on your phone. When connected, pull down the notification shade and look for a USB connection notification. Tap it and change the mode to "File Transfer" or "MTP" mode.

  9. If none of the above work, try going to Developer Options on your Android device and look for an option called "Select USB Configuration". Set it to "MTP" (Media Transfer Protocol).

Once your device is recognized (you should see its serial number when running adb devices), you can proceed with the adb forward command from the previous instructions.

If you're still having issues after trying these steps, please provide more information about your Android device model and the version of macOS you're using.

Clone this wiki locally