Debugging with Visual Studio Code

You can also debug your Angular application, Karma, and Protractor tests from directly within Visual Studio Code. First, you need to configure the debugger to work with a Chrome debugging environment, as illustrated:

VS Code Debugging Setup

1. Click on the Debug pane
2. Expand the No Configurations dropdown and click on Add Configuration...
3. In the Select Environment select box, select Chrome

This will create a default configuration in the .vscode/launch.json file. We will modify this file to add three separate configurations.

1. Replace the contents of launch.json with the following configuration:

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "npm start",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5000/#",
      "webRoot": "${workspaceRoot}",
      "runtimeArgs": [
        "--remote-debugging-port=9222"
        ],
      "sourceMaps": true
    },
    {
      "name": "npm test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}",
      "runtimeArgs": [
        "--remote-debugging-port=9222"
        ],
      "sourceMaps": true
    },
    {
      "name": "npm run e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }
  ]
}

1. Execute the relevant CLI command like npm start, npm test, or npm run e2e before you start the debugger
2. On the Debug page, in the Debug dropdown, select npm start and click on the green play icon
3. Observe that a Chrome instance has launched
4. Set a break point on a .ts file
5. Perform the action in the app to trigger the break point
6. If all goes well, Chrome will report that the code has been Paused in Visual Studio Code

At the time of publication, this method of debugging doesn't reliably work. I had to manually set a break point in Chrome Dev Tools | Sources tab, finding the same .ts file under the webpack://. folder, which correctly triggered the break point in VS Code. However, this renders the entire benefit of using VS Code to debug code useless. For more information, follow the Angular CLI section on VS Code Recipes on GitHub at https://github.com/Microsoft/vscode-recipes.