Debugging Jasmine Tests with Karma and Visual Studio Code

1. The Visual Studio Code Debugger only works with specific combinations of the Debugger for Chrome, Visual Studio Code, Angular CLI and Angular.  Make sure you are using the latest version of all libraries, extensions and tools or you will get the dreaded Breakpoint ignored because generated code not found.  For example, Angular 4.0 with the 1.0 version of Angular CLI does not work but Angular 4.1.3 with Angular CLI 1.0.6 works fine.
2. Install the Visual Studio Code Extension, Chrome Debugger by clicking on the extensions icon on the left in Visual Code, searching for Chrome and clicking Install.
3. On the Debug menu, click Open Configurations.

4. Modify your .vscode\launch.json to be this:

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:4200",

"webRoot": "${workspaceRoot}"

},

{

"type":"chrome",

"request": "launch",

"name": "Launch Chrome against Karma",

"url": "http://localhost:9876/?id=9792346",

"webRoot": "${workspaceRoot}"

}

]

}

5.  CLOSE ALL Chrome Browsers

6.  Run npm start at the command line in the directory for your application.

7. Run karma start at another command window in the directory for your application
8. Click the Debug icon on the left
9. Set a breakpoint

10. Choose Launch Chrome against Karma.  After the browser comes up, refresh it.