Debug Android app


#1

Is there a way to debug an Android App created with Capacitor?

With ionic 3 and Cordova Visual Studio Code did the trick :slight_smile:

Now with Ionic 4 although I can use “chrome://inspect/#devices” in Google Chrome to debug, I only see the Javascript that was transpiled from my Typescript and I don’t know how to set breakpoints in the Typescript code because the Typescript code does not appear in Chrome…

Thanks in advance


#2

The problem is that when you’re remote debugging on an android device, Chrome debugger cannot access the source map file on the device. This is a known limitation.

The solution/fix is to include the source map inline. Prior to ionic 4 this was possible by setting the appropriate config to make the webpack to add the source maps inline.

However, since ionic cli v4 uses angular cli for building this option is not available since angular cli does not support this.
There are two options here (in addition to configuring capacitor to load the sources from the external url as mentioned above):

  1. make the build with --eval-source-map param
    To do so i change scripts in package.json to have the below
    “build”: “ng build --eval-source-map”

and then run npm run build . However this still has one limitation. The angular cli will build the source maps using eval param (see https://webpack.js.org/configuration/devtool/) which might not be what you are looking for. For more details please see angular/angular-cli#12434

  1. 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’;

After that running npm run build did the trick.