TypeScript source files cannot be debugged on a real mobile device in Android #22

xmellado · 2016-05-16T15:16:26Z

Hi,
I recently updated my Ionic 2 project written in TypeScript to the latest version (from beta 19 to beta 25), and I switched from webpack to browserify, too. While using webpack in beta 19, I was able to debug the project using either WebStorm and Chrome, or the Chrome Developer Tools inspecting the WebView in a real Android device. However, using browserify in beta 25, I cannot debug the project anymore on a real device. If the application is launched in Chrome or in an Android device with the live reload mode, the source folder containing my TypeScript source files appears in the Chrome Developer tools. But, if the application is launched in Android without live reload using ionic run android, the WebView inspected from the DevTools does not include/show the source folder, so there is no way of placing breakpoints in TypeScript files.

I posted this issue in the Ionic 2 forum without success. Is there a solution for this problem?

Thanks in advance,
Xavi

How to reproduce the problem:

Create a new Ionic 2 project with -v2 --ts (for example with the tabs template).
type:
$ ionic platform add android
$ ionic run android
Open Chrome and go to this location:
chrome://inspect/#devices
Your real device name attached to a USB port should appear at this page, click on inspect to debug the WebView.
The source folder is missing and TypeScript files cannot be debugged.

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

mhartington · 2016-07-12T19:47:06Z

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

xmellado · 2016-07-13T12:02:06Z

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

mhartington · 2016-07-13T14:32:17Z

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

xmellado · 2016-07-13T15:31:14Z

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:

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.
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

mhartington · 2016-07-13T15:32:56Z

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.

pom421 · 2016-08-04T13:01:14Z

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

pom421 · 2016-08-18T15:14:25Z

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.

congr · 2016-09-19T07:41:52Z

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.

rob3c · 2016-09-28T23:12:50Z

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 :-(

alexbonhomme · 2016-12-02T15:23:39Z

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

alexbonhomme · 2016-12-02T17:59:27Z

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...

xmellado · 2016-12-21T10:30:20Z

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

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.

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

Best,
Xavi

samastur · 2016-12-27T16:53:53Z

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.

ryaa · 2017-01-01T09:01:22Z

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:

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

samastur · 2017-01-03T10:52:22Z

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

alexbonhomme · 2017-01-25T11:49:52Z

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

Shehab-Muhammad · 2017-04-17T21:17:28Z

@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

xmellado · 2017-04-18T07:59:34Z

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.

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

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.

kpacaHS · 2017-04-27T19:49:36Z

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)

vthil3049 · 2017-07-25T19:09:38Z

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

chandelkushal5 · 2017-09-15T06:06:51Z

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

Regards.

Dak1411 · 2019-04-06T14:43:37Z

For me also debugging if not possible

yogeshpatil143 · 2019-05-03T07:06:32Z

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% .

Guru270591 · 2019-11-26T11:13:16Z

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

AlokGupta007 · 2020-05-14T12:33:23Z

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

mhartington closed this as completed Jul 12, 2016

mhartington reopened this Jul 13, 2016

jtushar53 mentioned this issue Aug 4, 2016

bug: Sourcemaps not working on "ionic run android" ionic-team/ionic-framework#7540

Closed

rob3c mentioned this issue Sep 28, 2016

sourcemaps not working with rc0 ionic-team/ionic-app-scripts#32

Closed

xmellado closed this as completed Dec 21, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript source files cannot be debugged on a real mobile device in Android #22

TypeScript source files cannot be debugged on a real mobile device in Android #22

xmellado commented May 16, 2016

mhartington commented Jul 12, 2016

xmellado commented Jul 13, 2016

mhartington commented Jul 13, 2016

xmellado commented Jul 13, 2016

mhartington commented Jul 13, 2016 •

edited

Loading

pom421 commented Aug 4, 2016 •

edited

Loading

pom421 commented Aug 18, 2016

congr commented Sep 19, 2016

rob3c commented Sep 28, 2016

alexbonhomme commented Dec 2, 2016 •

edited

Loading

alexbonhomme commented Dec 2, 2016

xmellado commented Dec 21, 2016 •

edited

Loading

samastur commented Dec 27, 2016

ryaa commented Jan 1, 2017

samastur commented Jan 3, 2017

alexbonhomme commented Jan 25, 2017

Shehab-Muhammad commented Apr 17, 2017

xmellado commented Apr 18, 2017 •

edited

Loading

cocowalla commented Apr 19, 2017

kpacaHS commented Apr 27, 2017

vthil3049 commented Jul 25, 2017 •

edited

Loading

chandelkushal5 commented Sep 15, 2017

Dak1411 commented Apr 6, 2019

yogeshpatil143 commented May 3, 2019

Guru270591 commented Nov 26, 2019

AlokGupta007 commented May 14, 2020

TypeScript source files cannot be debugged on a real mobile device in Android #22

TypeScript source files cannot be debugged on a real mobile device in Android #22

Comments

xmellado commented May 16, 2016

mhartington commented Jul 12, 2016

xmellado commented Jul 13, 2016

mhartington commented Jul 13, 2016

xmellado commented Jul 13, 2016

mhartington commented Jul 13, 2016 • edited Loading

pom421 commented Aug 4, 2016 • edited Loading

pom421 commented Aug 18, 2016

congr commented Sep 19, 2016

rob3c commented Sep 28, 2016

alexbonhomme commented Dec 2, 2016 • edited Loading

alexbonhomme commented Dec 2, 2016

xmellado commented Dec 21, 2016 • edited Loading

samastur commented Dec 27, 2016

ryaa commented Jan 1, 2017

samastur commented Jan 3, 2017

alexbonhomme commented Jan 25, 2017

Shehab-Muhammad commented Apr 17, 2017

xmellado commented Apr 18, 2017 • edited Loading

cocowalla commented Apr 19, 2017

kpacaHS commented Apr 27, 2017

vthil3049 commented Jul 25, 2017 • edited Loading

chandelkushal5 commented Sep 15, 2017

Dak1411 commented Apr 6, 2019

yogeshpatil143 commented May 3, 2019

Guru270591 commented Nov 26, 2019

AlokGupta007 commented May 14, 2020

mhartington commented Jul 13, 2016 •

edited

Loading

pom421 commented Aug 4, 2016 •

edited

Loading

alexbonhomme commented Dec 2, 2016 •

edited

Loading

xmellado commented Dec 21, 2016 •

edited

Loading

xmellado commented Apr 18, 2017 •

edited

Loading

vthil3049 commented Jul 25, 2017 •

edited

Loading