TypeScript source files cannot be debugged on a real mobile device in Android about ionic-gulp-tasks HOT 26 CLOSED

For me the problem was that when you're remote debugging on an android device, Chrome debugger cannot access the source map file on the device. The solution/fix is to include the source map inline. To do this I:

1. added the below to package.json in the root project directory

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

This is to make the webpack to add source maps inline
2) changed tsconfig.js line
"sourceMap": true,
to
"sourceMap": false
This is to disable typescript to create source map file since this is done by webpack.
After this change everything seems to be working fine. Note that this fix is valid for Ionic 2 RC_04

from ionic-gulp-tasks.

Just add below code in ionic 3 package.json file.

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

It's working 100% .

from ionic-gulp-tasks.

I still see this issue on appscript ver 2.0.2. Is there a solution to this or can this issue be reopened please? This is my setup.
ionic/cli-utils : 1.5.0
Cordova CLI : 7.0.1
Ionic CLI : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.5.2

System:

Node       : v6.11.0
OS         : Windows 7
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 4.4.1 

from ionic-gulp-tasks.

Any update on this issue?
I got bumped this problem today, and spent half a day to figure it out.
On 4.4.2 SDK (LG G3), it worked well and I could see all of the sources written in Typescript, but on 5.0 (LG G4), source map doesn't work. To make it work, I installed gulp-sourcemaps manually and tried so many options like source Root, googled everything. But no luck on Android 5.0(LG G4). I can try more devices from Samsung and so on. I guess it might be caused by somewhere in Chrome dev tool.

from ionic-gulp-tasks.

Hi,
Although the solution posted by ryaa works (only partially), it is not officially supported by the Ionic team. This problem is now part of the app scripts package. I opened some time ago a new issue #822 that has been closed, but it is still not solved. I would like to encourage anyone facing this problem with the newest versions to post messages and solutions in the app scripts issue #822.

from ionic-gulp-tasks.

i had issue wherein i cannot see the typescript files while debugging in device (ios) using safari or even while doing on browser (ionic:serve).

this happened after i updated the @ionic/app-scripts version from 1.3.0 to > 1.3.0 possibly 1.3.6.

i reverted it back to 1.3.0 and i can now see the ts files on debugging ios device through safari and also on browser (ionic:serve)

from ionic-gulp-tasks.

This has been fixed in recent releases. Please bump the version of the gulp-browserify task to 2.0.0 and npm install again.

from ionic-gulp-tasks.

Hi,
@mhartington I'm sorry to tell you, but I updated today all packages to the latest versions in my project and the problem still persists. Besides, I created a new start project from scratch with the same result, TypeScript files do not appear and they cannot be debugged.
Regards,
Xavi

from ionic-gulp-tasks.

Were you ever able to debug with source maps on android with chrome? It's my understanding that is not possible on android since dev tools cannot load source maps from file:// urls

https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/c54b6CxWhwU

from ionic-gulp-tasks.

Hi,
@mhartington With the following configuration:
· Ionic 2 beta 3
· Ionic CLI beta 19
· Building with Webpack, not the gulp-browserify task.
I and my co-worker were debugging TypeScript sources on Android without any problem using Chrome DevTools. When Webpack was replaced by Gulp + Browserify, this feature was lost. Debugging the transpiled code is really a pain for two main reasons:

1. Every time that a line is added or subtracted, your breakpoints are misplaced. Chrome DevTools remembers from one execution to another the last breakpoint positions, but (as expected) they are remembered using its former line number.
2. To place a breakpoint, it is needed to search for the location inside the JS bundle, which is really huge and it is really inefficient during long debugging sessions.
   I am not an expert in Ionic, but I am really sure that I was debugging my TypeScript source files directly with Webpack without Gulp.
   Regards,
   Xavi

from ionic-gulp-tasks.

Alright, I'll take a look and see what's up.
Thanks for giving some feedback on the setup, this should help a lot
Reopening.

from ionic-gulp-tasks.

As i said in the ionic-team/ionic-framework#7540 i have the same problem. #
Thanks @xmellado to cite the livereload's temporary solution which allows to remote debug the device.

ionic run android --livereload 

from ionic-gulp-tasks.

Weird, when i simply use "ionic run android", the source maps are visible when i deploy on an android 4.4 Android device but not on a 6.0 one.

from ionic-gulp-tasks.

This still appears broken with the new rc0 setup (I'm using the tabs starter with Crosswalk 2.1.0).

First of all, no form of sourceMaps are enabled by default in the starter tsconfig.json. If you set "sourceMap": true, there will be ultimately two layers of indirection in the source map file references: main.js.map will point to ../../node_modules/ files (which work), ans well as ../../.tmp/ intermediate .js files. The side-by-side intermediate .js.map files do point back to the original ../../src source files and you can see the sourceMappingURL=data:... comments in the Chrome debugger, but Chrome just ignores those references and only shows the intermediate .js file sources.

If you try to inline the sourcemaps instead via inlineSourceMap and inlineSources in tsconfig as an attempt to bypass any path issues, the inlined source does make it to the intermediate js files (and the same options are mirrored in the generated tsconfig.tmp.json file), but it doesn't make it through to the www/build output. There's still only a regular www/build/main.js.map file output without any inlined source :-(

from ionic-gulp-tasks.

I'm facing the same issue :-(

▶ ionic info

Your system information:

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.8.4
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.6.1
Xcode version: Xcode 8.1 Build version 8B62

from ionic-gulp-tasks.

Hey,

Maybe this could help :http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2016/11/02/ionic-2-debugging-on-android-with-visual-studio-code.aspx

I use the "build": "ionic-app-scripts build --dev", to get more informations about my errors waiting for the source map to work...

from ionic-gulp-tasks.

Hi,
@mhartington
The problem I described can be considered as solved or obsolete, because:

1. I recently reinstalled my machine from scratch, with this configuration:

My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: Mac OS X El Capitan
Node Version: v4.6.2
Xcode version: Xcode 8.2 Build version 8C38

packages:

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/http": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "es6-shim": "0.35.1",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "1.3.21",
    "ionicons": "3.0.0",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "ng2-translate": "2.2.2"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "tslint-ionic-rules": "0.0.4",
    "run-sequence": "1.1.5"
  },
  ...and more
}

and using Chrome 55.0.2883.95 the problem is gone, I can debug Typescript files.

2. The Ionic 2 RC build system is no longer using gulp.

Best,
Xavi

from ionic-gulp-tasks.

Those are old package. It might work with them, but it would be odd to go run older version just to get sourcemaps working. My ionic info output:

Your system information:

Cordova CLI: 6.4.0
Gulp version:  CLI version 1.2.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: Mac OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

I can't get sourcemaps to work.

from ionic-gulp-tasks.

For anyone following it indeed works on RC4, but not RC3. Thanks.

from ionic-gulp-tasks.

The solution of @ryaa works on RC5, but you have to keep the "sourceMap": true option.

from ionic-gulp-tasks.

@ryaa solution works on my environment :

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: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.8.0

from ionic-gulp-tasks.

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.

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.

from ionic-gulp-tasks.

Please update on this not abel to see ts file on real device facing lots.

Regards.

from ionic-gulp-tasks.

For me also debugging if not possible

from ionic-gulp-tasks.

Thanks Ryaa its worked for ionic 3 as well just don't change the source map let it be true only.

from ionic-gulp-tasks.

Just add below code in ionic 3 package.json file.

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

It's working 100% .
Thanks for the above!
only a few files are showing, files under app/pages are not appearing

from ionic-gulp-tasks.