How to debug .ts files when running Ionic4/Capacitor on Android emulator

Question

I am running my sample Ionic4/Capacitor app from Android studio using the emulator.

I want to be able to debug the typescript source, but when I open in chrome://inspect as I would normally, I just cannot see the ts files anywhere, just js.

I did find this post , but using the second suggestion, ie

To see the true original ts file while debugging on Android I patched angular cli source code (i have @angular/cli version 7.0.0) to use inline-source-maps webpack option. To do so I changed one line in node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js file sourcemaps = 'eval'; to sourcemaps = 'inline-source-map';

still didn't work for me. Also would be better if we did not have to edit a file in node_modules?

At any rate, I need to run in emulator due to relying on SQLite a lot, but still need to debug the main app (ts files).

Answer 1

please use the solution described here , then you will be able to build the project with source maps.

Using "Chrome remote debugging" you can see and debug type script files as .js files, the content will be the same.

this solution is working for me for ionic4/capacitor started with android studio AVM emulator.