Ionic VS Code Extension: breakpoints not being set for @ionic/angular app w/ capacitor

Hello everyone,

I’ve created an Ionic application using the following command:

ionic start test3 blank --type=angular --capacitor

Now I’m trying to use the Ionic VS Code extension to debug it on an Android device. What I’m doing is first clicking Run > Android , then Debug > io.ionic.starter , but I’m encountering issues with my breakpoints not being set correctly:

image

I’ve identified that this problem occurs because the Ionic Extension runs the app in prod mode and starts the source map server on port 80 when the debugger launches:

[Ionic] samsung SM-G980F Android 13...
> npx ionic build  --configuration=production && npx cap copy android && npx ionic cap run android --target=172.16.0.122:43565  --livereload --external --configuration=production
> ng.cmd run app:build:production
...
[Ionic] Starting source map server on port 80....

However, it seems that these source maps still aren’t being loaded properly…

I found a workaround for now, which involves running ionic cap run android -l --external from the CLI. This runs the app in dev mode, and then I bind the debugger afterward. But it would be really helpful if I could make this work using the Ionic Extension only.

Does anyone have any ideas on how to resolve this issue?

FYI here’s my ionic info:

Ionic:

   Ionic CLI                     : 7.1.1 (C:\Users\rezen\AppData\Roaming\nvm\v16.16.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.2.2
   @angular-devkit/build-angular : 16.1.7
   @angular-devkit/schematics    : 16.1.7
   @angular/cli                  : 16.1.7
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.2.2
   @capacitor/android : 5.2.2
   @capacitor/core    : 5.2.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v16.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.11.0
   OS     : Windows 10

I have the same issue. I’ve tried your workaround but couldn’t get it to work. :frowning:

Ionic:

   Ionic CLI                     : 7.1.1 (C:\Users\Dani\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.3.3
   @angular-devkit/build-angular : 16.2.1
   @angular-devkit/schematics    : 16.2.1
   @angular/cli                  : 16.2.1
   @ionic/angular-toolkit        : 10.0.0

Capacitor:

   Capacitor CLI      : 5.3.0
   @capacitor/android : 5.3.0
   @capacitor/core    : 5.3.0
   @capacitor/ios     : 5.3.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.8.1
   OS     : Windows 10