Debug Tests in NG Test

Question

I am using Angular CLI and VSCode but none of my breakpoints in my spec files seem to be getting hit when I run ng test?

Do I need to do some config?

Answer 1

This is what worked for me with:

• Angular 9.0.6 + Visual Studio Code 1.43.2
• Angular 8.2.13 + Visual Studio Code 1.39.2
• Angular 7, Angular CLI 1.0.* and Chrome on Windows 7.

---

Change configuration files

In your project root directory open karma.conf.js. Right after singleRun: false add , followed by this section:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

Add configuration to .vscode/launch.json.

• For versions 8.* - 9.* (note "pathMapping section!):

  {
    "type": "chrome",
    "request": "attach",
    "name": "Unit tests",
    "address": "localhost",
    "port": 9333,
    "sourceMaps": true,
    "webRoot": "${workspaceFolder}",
    "pathMapping": {
      "/_karma_webpack_": "${workspaceFolder}"
    }
  },
  

• For version 7.*:

  {
    "type": "chrome",
    "request": "attach",
    "name": "Unit tests",
    "address": "localhost",
    "port": 9333,
    "sourceMaps": true,
    "webRoot": "${workspaceFolder}"
  },
  

---

Start debugging

1. Run ng test --browsers ChromeDebug

2. Wait for Chrome browser to start. You will see something like this in command line:

   01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency
   

3. Set the breakpoint in one of your .spec.ts files.

4. In Visual Studio Code choose Unit tests debug configuration and hit F5 ("Start Debugging" button).

5. Press Shift+Ctrl+F5 or refresh the Chrome window to rerun the tests and hit the breakpoint.

---

For convenience

You can also modify your package.json and add a new script:

"test-debug": "ng test --browsers ChromeDebug",

Then next time you want to start ng test with debugging just run:

npm run test-debug

---

References:

• Debugging Jasmine Unit tests running with Karma runner in VS Code
• Debugging Karma tests with VSCode
• Angular CLI 8.1.3 Debug Unit Tests configuration - Unverified breakpoint
• microsoft/vscode-recipes - Chrome Debugging with Angular CLI