This site uses cookies to analyse traffic, remember your preferences, and optimise your experience. Learn more, read the privacy policy page.


How to debug Angular tests in VSCode

How to debug Angular tests in VSCode

VSCode has the option of debugging code inside the editor. While in typical console programs running the debug is very easy, so on the Angular test environment which is Karma is not so easy, because here we have a browser as a test environment.

Fortunately, when looking for an answer, I discovered one source of microsoft vscode-recipes. And by reading the description vscode-chrome-debug I was able to create a launcher of my dreams.

  • Add the configuration to the file .vscode/launch.json
{
  "type": "chrome",
  "request": "launch",
  "name": "Debug karma tests",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceFolder}",
  "runtimeArgs": [
    "--headless"
  ],
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:/*": "${webRoot}/*",
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/*",
    "/*": "*",
    "/./~/*": "${webRoot}/node_modules/*"
  },
  "port": 9223
}

Now all you have to do is run ng test in the background. And when you need to check what is happening in a given test, all you have to do is insert a breakpoint on a given line or add debugger, press F5 and you have everything you need.

PS: By pressing CTRL + SHIFT + Y you open the debug console where we can execute the code in the current breakpoint.

Word count: 186

Want to know more and be immediately informed about new posts?

Let's stay in touch and leave your email:

Related posts: