Debug is not supported on android device

[ryaa]

Short description of the problem:

Application running on the android device can't be debugged

What behavior are you expecting?

Debugging supported/working

Steps to reproduce:

1. Created new project from https://github.com/driftyco/ionic-starter-super
2. run ionic run android
3. use chrome://inspect to debug

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

[moldstadt]

I had an issue where I couldn't inspect either. Just got a blank white screen. I deleted my android platform folder and did: ionic platform add [email protected]. Solved the problem for me.

…

On Thu, 29 Dec 2016, 13:42 Alex Ryltsov ***@***.***> wrote: Short description of the problem: Application running on the android device can't be debugged What behavior are you expecting? Debugging supported/working *Steps to reproduce:* 1. Created new project from https://github.com/driftyco/ionic-starter-super 2. run ionic run android 3. use chrome://inspect to debug *Which @ionic/app-scripts version are you using?* 0.0.47 and 0.0.48 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#610>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVoOP8ct8kdK9UMm_dTsEPFZe7QrzJk4ks5rM5yZgaJpZM4LXhvd> .

[waybackrider]

on chrome://inspect my app occasionally is not shown. solution is to start adb (eg. "adb devices"), which starts a new daemon. If your device is listed your app should show up in chrome://inspect

[ryaa]

I don't think that the problem is related to cordova because the app starts and shows fine on the device. chrome://inspect also works fine, meaning that i see the app and can open dev tools however there is no typescript sources etc - see attached

What is strange is that everything works fine in the desktop browser and when i build for ios using xcode. For the latter i see the sources and can debug. I also tried to add crosswalk with no luck. Could the problem be related to Chrome itself not displaying sources? Or may be ionic run androiddoes not work correctly and not adding source maps to the built?

[ryaa]

I managed to find out what was causing the problem and how to solve it. 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

[dbeylkhanov]

@ryaa

"sourceMap": false

this is cause an error during compilation in my case

see log:

ionic-app-script task: "build"
The "tsconfig.json" file must have compilerOptions.sourceMap set to true.

[ryaa]

does this work if you leave "sourceMap": true?
what ionic-app-script version are you using?
does this problem occur with https://github.com/driftyco/ionic-starter-super?

[dbeylkhanov]

does this work if you leave "sourceMap": true?

yes

what ionic-app-script version are you using?

1.0

@ryaa could you attach your project example for debugging on android device?

[dbeylkhanov]

@jgw96 do you know about this issue with debugging on android device?

see prev comments

#610 (comment)
#610 (comment)

[ryaa]

@ryaa could you attach your project example for debugging on android device?

Unfortunately I can't share the current project sources I'm working on. However you should be able to follow the steps in my initial post and then make the changes that I described.

[dbeylkhanov]

@ryaa

your changes, like
"sourceMap": true,
to
"sourceMap": false

are not working ! anyways it's causing compilation error

[ryaa]

not sure how this setting can cause compilation error.. can you share your code?

[dbeylkhanov]

@ryaa

package.json

`

{
"name": "test_app",
"private": true,
"version": "1.0.11",
"description": "test_app",
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"build": "ionic-app-scripts build",
"clean": "ionic-app-scripts clean"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"angular2-signaturepad": "^2.2.0",
"ionic-angular": "2.0.0-rc.5",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"
},
"cordovaPlatforms": [
"ios",
"android"
],
"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"repository": {
"type": "git",
"url": "......."
}
}

`

tsconfig.json

`

{ "compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}

`

[dbeylkhanov]

@ryaa
and what you say now?

[ryaa]

@beylkhanovdamir Your config files that you posted look ok but this is not enough to determine what is wrong on your side. Can you share the entire project?

About "sourceMap": true
As indicated in my initial post, the solution to enable source maps on android was for ionic app scripts v0.0.48. You mentioned that you have version 1.0.0 and there was a change there to force this parameter to be true - see https://github.com/driftyco/ionic-app-scripts/releases/tag/v1.0.0 (check to ensure tsconfig contains sourcemaps true)
Therefore, my solution works fine on pre-1.0.0 ionic app scripts

[padraigoleary]

I have same issue @ryaa. Thank you.