'Debug Android Ionic Application (Android WebView Debugging) Unbound Breakpoints

I am having issues with using VScode to debug an Angular Ionic app deployed on a native android device.

I followed the following -Debugging with Visual Studio Code in Android

https://ionicframework.com/docs/troubleshooting/debugging

My launch.json is as follows

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "https://localhost:4300",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "android-webview",
            "request": "attach",
            "name": "Attach to Android WebView",
            "webRoot": "${workspaceFolder}/www",
            "trace": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:/*": "${workspaceFolder}/*"
            }
        }
    ]
}

I successfully connected to the ADB as i am able to click refresh on the debugger and the application on the native android does refresh so i know the connection is good.

I put a breakpoint on the app.component.ts and it is showing a grey outlined cirlce. Mousing over shows Unbound Breakpoint.

What am I missing?

My process is I run

ionic cap sync ionic cap open android

Android studios i choose my device and click debug

Visual Studio Code I select the "Attach to Android Webview" configuration and attach Select my Device Select the application name

androiddebuggingionic-frameworkvisual-studio-code


Solution 1:[1]

My advice for Ionic Apps is to debug the typescript side using chrome://inspect (or similar) and to use the browser console as on "ionic serve".

I know this is not exactly what are you looking for but it can to be a valid workaround :D

In my opinion it is also more efficient as it allows you to consult the network calls and the rest...

Solution 2:[2]

You need to ensure that

  1. You are running the app with the command

ionic cap run android -l --external

  1. You have started the android webview debug after the webview initiates (shows up on a chrome inspect)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nibia
Solution 2 Ravith B.

Related Questions