bug: source maps are not loaded when debugging with chrome dev tools on device

[KevinKelchen]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/kelchen/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v10.13.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
TypeScript source maps are not present when debugging on an Android device/emulator.

Steps to Reproduce
Steps to reproduce the behavior:

1. Start a new project with ionic start sourcemaps blank --type=angular.
2. Path into the project directory and run ionic cordova prepare android. Say Y to the prompt to install the Android platform.
3. Run ionic cordova prepare android again. It will download/install the Cordova plugins that are part of the template.
4. Run ionic cordova run android. This will build the app and deploy it to an Android emulator. You could also choose to deploy to a device by connecting a device configured for debugging and passing the --device flag to this command.
5. After you get the app deployed and running on the emulator, in a Google Chrome tab go to chrome://inspect/#devices and inspect the Ionic app.
6. In the Chrome DevTools under Sources use Cmd + P to search for the source file home.page.ts. It will not be found.

Related Code
If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior
I expected the TypeScript source files to be present and debuggable with breakpoints in the Chrome DevTools.

Additional Context
This is the same issue as #15152 which has since been closed and locked. While the OP of that issue decided to use Ionic DevApp as a workaround, our application uses a number of additional and different Cordova plugins that make using DevApp unsuitable. I would expect the browser dev tools to work like they have previously in Ionic 3 and like they currently do with iOS.

[sarahmmcb]

I have this problem too. I am only able to debug by putting in console.log statements. Please fix this!

[paulstelzer]

@manucorporat it here any way to add source maps to Android, too? I can confirm this issue

[pjc2007]

Same problem. This occurs with either of Capacitor or Cordova wrapper.

Tried adding sourcemaps = 'inline-source-map'; to
C:\dev\ionic\sqlite-test\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js as suggested here, but did not help.

Debugging the TypeScript when running on an emulator (or device) is still very essential when the app replies on plugin(s)

[pjc2007]

Actually, I did get it working by following the above, but I needed to add the 'inline-source-map into the else block, ie line 28 in browser.js. I then noticed the source maps where now in the js files, and I could then find the TypeScript files under webpack://_/src within the chrome dev tools.

Would still be a lot better if we did not have to edit the Angular build file, as this we could forget and lose this if node_modules refreshed.

[paulstelzer]

Thanks for your investigation! Can you maybe open a feature request at https://github.com/ionic-team/ionic-cli/issues and link this issue here?

[ryaa]

Tried adding sourcemaps = 'inline-source-map'; to
C:\dev\ionic\sqlite-test\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js as suggested here, but did not help.

Are you sure that you run the build with --eval-source-map param (as suggested in my original post)? What is @angular/cli version? 7.0.0?

[ryaa]

Would still be a lot better if we did not have to edit the Angular build file, as this we could forget and lose this if node_modules refreshed.

There are some options to enable this without editing angular sources - see angular/angular-cli#13543 (comment)
I think i will try to use custom tools to extend the Angular CLI build behaviour, for example using https://github.com/manfredsteyer/ngx-build-plus to see how it goes

[ryaa]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices

• install ngx-build-plus by running npx ng add ngx-build-plus
  This will install the required npm package and update angular.json as required
  For more details please see https://github.com/manfredsteyer/ngx-build-plus
• create new file build-customization-plugin.js in the project root directory and add the below content in this file

var merge = require('webpack-merge');

exports.default = {
    config: function (cfg) {
        const strategy = merge.strategy({
            'devtool': 'replace',
        });

        return strategy(cfg, {
            devtool: 'inline-source-map'
        });
    }
}

• run ng build --eval-source-map --plugin ~build-customization-plugin.js from the root directory to build the project with source maps to debug on Android devices

This is a better approach then changing angular/cli source :)

[alexcarrasco93]

I have the same issue. @IonicProSupport I need to debug android devices and for now I am not able, I hope you find a fix soon

[ryaa]

I have the same issue. @IonicProSupport I need to debug android devices and for now I am not able, I hope you find a fix soon

Yes. It is described above and works fine for me.

[alexcarrasco93]

@ryaa I tried your solution but didn't work for me.

Option "evalSourceMap" is deprecated.
Unknown option: '--plugin'
Unknown option: '~build-customization-plugin.js'

I hope the @IonicProSupport team find an official solution

[senioroman4uk]

Any updates on this? It is very annoying

[ElianCordoba]

I've done a script to work around this while we wait for the fix, just execute it with node:

const fs = require('fs');
const path = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

let file = fs.readFileSync(path, { encoding: 'utf8' });
file = file.replace('source-map', 'inline-source-map');
fs.writeFileSync(path, file, 'utf8');

[amb-jarek]

@ElianCordoba which version of @angular-devkit/build-angular you are using? It doesn't work for me with v0.13.7. 'source-map' doesn't exists anymore in browser.js :(

[ElianCordoba]

@amb-jarek I'm using v0.13.6

[iget-master]

Same issue here when using ionic cordova run --device android --livereload --ssl

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/home/esoares/.npm-global/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/esoares/Android/Sdk)
   NodeJS            : v8.16.0 (/usr/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.15

[konghao8013]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices

• install ngx-build-plus by running npx ng add ngx-build-plus
  This will install the required npm package and update angular.json as required
  For more details please see https://github.com/manfredsteyer/ngx-build-plus
• create new file build-customization-plugin.js in the project root directory and add the below content in this file

var merge = require('webpack-merge');

exports.default = {
    config: function (cfg) {
        const strategy = merge.strategy({
            'devtool': 'replace',
        });

        return strategy(cfg, {
            devtool: 'inline-source-map'
        });
    }
}

• run ng build --eval-source-map --plugin ~build-customization-plugin.js from the root directory to build the project with source maps to debug on Android devices

This is a better approach then changing angular/cli source :)

在angular.json 添加 evalSourceMap ,plugin 配置
在 projects->app>root>architect->build>options
下添加
"evalSourceMap":true,
"plugin":"~build-customization-plugin.js",

[maxpaj]

Having this too, just bumping the issue...

$ ionic info

Ionic:

   Ionic CLI                     : 5.0.3 (C:\Users\maxim\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 18 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.5

System:

   Android SDK Tools : 26.1.1 (C:/Users/maxim/AppData/Local/Android/Sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

Added to my package.json:

  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "#inline-source-map"
  },

Running ionic cordova run android --livereload --ssl --source-map, I can't see any source maps, can't access them on the server and they are not referenced in the JS files.

Running ionic cordova run android --source-map, I can see source maps created, they are copied to the phone and they are references in the JS files. But I still can't see any webpack:// folder in the Sources tab of Chrome Dev Tools.

[amb-jarek]

I've successfully got source maps on my device with following workaround:

add following to your ionic.config.json:

{
  [...],

  "hooks": {
    "build:after": "./attach-source-maps.js"
  }
}

Then create attach-source-maps.js in the root of your project with following content:

let fs = require('fs');
let path = require('path');

const TARGET_DIR = 'www';

module.exports = function (ctx) {
    console.log('=====================');
    console.log('attaching source maps');
    console.log('=====================');

    let files = fs.readdirSync(TARGET_DIR);

    files.forEach(file => {
        let mapFile = path.join(TARGET_DIR, file + '.map');
        let targetFile = path.join(TARGET_DIR, file);
        if (path.extname(file) === '.js' && fs.existsSync(mapFile)) {
            let bufMap = fs.readFileSync(mapFile).toString('base64');
            let bufFile = fs.readFileSync(targetFile, "utf8");
            let result = bufFile.replace('sourceMappingURL=' + file + '.map', 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + bufMap);
            fs.writeFileSync(targetFile, result);
        }
    });
};

At the end adjust script to your needs - eg disable it for prod build

[maxpaj]

@amb-jarek can you give some more information? What is your ionic info and what command line arguments do you use?

[amb-jarek]

@maxpaj

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/home/jarek/.nvm/versions/node/v8.9.4/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.4.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 26 other plugins)

System:

   NodeJS : v8.9.4 (/home/jarek/.nvm/versions/node/v8.9.4/bin/node)
   npm    : 5.6.0
   OS     : Linux 4.4

provided hook is working for me when I execute:

ionic cordova build android

or

ionic cordova run android --device

[y0nd0]

Angular CLI will never allow devtools options for inline-source-maps. Search the Angular CLI issues. I cannot understand this decision. Anyway... The problem with the DevTools in Chromium (device inspect) is that the url of source maps refer to "localhost". The localhost of the device. But the DevTools does not know the url of the device. So it is trying to fetch from the localhost of the computer. So, what can we do?

1. Finding a way to set the correct url of the device. Maybe a setting in Cordova? I don't know. But I think, even if the url contains the ip address of the device, it will not work. Because it's a local app. You cannot access app files through your network. Only if the app provides it using a server. Ideas are welcome. But I think that this possible solution will not work.

2. Tell Angular CLI to use inline-source-maps. But the Angular CLI developer team decided against this option. So you have to use 3rd party libs to get access to the webpack.config.js. Or reject the Angular CLI and use Webpack and build by your own scripts. That is probably very time-consuming and painful.

3. Use a node script to add the map-files as base64 string to the js-files. Build your own inline-source-map assignment. This "hack" has limitations. But it might generally work with apk bundles. I think this does not work with live reload.

Conclusion: Sadly the Angular CLI team will not provide a inline source map option. See issue Life would be a lot easier with this option. ... That is disappointing.

[tva-TIS]

@y0nd0

1. Finding a way to set the correct url of the device. Maybe a setting in Cordova? I don't know. But I think, even if the url contains the ip address of the device, it will not work. Because it's a local app. You cannot access app files through your network. Only if the app provides it using a server. Ideas are welcome. But I think that this possible solution will not work.

Serving the files from the computer is exatly what is happening with livereload as i mentioned here. You need to set the url to use by using the host flag (which has deprecated the address flag I described orginally). While using this I realized, that this run sets a server.url Parameter within the capacitor.config.json. Maybe this can be used without live-reload too.

[AlphaJuliettOmega]

Is official Live Reload support planned? A full rebuild for every small change is the worst way to work.

I'm on Cordova + Angular 9 + Ionic stack, any kind of fast dev-work seems impossible.

ionic-team/ionic-app-scripts#822
ionic-team/ionic-app-scripts#1354

I hope this issue doesn't get closed without a fix like the previous threads.

[ryaa]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices

• install ngx-build-plus by running npx ng add ngx-build-plus
  This will install the required npm package and update angular.json as required
  For more details please see https://github.com/manfredsteyer/ngx-build-plus
• create new file build-customization-plugin.js in the project root directory and add the below content in this file

var merge = require('webpack-merge');

exports.default = {
    config: function (cfg) {
        const strategy = merge.strategy({
            'devtool': 'replace',
        });

        return strategy(cfg, {
            devtool: 'inline-source-map'
        });
    }
}

• run ng build --eval-source-map --plugin ~build-customization-plugin.js from the root directory to build the project with source maps to debug on Android devices

This is a better approach then changing angular/cli source :)

The above does not work for the latest angular cli (@angular-devkit/* with version 0.1000.0 and above)

To enable this workaround again please update build-customization-plugin.js file in the project root directory to make it look as below

const merge = require('webpack-merge');
const webpack = require("webpack");

exports.default = {
    config: function (cfg) {

        // first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
        const strategy = merge.strategy({
            'devtool': 'replace',
        });
        const result = strategy(cfg, {
            devtool: 'inline-source-map'
        });

        // then we find SourceMapDevToolPlugin and remove it
        // This is because we should never use both the devtool option and plugin together.
        // The devtool option adds the plugin internally so you would end up with the plugin applied twice.
        // See https://webpack.js.org/configuration/devtool/
        const index = result.plugins.findIndex((plugin) => {
            return plugin instanceof webpack.SourceMapDevToolPlugin;
        });
        result.plugins.splice(index, 1);

        return result;
    }
}

All the rest is the same

[Franco-Alejandro]

I'm on Ionic 6, with angular 13 and I can't debug my project on android.... because there are no source-maps

Funny thing is: I can debug on iOS because safari's inspect does have the source

[KevinKelchen]

I’m not sure if it’s changed recently, but using Capacitor with Live Reload will result in source maps working on Android (at least it does for us).

I know that doesn’t help if the app is using Cordova or there’s a desire to not use Live Reload though.

Hope that could help!

[timvahlbrock]

I’m not sure if it’s changed recently, but using Capacitor with Live Reload will result in source maps working on Android (at least it does for us).

I know that doesn’t help if the app is using Cordova or there’s a desire to not use Live Reload though.

Hope that could help!

Works for me too. Regarding the "not wanting live reload" aspect: When I was using live reload, Capacitor just set the App-URL in capacitor.config.json to the host IP I handed using the CLI flag. I'm not sure whether that's the only thing that happened, but I guess with a bit of effort one could connect the app to the remote dev server but disable the live reloading.

[LuisMCunha]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices

• install ngx-build-plus by running npx ng add ngx-build-plus
  This will install the required npm package and update angular.json as required
  For more details please see https://github.com/manfredsteyer/ngx-build-plus
• create new file build-customization-plugin.js in the project root directory and add the below content in this file

var merge = require('webpack-merge');

exports.default = {
    config: function (cfg) {
        const strategy = merge.strategy({
            'devtool': 'replace',
        });

        return strategy(cfg, {
            devtool: 'inline-source-map'
        });
    }
}

• run ng build --eval-source-map --plugin ~build-customization-plugin.js from the root directory to build the project with source maps to debug on Android devices

This is a better approach then changing angular/cli source :)

The above does not work for the latest angular cli (@angular-devkit/* with version 0.1000.0 and above)

To enable this workaround again please update build-customization-plugin.js file in the project root directory to make it look as below

const merge = require('webpack-merge');
const webpack = require("webpack");

exports.default = {
    config: function (cfg) {

        // first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
        const strategy = merge.strategy({
            'devtool': 'replace',
        });
        const result = strategy(cfg, {
            devtool: 'inline-source-map'
        });

        // then we find SourceMapDevToolPlugin and remove it
        // This is because we should never use both the devtool option and plugin together.
        // The devtool option adds the plugin internally so you would end up with the plugin applied twice.
        // See https://webpack.js.org/configuration/devtool/
        const index = result.plugins.findIndex((plugin) => {
            return plugin instanceof webpack.SourceMapDevToolPlugin;
        });
        result.plugins.splice(index, 1);

        return result;
    }
}

All the rest is the same

No longer working on ionic 6 and Angular 13, is there any updated workaround for this?

[ryaa]

No longer working on ionic 6 and Angular 13, is there any updated workaround for this?

This one works #16455 (comment)

[LuisMCunha]

No longer working on ionic 6 and Angular 13, is there any updated workaround for this?

This one works #16455 (comment)

Indeed, it works, for some reason if I run the commands individually:

ng run app:ionic-cordova-build --platform=android
node attach-source-maps.js
cordova build android --device
native-run android --app platforms/android/app/build/outputs/apk/debug/app-debug.apk --device

doesn't work, but if I add:

"hooks": { "build:after": "attach-source-maps.js" }
to ionic.config.json it does, strange.

Thanks.

[philkonick]

I've successfully got source maps on my device with following workaround:

add following to your ionic.config.json:

{
  [...],

  "hooks": {
    "build:after": "./attach-source-maps.js"
  }
}

Then create attach-source-maps.js in the root of your project with following content:

let fs = require('fs');
let path = require('path');

const TARGET_DIR = 'www';

module.exports = function (ctx) {
    console.log('=====================');
    console.log('attaching source maps');
    console.log('=====================');

    let files = fs.readdirSync(TARGET_DIR);

    files.forEach(file => {
        let mapFile = path.join(TARGET_DIR, file + '.map');
        let targetFile = path.join(TARGET_DIR, file);
        if (path.extname(file) === '.js' && fs.existsSync(mapFile)) {
            let bufMap = fs.readFileSync(mapFile).toString('base64');
            let bufFile = fs.readFileSync(targetFile, "utf8");
            let result = bufFile.replace('sourceMappingURL=' + file + '.map', 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + bufMap);
            fs.writeFileSync(targetFile, result);
        }
    });
};

At the end adjust script to your needs - eg disable it for prod build

How can I disable this for prod builds? I've been struggling trying to import the environment .ts file into this attach-source-maps.js file, and I can also only use a .js file in the hook.

I've also tried the live-reload option but can't get that to work either, we test mostly on emulators and physical devices connected via a cable - does this methods require a device connected via Wi-Fi?

It's not a huge problem but just a bit annoying to have to enable and disable the hook manually for prod vs dev builds all the time.

Ionic 6 / Angular 13 / Capacitor 3

[timvahlbrock]

I've also tried the live-reload option but can't get that to work either, we test mostly on emulators and physical devices connected via a cable - does this methods require a device connected via Wi-Fi?

The livereload option definitely worked over cable too. However, the host and the device need to be on the same network and able to reach each other.

[ryaa]

@philkonick

How can I disable this for prod builds?

I think that you can:

1. run the build without using ionic cli/hooks but using angular cli with angular.json to be configured not to include source maps into the production build (should be there by default). Ionic cli uses angular cli under the hood, so you may just want to use it directly.

For example, here is the excerpt for scripts section in my package.json

...
    "build:prod": "ng run app:build:production -nc --output-hashing=none",
    "build:apk": "cd android && ./gradlew clean && ./gradlew assembleRelease",
    "prebuild:prod": "rm -rf sourcemaps",
    "postbuild:prod": "mkdir sourcemaps; mv www/*.map sourcemaps",
    "upload:sourcemaps": "node ./scripts/upload_sourcemaps_to_Rollbar.js",
    "release:android": "npm run build:prod && npx cap sync android && npm run build:apk"
...

You will run the dev build as you do now but for the production build issue npm run release:android

OR

2. remove the hook from ionic.config.json and run the production build as you do now but for the development build add the extra step to attach sourcemaps, as below

"build:dev:android": "ionic build && node ./scripts/attach-source-maps-for-npm.js && cap copy",

[distante]

manually attaching the source code is a pain in nx monorepos :/

[dtarnawsky]

In Capacitor 4.1.0 there is now an option that allows debugging the Android Web View in Chrome/Edge. You run:
npx cap sync --inline

The argument --inline makes sure the source maps are inlined and you can use chrome://inspect/ or edge://inspect/ to debug into your Typescript code (under the webpack:// tree).

[liamdebeasi]

Hi everyone,

As @dtarnawsky mentioned in #16455 (comment), Capacitor 4.1.0 added a new option to inline all source maps when syncing. This makes it possible to get the latest source maps when debugging in a Chromium-based browser. As a result, I am going to close this issue.

See Damian's comment above for more information.

[itziksha]

Hi everyone,

As @dtarnawsky mentioned in #16455 (comment), Capacitor 4.1.0 added a new option to inline all source maps when syncing. This makes it possible to get the latest source maps when debugging in a Chromium-based browser. As a result, I am going to close this issue.

See Damian's comment above for more information.

@liamdebeasi liamdebeasi
Thanks for the update!
Is it possible to add the 'inline' option also to 'copy' command, for example: "npx cap copy --inline"?
I guess that copy command is being used much more often than sync (at least I use it much more for fast sync of the web folder)
Since 'inline' related to source maps, I think it's usable to have it in this command.
Thanks :)

[liamdebeasi]

Hi there,

I do not work on the Capacitor project, so I am unable to assist with this feature request. I recommend opening a feature request on the Capacitor repo.

[kensodemann]

@itziksha : thank-you for bringing that up. I 100% agree with you and started discussing that with the Capacitor team this morning. They have asked me to open an internal Jira ticket for them to track. If you do create a feature request as @liamdebeasi suggested, please let me know and I will attach it to the internal Jira ticket.

[itziksha]

@itziksha : thank-you for bringing that up. I 100% agree with you and started discussing that with the Capacitor team this morning. They have asked me to open an internal Jira ticket for them to track. If you do create a feature request as @liamdebeasi suggested, please let me know and I will attach it to the internal Jira ticket.

@kensodemann @liamdebeasi

I opened a feature request here - ionic-team/capacitor#5900

Thanks.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.