Search code examples
angulardevtoolsionic-nativecapacitor

How to configure Ionic 5.24 / Capacitor 2.0.1 / Angular 9.1.2 project to access typescript sources when inspecting AVD with chrome-tools?


I can't find a way to configure a Ionic (5.24) project to access the typescript sources when debugging on an Android Virtual Device using chrome DevTools.

Capacitor version: 2.0.1 Angular version: 9.1.2

I run

  • ionic cap run android -l
  • edit android/app/src/main/assets/capacitor.config.json to replace loclahost with 10.0.2.2 (any help on project configuration to avoid reseting this value all the time appreciated too)
  • "inspect" the app from chrome://inspect/#devices

but there is no webpack entry in sources and I can only see js sources.

I tried quite a few of solutions for earlier version of ionic, which didn't work. I also tried to set projects.app.architect.build.options.aot to false but this changes nothing neither :/


Solution

  • When running on Android device (either virtual or physical) I have to use both external and source-map flags:

    ionic cap run android --external --source-map -l

    Hacking android/app/src/main/assets/capacitor.config.json was somehow breaking source retrieval from Chrome DevTools. Binding the dev-server to a network interface accessible to the testing device is necessary (and 10.0.2.2 is not an option as it is known by the AVD only, not the dev machine on which the dev-server and inspecting browser run).