Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Debugging an Ionic 2 app using Visual Studio Code
{
"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
}
]
}
@webprofusion-chrisc

This comment has been minimized.

Copy link
Owner Author

commented Aug 25, 2016

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

@davutg

This comment has been minimized.

Copy link

commented May 13, 2018

Thank you. I was checking exactly for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.