Debugging an Ionic 2 app using Visual Studio Code

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach Ionic 2 App with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "url": "http://localhost:8100/"
        },
        {
            "name": "Launch Ionic 2 App with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100/",
            "webRoot": "${workspaceRoot}/www",
            "sourceMaps": true
        }
    ]
}

This is an example launch.json for VS Code when debugging Ionic 2/Angular 2 apps in Chrome. This also requires the Debugger for Chrome extension to be installed.

Make sure full sourcemaps are enabled in your app package.json:

..
  "config": {
    "ionic_source_map": "source-map" 
  },
..

Run your app normally with 'ionic serve', then launch the debugger by selecting the Debug icon and hit the Play button. and change the dropdown to 'Launch Ionic 2 App...', then hit play to start debugging.

You can also choose to attach to an existing instance of Chrome, to do so you must have launched chrome with debugging port enabled. On Windows this is achieved my modifying your chrome shortcut to include the debug flag: e.g. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

Thank you. I was checking exactly for this.