sourcemap failing inside vscode but working inside chrome devtools

[dmail]

Depending where the sourcemap file is, vscode fails to locate the source while chrome dev tools has no problem to find it.

If you want to reproduce you can try with the first file structure where both vscode and chrome devtools are working.
Then compare with the second file structure that works only in chrome devtools.

File structure working in both

file.js

const value = true

debugger

console.log(value)

file.es5.js

var value = true;

debugger;

console.log(value);
//# sourceMappingURL=file.es5.js.map

file.es5.js.map

{
  "version": 3,
  "sources": [
    "./file.js"
  ],
  "names": [
    "value",
    "console",
    "log"
  ],
  "mappings": "AAAA,IAAMA,QAAQ,IAAd;;AAEA;;AAEAC,QAAQC,GAAR,CAAYF,KAAZ",
  "file": "file.js"
}

Vscode pauses in file.js

Chrome dev tools pauses in file.js

File structure failing in vscode

file.js

const value = true

debugger

console.log(value)

file.es5.js

var value = true;

debugger;

console.log(value);
//# sourceMappingURL=__asset__/file.es5.js.map

asset/file.es5.js.map

{
  "version": 3,
  "sources": [
    "../file.js"
  ],
  "names": [
    "value",
    "console",
    "log"
  ],
  "mappings": "AAAA,IAAMA,QAAQ,IAAd;;AAEA;;AAEAC,QAAQC,GAAR,CAAYF,KAAZ",
  "file": "file.js"
}

vscode pauses inside file.es5.js

chrome devtools pauses in file.js

Additional info

When I put "trace": true inside launch.json one log draws my attention:

SourceMap: no sourceRoot specified, using script dirname

I think it corresponds to the following line in getComputedSourceRoot

vscode-chrome-debug-core/src/sourceMaps/sourceMapUtils.ts

Line 53 in 87d2c19

logger.log(`SourceMap: no sourceRoot specified, using script dirname: ${absSourceRoot}`);

It looks like vscode fallbaks on the script dirname but should fallback on the sourcemap dirname. Otherwise when sourcemap file and script file are not in the same directory sourceroot is wrong.

vscode-chrome-debug-core/src/sourceMaps/sourceMapUtils.ts

Line 52 in 87d2c19

absSourceRoot = path.dirname(generatedPath);

[dmail]

I forgot to tell you how I execute the files:

For chrome I open the following html file.

<script src="./file.es5.js"></script>

For vscode I uses the following launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch with node",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "sourceMaps": true,
      "trace": true,
    },
  ]
}

[sangxxh]

@dmail is your sourceMappingURL correct?
You put //# sourceMappingURL=__asset__/file.es5.js.map but your source map file is in asset folder.

[dmail]

I think it was a mistake when I wrote my comment, I forgot to put __asset__ and wrote asset instead.
But I remember testing it with actual files and chrome was ok so I assume I had no such mistake in the actual files I used to reproduce.

Have you tried to reproduce? I will try on my side when feeling more energy to do so.

[dmail]

It looks like vscode fallbaks on the script dirname but should fallback on the sourcemap dirname.

Any thought regarding this suggestion ?

[sangxxh]

I think it was a mistake when I wrote my comment, I forgot to put __asset__ and wrote asset instead.
But I remember testing it with actual files and chrome was ok so I assume I had no such mistake in the actual files I used to reproduce.

Have you tried to reproduce? I will try on my side when feeling more energy to do so.

I thought I had the same issue in my project so I created a simple web app with webpack but I couldn't replicate the problem - the debugger works fine when I put the source map in a different folder from the js file.

Not sure why it doesn't work for the other app I have though.

[sangxxh]

I thought I had the same issue in my project so I created a simple web app with webpack but I couldn't replicate the problem - the debugger works fine when I put the source map in a different folder from the js file.

Not sure why it doesn't work for the other app I have though.

Turns out I had some wrong webpack config for sourcemap path in my project, resulting in wrong sourceMappingURL.

From my side, VSCode debugger has no problem when we put source map in a different folder from the JS file.

[dmail]

I see thanks, I try to repro today and let you know if I can still reproduce

[dmail]

Still reproductible. VsCode still fails to find the sourcemap file while chrome devtools are fine.

(I have updated my first comment with the correct filenames in case someone wants to reproduce).

[sangxxh]

How did you generate the source map files?

In my case it's "sources":["webpack:///./src/index.js"], it's different format from yours:

  "sources": [
    "../file.js"
  ],

[dmail]

I have generated them programatically using babel.

Webpack seems to use a special scheme (webpack://) that vscode seems to understand and resolve differently than relative path