Visual studio code debugger serving file from inline content from source map

How are you building and serving your code? This message usually means that VS Code can't find your source files where the source maps are telling it to look.

Based on the configuration you provide, I would suggest checking the value of webRoot. It should be the directory where your built files actually are. So, if your code compiles to a build folder, say, then your webRoot should be "${workspaceFolder}/build".

For example, if I have a workspace that looks like this:

src/
  test.ts
build/
  index.html
  test.js
  test.js.map

Then the following launch.json configuration works for me:

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

I've also been wrestling with this, and got it working thanks to this Github issue:

https://github.com/angular/angular-cli/issues/2453

Actually my situation didn't concern an Angular app but a Vue.js app launched through Laravel Mix, which I tried to debug using VSCode.

My launch.json which finally worked:

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "sourceMaps": true, "webRoot": "${workspaceFolder}/resources/assets/js", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } } ] }