Debugging in VS Code

Question

I've been following this post about using Debugger for Chrome in VSCode: How to debug Karma tests in Visual Studio Code?.

My launch.json is this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "trace": true,
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    }
  ]
}

And my Karma config has this:

logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeDebugging'],
singleRun: true,
restartOnFileChange: true,
customLaunchers: {
  ChromeDebugging: {
    base: 'Chrome',
    flags: ['--remote-debugging-port=4200']
  }
}

When I launch from the debug panel it goes directly to localhost:4200 but it's not hitting my breakpoints. Am I missing something obvious? Thanks for any helpful tips.

Joel · Accepted Answer · 2020-03-17T14:19:45.333

1

You need to attach and not launch your debugger in chrome.

Launch.json

Change this line from "request": "launch" to "request": "attach"

Checkout this great blog post for further details

edited Mar 17 '20 at 14:19

answered Mar 17 '20 at 14:13

Joel

5,732
4
37
65

Got it, thank you. But what if I want to debug not just my tests but everything else? – fumeng Mar 17 '20 at 14:20
1

@fumeng that's a different question. But you can check https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular. TLDR - You need to create a different debug-profile for that. – Joel Mar 17 '20 at 14:22

Debugging in VS Code

1 Answers1