Android Emulator Chrome Debug in VSCode

Question

How I normally debug in chrome

When I debug my web app in VSCode I can create a configuration in launch.json and run this in the debugger in order attach the debugger to an instance of Chrome.

{
  "version": "0.2.0",
  "configurations": [
      {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",

      "webRoot": "${workspaceFolder}"
    }
  ]
}

This allows me to make breakpoints within VSCode instead of in DevTool. It's easier to navigate my React files in VSCode, than in DevTools.

How I'm debugging on the Android Studio emulator's chrome

To inspect my web app on the emulated Android, I open my web app in the emulated Android's Chrome browser. Then I go to my desktop Chrome browser and navigate to chrome://inspect/#devices and click 'inspect' on the emulated device. Then I can set breakpoints in Chrome DevTools.

Can I debug the emulated Android within vscode?

Is it possible to attach this Android emulator's Chrome to the VSCode debugger like I normally do with Chrome? I would rather debug within VSCode, than through DevTools.

Answer 1

I managed to get it working using this VS Code extension:

https://marketplace.visualstudio.com/items?itemName=mpotthoff.vscode-android-webview-debug

You will need to know your adb device serial, which can be obtained by running adb devices on your terminal (if you do not have adb installed, you can install it using sudo apt install adb). In my case it returned:

List of devices attached
emulator-5554   device

NOTE: I'd recommend running the previous command at least once before starting the emulated device, because when I ran the first time and my emulated device was already on, it couldn't be detected. After running it once, it launches its daemon, and then you can launch the emulator and use the command to list the devices.

You can then add this configuration to your launch.json file:

{
  "type": "android-webview",
  "request": "attach",
  "name": "Attach to Chrome on Emulated Android Device",            
  "webRoot": "${workspaceFolder}",
  "device": "emulator-5554",
  "application": "com.android.chrome"
}

You must then launch your web app, (via yarn start, for example) and then access the app in the emulated device's chrome browser using your desktop's local IP (e.g. 192.168.1.10:3000).

With all of this configured, I was able to launch the VS Code debugger attaching it to the emulated device's chrome and it worked nicely.