Unable to run Ionic 3 HelloWorld App on Android Device using VS Code

Ionic Framework ionic-v3
21

Is there a way to use IntelliJ IDEA and debug apps (step through executing code) while they execute on an android device?

I originally got spoiled using Visual Studio Community. Their integrated editor/debugger let me step through Ionic 1 code as it executed on Android. To me, it was amazing! Then I found others were recommending VS Code which has a smaller footprint, is faster, and with more cordova/Ionic features.Now I can’t go back to VS Community. However, I can’t find any articles on how to make VS Code debug an Ionic 3 app executing on an Android device.

I’m trying to keep an open mind and I’m willing to try just about anything that will make me more productive. I can settle for a work-around to an integrated debugger/editor but stepping through code while it executes on an Android device is a must.

22

Here’s the relevant documentation. Haven’t used it personally, because Chrome works just fine for me.

23

The answering person it the Ionic CLI guy that I pointed to that issue :wink:

24

Same problem, integration is not Ionic CLI v3 ready :frowning:

@mlibby, what about just keeping to use Ionic CLI v2.2.3 for now, with the old commands? Then your VSCode stuff should work.

1 Like
25

VS Code extension vscode-chrome-debug works with ionic 3 apps. I was able to step through Ionic 3 code via VS Code’s IDE. Its amazing but I was only able to get it to work with Chrome running on my local host. I have not been able to get it to work on an Android device. Here’s my steps for Chrome on the localhost:

  1. Add below line to package.json
    "config": { “ionic_source_map”: “source-map” },
  2. Add “Debugger for Chrome” extension, i.e. vscode-chrome-debug
  3. Add the below to your launch.json configurations:
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch in Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8100",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/www"
    }
  ]
}
  1. Select “Launch in Chrome” from the debugger and then Press F5 to debug.

Worked perfectly for me. See article and GitHUB for more help.

Does anyone know how to configure vscode-chrome-debug to debug on an Android Device???

26

Does this only debug a running ionic serve session or does this actually build somehow in the background?

27

The only thing I could find regarding your question was an excerpt from below post located here.

To get it working, I had to add the --dev switch to ionic:build script in package.json, as suggested in this GitHub issue:

"ionic:build": "ionic-app-scripts build --dev"

Not sure if this is what your looking for. Let me know if you want me to try running it on my device a different way to test.

28

Ok, I’ve resorted to using the Chrome debugger for my Android device. Steps:

  1. Place the word “debugger” in code for breakpoints
  2. Enter command: “ionic cordova run android –device”
  3. Open Chrome, enter address: “chrome://inspect/#devices”
  4. Select the device running android and trigger whatever fires the breakpoint

This allow me to step through my code but it is not an IDE solution unless I’m missing something.

Questions:

  1. Is it possible to use mapping in Chrome’s debugger so that I can step through my .ts files instead of main.js?
  2. As Ionic 3 is now final, will documentation be updated to show which IDE’s are supported with Ionic 3? Ionic documentation says that VS Code is supported but from what I can tell its not really supported. This would have saved me a lot of time and productivity.
  3. Will there be a chart that lists IDEs by feature? For example, I want a version of Ionic that is supported by an IDE with IntelliSence, error detection, Cordova Tools extensions, Git… If I’d known current IDE’s didn’t support Ionic 3 I would have chosen Ionic 2. I needed to be better educated in making my choice. Again this would have saved me time and productivity.
29

Ok, so you are doing it “manually” now, correct?

There is no difference in Ionic support for different versions - the problem is that some of the IDE tools obviously don’t support the current version of Ionic CLI - which is different software… so it is a bit more complicated - as always.

Only if someone decides to start one, I think.

But I started a thread to collect IDEs supporting Ionic (and Ionic CLI) in whatever version, so there is a first rough overview: IDEs integrating Ionic?

30

By manually, yes if that means I’m doing it through Chrome’s browser. Thank you for all of your help and patience. I’ll be following your IDE’s thread.

Thank you again!

31

Success! Someone wrote a Pull request based on this issue and it got merged: https://github.com/Microsoft/vscode-cordova/pull/280 So now we only have to wait for the next release and it should work with CLI v3 :slight_smile:

32

Nice! Your awesome!!!:slight_smile:

Thanks for the followup!

33

ionic build android
ionic build android --release (it it generated unsigned apk file)