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



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:

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


  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:


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.


I have found perfect article It seems to me it must be helped.


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?


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