Source maps are not available in a real Android device using Chrome DevTools #822

xmellado · 2017-03-17T13:42:38Z

Short description of the problem:

I cannot debug TypeScript sources on a real Android device using "ionic_source_map_type": "source-map" in my packages.json file. Only using "ionic_source_map_type": "#inline-source-map" Chrome DevTools finds source maps, but this type of source map is not supported by Ionic Team as explained here in issue #740 and --prod fails when used to build the release version.

What behavior are you expecting?

Either Chrome DevTools showing source maps in a real Android device using "ionic_source_map_type": "source-map", or support "ionic_source_map_type": "#inline-source-map" in production.

Steps to reproduce:

Create an empty project with ionic start --v2 myApp tabs.
Set "ionic_source_map_type": "source-map" as source map type in package.config. See below.
Build with ionic run android.
Use Chrome DevTools to access the WebView in the mobile device. Source maps are not available.

My package.config:

{
  "name": "JustToday",
  "author": "Incubapps",
  "homepage": "http://www.justtoday.com",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "@ngx-translate/core": "6.0.0",
    "@ngx-translate/http-loader": "0.0.3",
    "@types/cordova": "0.0.34",
    "@types/cordova-plugin-device": "0.0.3",
    "@types/cordova-plugin-file": "0.0.3",
    "@types/cordova-plugin-file-transfer": "0.0.3",
    "@types/cordova-plugin-inappbrowser": "0.0.4",
    "@types/cordova-plugin-splashscreen": "0.0.3",
    "@types/cordova-plugin-statusbar": "0.0.3",
    "@types/cordova-sqlite-storage": "^1.5.1",
    "@types/cordova.plugins.diagnostic": "^3.4.0",
    "@types/phonegap-plugin-push": "0.0.31",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.8.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.1.6"
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "source-map"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-inappbrowser",
    "cordova-sqlite-storage",
    "cordova-plugin-file",
    "cordova-plugin-compat",
    {
      "variables": {
        "SENDER_ID": "XXXX"
      },
      "locator": "https://github.com/phonegap/phonegap-plugin-push",
      "id": "phonegap-plugin-push"
    },
    "cordova-plugin-x-toast",
    "cordova-plugin-file-transfer",
    "cordova-plugin-zip",
    "cordova.plugins.diagnostic",
    "cordova-plugin-geolocation",
    {
      "variables": {
        "BRANCH_KEY": "key_live_XXXX",
        "URI_SCHEME": "XXXX"
      },
      "locator": "https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking",
      "id": "branch-cordova-sdk"
    },
    "cordova-plugin-screen-orientation"
  ],
  "cordovaPlatforms": [
    "android",
    "browser",
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ]
}

Which @ionic/app-scripts version are you using?

ionic-app-scripts 1.1.4

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

When using "ionic_source_map_type": "#inline-source-map" in packages.json, I can debug TypeScript in DevTools, but using --prod makes the compilation fail:

xavi@Xaviers-iMac:/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic$ ionic run android --prod

> JustToday@ ionic:build /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic
> ionic-app-scripts build "--prod"

[14:18:54]  ionic-app-scripts 1.1.4 
[14:18:54]  build prod started ... 
[14:18:54]  clean started ... 
[14:18:54]  clean finished in 4 ms 
[14:18:54]  copy started ... 
[14:18:54]  ngc started ... 
[14:19:09]  ngc finished in 15.29 s 
[14:19:09]  preprocess started ... 
[14:19:09]  optimization started ... 
[14:19:14]  copy finished in 19.97 s 
[14:19:18]  optimization finished in 9.11 s 
[14:19:18]  preprocess finished in 9.11 s 
[14:19:18]  webpack started ... 
[14:19:46]  webpack finished in 27.43 s 
[14:19:46]  sass started ... 
[14:19:46]  transpile bundle started ... 
[14:20:01]  transpile bundle finished in 15.49 s 
[14:20:01]  uglifyjs started ... 
[14:20:02]  sass finished in 16.28 s 
[14:20:02]  cleancss started ... 
[14:20:03]  cleancss finished in 1.29 s 
[14:20:15]  uglifyjs failed: ENOENT: no such file or directory, open 
            '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map' 
[14:20:15]  ionic-app-script task: "build" 
[14:20:15]  Error: ENOENT: no such file or directory, open 
            '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map' 
Error: ENOENT: no such file or directory, open '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at Object.exports.minify (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/uglify-js/tools/node.js:120:31)
    at runUglifyInternal (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:47:19)
    at /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:31:32
    at uglifyjsWorker (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:22:12)
    at process.<anonymous> (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/worker-process.js:8:9)
    at emitTwo (events.js:106:13)
    at process.emit (events.js:191:7)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! JustToday@ ionic:build: `ionic-app-scripts build "--prod"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the JustToday@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the JustToday package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs JustToday
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls JustToday
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/npm-debug.log

The text was updated successfully, but these errors were encountered:

alexbonhomme · 2017-03-18T12:10:18Z

Hey,

I get the exact same problem :-(
This seems to be a workaround : #407 (comment)

But it isn't a definitive solution for me... (because of my poor wireless network)

▶ ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.6.1
Xcode version: Xcode 8.2.1 Build version 8C1002

xmellado · 2017-03-20T09:58:33Z

Hi,
Thanks for the information, but ionic run android -l it is not an option for me. Live reload will not work with my app, because I have some features and plugins that do not support it.
Regards,
Xavi

danbucholtz · 2017-03-24T03:25:14Z

Source maps should be enabled by default. I cannot recreate what you're seeing.

Thanks,
Dan

xmellado · 2017-03-24T09:28:05Z

Hi,

@danbucholtz I have tested this in two different machines with two phones (Nexus 5 and Galaxy S6 Edge):

Steps to reproduce:

Install globally Ionic CLI 2.2.1.
Install globally Cordova 6.5.0.
Connect an Android device and run in command line: adb devices. The device id should be shown.
Create a new project for Ionic 2.3.0 with: ionic start --v2 myApp tabs.
Change dir and go inside the folder: cd myApp.
Add Android platform: ionic platform add android.
Build and run in an Android device: ionic run android.
Open Chrome, write chrome://inspect/#devices in navigation bar and inspect the Ionic WebView.
Source maps are not available.

Thanks in advance,
Xavi

prabhjotAppmobi · 2017-04-14T09:33:50Z

@xmellado - Is it fixed for you? I am seeing same issue!

Thanks

xmellado · 2017-04-14T13:59:30Z

@prabhjotAppmobi Sorry but no. The issue is still present and I have tried version 1.2.2 with the same results. I cannot debug TypeScript sources on a real Android device. I will test versions 1.3.x in a few days with Ionic 3, and I will update this issue if there are changes.

alexbonhomme · 2017-04-14T14:36:14Z

@prabhjotAppmobi @xmellado Still the same problem with 1.3.0 version.

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a

brenkehoe · 2017-04-16T12:16:08Z

I got same problem trying to debug on ios device using safari or safari tp.

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a

xmellado · 2017-04-17T10:53:36Z

@danbucholtz I can confirm that this issue persists with Ionic 3.0.1 and app scripts 1.3.3.

prabhjotAppmobi · 2017-04-17T12:05:26Z

@xmellado @BlckShrk - Thanks for the feedback. I added below entry to "package.json" and able to debug the typescript on android device.

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

The only problem is that I am not able to check variable values while debugging. Any clues for it?

My ionic-app-script version is 1.3.0

cocowalla · 2017-04-19T08:35:37Z

@danbucholtz

I have the same issue - no Typescript source maps when running on an emulator or a real device. I was on the latest Ionic 2 and hoped upgrading to Ionic 3 and the latest app-scripts would fix it. Unfortunately not.

Changing ionic_source_map_type to #inline-source-map also seems to fix this issue for me - but at the expense of breaking --prod builds :(

Ionic losing source map functionality every other release or so has been a constant bugbear since Ionic 2 started :(

It would be good to see this issue reopened and given some attention.

cmaart · 2017-04-27T10:13:03Z

+1

Can reproduce problem in app-scripts 1.3.4

ionic info

Your system information:

ordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed

cocowalla · 2017-05-03T11:24:17Z

Just to confirm that this is still an issue with the latest app-scripts, 1.3.6

danbucholtz · 2017-05-04T05:17:58Z

We're looking into it.

Thanks,
Dan

cocowalla · 2017-07-18T14:47:03Z

This is still an issue in 2.0.2. I sense that this is not a priority, but I'm unsure why that would be - having source maps when running in an emulator or on a device is absolutely invaluable.

padraigoleary · 2017-08-19T12:53:59Z

Can this issue be re-opened please?

shuppert · 2017-10-02T19:16:03Z

When will this be resolved? This is a big deal for debugging.

ramzauchenna · 2017-10-05T12:41:24Z

This issue is a serious problem. Can it be reopened please. I am using app-script 3.0.0 and same issue

domisginger · 2017-10-18T13:04:54Z

Okay so I've got my workaround to build with source maps for dev and without for prod.
I'm using @ionic/app-scripts 3.0.0 but it should work with minor tweaks for older versions.
Now app-scripts webpack has seperate configurations for dev and prod you can override the devtool for prod and use --generateSourceMap=false while keeping inline-source-map to allow source maps in dev builds.

In package.json

"config": {
	"ionic_source_map_type": "inline-source-map",
	"ionic_webpack": "./config/webpack.config.js"
},

Create ./config/webpack.config.js to edit the webpack devtool to ignore the ionic_source_map_type and default to source-map

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  useDefaultConfig.prod.devtool = 'source-map';
  return useDefaultConfig;
}

Development:

ionic cordova build android --debug --device

Production:

ionic cordova build android --release --prod --device --generateSourceMap=false

cocowalla · 2017-10-18T13:14:43Z

@domisginger I've been using a different workaround, with this in ./config/copy.config.js:

if (process.env.IONIC_ENV === 'prod') {
  process.env.IONIC_GENERATE_SOURCE_MAP = false;
  process.env.IONIC_SOURCE_MAP_TYPE = 'source-map';
}

along with this in my package.json:

"config": {
  "ionic_source_map_type": "#inline-source-map",
  "ionic_copy": "./config/copy.config.js"
}

This works, but 'misusing' copy.config always felt wrong - I'll give your workaround a try as it feels much less hacky!

A question though - your release build command uses generateSourceMap=false, but it doesn't actually seem to be required since your webpack.config.js always sets source maps to source-map for production builds?

domisginger · 2017-10-18T15:02:40Z

@cocowalla your right, I had it in as a future proof. 'source-map' doesn't currently generate source maps but I thought it was intended too and not working which was why 'inline-source-map' aren't actually supported. I could be wrong.

fdambrosio · 2017-10-26T18:51:10Z

I have the same problem

  @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0 ios 4.5.2
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v6.11.4
    npm               : 5.5.1
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

JeongJun-Lee · 2018-02-03T13:16:30Z

I have the same issue at app-scripts 3.1.6. Pls reopen this. It's very critical.

picolo74 · 2018-02-20T01:52:17Z

This is really critical, can't debug app on device/emulator !

Chrome inspect devices : 404 Not Found The resource could not be found.

cli packages: (/home/aurel/.nvm/versions/node/v7.7.1/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 6.1.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 5.1.1
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v7.7.1
npm  : 5.5.1
OS   : Linux 3.16

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

jfspencer · 2018-03-01T21:09:16Z

@danbucholtz is this issue actually being looked at? it is still closed. This is a huge non-starter.

ThalesMatoso · 2018-03-22T20:44:55Z

=( i need solution ..

phiamo · 2018-04-11T10:55:23Z

same issue here :(

kirillgroshkov · 2018-05-22T07:45:43Z

Same

varunkumarm · 2018-06-18T12:29:15Z

@danbucholtz Appreciate any feedback on this issue. Please reopen the issue at the least since it is clearly a problem for many including me.

caramorsimon · 2018-10-25T15:17:40Z

This remains a problem with ionic4, only now it doesn't use webpack, it has moved onto angular cli builders which are configured (somehow) in ./angular.json

tva-TIS · 2020-03-11T14:05:36Z

As mentioned here I got it device typescript debugging to work with capacitor live reloading.

danbucholtz closed this as completed Mar 24, 2017

xmellado mentioned this issue Apr 18, 2017

TypeScript source files cannot be debugged on a real mobile device in Android ionic-team/ionic-gulp-tasks#22

Closed

danbucholtz self-assigned this Apr 28, 2017

jfspencer unassigned danbucholtz Mar 1, 2018

AlphaJuliettOmega mentioned this issue Nov 6, 2020

bug: source maps are not loaded when debugging with chrome dev tools on device ionic-team/ionic-framework#16455

Closed

jahorton mentioned this issue Jan 17, 2024

chore(web): worker sourcemap cleanup, mobile app webview sourcemap compat keymanapp/keyman#10413

Merged

Source maps are not available in a real Android device using Chrome DevTools #822

Source maps are not available in a real Android device using Chrome DevTools #822

Comments

xmellado commented Mar 17, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Short description of the problem:

What behavior are you expecting?

alexbonhomme commented Mar 18, 2017

Uh oh!

xmellado commented Mar 20, 2017

Uh oh!

danbucholtz commented Mar 24, 2017

Uh oh!

xmellado commented Mar 24, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prabhjotAppmobi commented Apr 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xmellado commented Apr 14, 2017

Uh oh!

alexbonhomme commented Apr 14, 2017

Uh oh!

brenkehoe commented Apr 16, 2017

Uh oh!

xmellado commented Apr 17, 2017

Uh oh!

prabhjotAppmobi commented Apr 17, 2017

Uh oh!

cocowalla commented Apr 19, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cmaart commented Apr 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cocowalla commented May 3, 2017

Uh oh!

danbucholtz commented May 4, 2017

Uh oh!

cocowalla commented Jul 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

padraigoleary commented Aug 19, 2017

Uh oh!

shuppert commented Oct 2, 2017

Uh oh!

ramzauchenna commented Oct 5, 2017

Uh oh!

domisginger commented Oct 18, 2017

Uh oh!

cocowalla commented Oct 18, 2017

Uh oh!

domisginger commented Oct 18, 2017

Uh oh!

fdambrosio commented Oct 26, 2017

Uh oh!

JeongJun-Lee commented Feb 3, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

picolo74 commented Feb 20, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jfspencer commented Mar 1, 2018

Uh oh!

ThalesMatoso commented Mar 22, 2018

Uh oh!

phiamo commented Apr 11, 2018

Uh oh!

kirillgroshkov commented May 22, 2018

Uh oh!

varunkumarm commented Jun 18, 2018

Uh oh!

caramorsimon commented Oct 25, 2018

Uh oh!

tva-TIS commented Mar 11, 2020

Uh oh!

xmellado commented Mar 17, 2017 •

edited

Loading

xmellado commented Mar 24, 2017 •

edited

Loading

prabhjotAppmobi commented Apr 14, 2017 •

edited

Loading

cocowalla commented Apr 19, 2017 •

edited

Loading

cmaart commented Apr 27, 2017 •

edited

Loading

cocowalla commented Jul 18, 2017 •

edited

Loading

JeongJun-Lee commented Feb 3, 2018 •

edited

Loading

picolo74 commented Feb 20, 2018 •

edited

Loading