Ionic-app-scripts: Missing source on chrome when debugging on device

[pantonis]

Short description of the problem:

When I run ionic run android -device and open chrome://inspect I cannot see the src files and it is impossible to debug functions such as camera. I am blocked for a month and cannot proceed.

This is what I see.
I have the following snippet in the package.json

"config": { "ionic_bundler": "webpack", "ionic_source_map": "source-map" },

What behavior are you?

View .ts files and debug

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

[nalkon]

+1. Same here.

[danbucholtz]

This is presently the expected behavior. I'm not a huge of fan of it. For now, Use ionic run android -l. That should get the maps and a better development set-up.

Thanks,
Dan

[pantonis]

No man. This does not work as well. No source code even with the ionic run android -l

[m1aw]

Tried to downgrade to @ionic/app-scripts to 0.0.43. Yet the problem still persists.

[danbucholtz]

A quick fix would be to add the --dev option to theionic:build npm script, but that is not a great long term option as it doesn't do ahead-of-time compiling.

We are going to address this.

Thanks,
Dan

[pantonis]

Thanks @danbucholtz

I tried what you suggested but still no luck no ts files. I see more files though. Check the screenshot below

[meeximum]

+1

[nalkon]

Ionic Team, please fix it ASAP. It's absolutely impossible to work effectively when you can't debug on device. It takes hours to figure out things that usually takes minutes if you have a debugger. And there are features that you can troubleshoot on devices only, you can't use emulator or browser. It's showstopper for final release. Seriously.

[pantonis]

Any news on this one?

[julianlecalvez]

+1 !

[ekrapfl]

+1

[pantonis]

Guys. Regarding the problem.

ionic run android -l

does the job for now. The ts files are under the build folder. scroll down a lot or just use Ctrl + P and search for .ts. Here is a screenshot.

Hope this helps for now.

[pantonis]

:( If you want to debug a cordova plugin you can't if you include the -l flag. Getting an error cordova_not_available

[pantonis]

Thanks to @victorivens05 I managed to partially solve it

I removed the following

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map"    
  },

and as Dan suggested I included the --dev flag in the "ionic:build"

This is my packages.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build --dev",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "angular2-moment": "1.0.0-beta.rc.1"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.46",
    "typescript": "2.0.6"
  },  
  "description": "Ion1",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-camera",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

I run ionic run android
and I can debug

[danbucholtz]

This will be fixed in the coming days.

Thanks,
Dan

[danbucholtz]

Hi all,

This is resolved in 0.0.48 which was just published.

Please let me know if you have any issues.

Thanks,
Dan

[pantonis]

Actually it only works If I include the -l flag (ionic run android -l).
If I remove it (ionic run android) I don't see any source files. Dont know if the latter (ionic run android) is a bug.

For me the -l flag solves the problem!!!

[meeximum]

maybe there could be an update of the params you can use with run/build command?
--prod, --release, -l
I can't find a proper list in the docs?

[coreyroth]

I tried it last night on one of my apps and I can confirm that I can see .ts files again in chrome://inspect without using any special flags. Remove the android platform and re-add it (if you haven't already).

[pantonis]

@coreyroth No mate. I have tried what you suggested but it does not show ts files. In any case the -l seems to resolve the issue for now and it is the one that I actually use as I develop.

[mehrad-rafigh]

When I run ionic run android -l, the app gets stuck. When I run ionic run android --debug, the app works correctly, but there are no source-maps. Is there a guide on how to this?

"@ionic/app-scripts": "1.1.4"

[drewhawken]

@mehrad-rafigh when I run ionic run android --debug -l it seems to work without issues for me.

"@ionic/app-scripts": "1.1.4"

[zhzhch335]

I sloved it by Change My ShadowSocks Mode As PAC Mode instead of global mode.
I hope it could help you.
Check your browser's proxy.

[JuanCalderon]

The source code are the orange folders. Instead to use locahost, use the local IP. It works for me.

[BassamHabash]

Hi , I have the same issue in ionic 4, there is any update for that ?
@danbucholtz

[alexandruluca]

Same for me. Ionic 3 and 4. Any updates on this? For me it's safari though

[aghaaliabbas]

Guys i had the same issue, but if we make an ionic cordova run android --aot build instead of --prod then we get to debug the code on real device