Debugging Ionic 2 in Visual Studio Code - Not Hitting Breakpoints in Source Files

Ionic Framework ionic-v3
1

Hello

Starting Ionic 2 development, and love it so far! Mobile hybrid app dev has come a long way since I last had a look 2 years ago. Anyhow, I have a small problem with trying to get the debugger breakpoints working:

Problem:
Breakpoints are only being hit in www\build\js\app.bundle.js

Reproduce

  1. I start the emulator, run the app on the emulator (this works perfectly)
  2. Set some breakpoints in app folder files e.g. app/pages/list/list.js
  3. In VS Code>Debug Pane, I choose Attach to running Android on Emulator. Debugger runs and connects.

Actual Result
3. The breakpoints are not hit. They only get hit if I set them in the www\build\js\app.bundle.js

Note on Sourcemaps

In MyIonic2Project\.vscode\launch.json, the settings for the Attach to Running on Emulator configuration are:
“sourceMaps”: true,
“cwd”: “${workspaceRoot}”,
“ionicLiveReload”: false

My Setup

It’s an Ionic 2 project, created using:
ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial

This works perfect with cli commands: on Chrome with ionic serve, emulator using ionic emulate android, and on the device as well (HTC One M8), so all is good up to this point :grin:

I have installed latest Visual Studio Code, and included the Cordova tools: ext install cordova-tools

Posted this question on StackOverflow also:

1 Like
2

Did you find a solution for for this?
I am facing the same issue but on ios (works on Android on Windows) where the breakpoints are not hit when debugging typescript source files from VSCode.

3

I have found perfect article http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html It seems to me it must be helped.

1 Like
4

Hey. That’s great, thanks for putting in the link. It seems to be a problem that people find, and then ignore as ‘feature not available yet’. I think debugging in the original files is very important - coming from an environment where that was the norm!

Did you try the example yourself?

5

Yep, it works very well. One important thing is chrome must be execute as stand alone with visual studio code launcher.