Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relative source map file paths not found with vscode debugger #675

Closed
marvinhagemeister opened this issue Jan 14, 2021 · 1 comment · Fixed by #1028
Closed

Relative source map file paths not found with vscode debugger #675

marvinhagemeister opened this issue Jan 14, 2021 · 1 comment · Fixed by #1028

Comments

@marvinhagemeister
Copy link

I'm currently debugging why breakpoints in vscode are not found with our testing setup over at Preact. For that each test file is a fully self-contained bundle and our test runner serves those files relative to the server's process root:

# Folder structure
/my-project
  /src
    source.js
  /tests
    test1.js   # imports src/source.js
    /sub
      test2.js # imports src/source.js

How the files are served by the test runner:

/base/test1.js
/base/sub/test2.js

Now onto the source map resolution. The spec has this to say about resolution:

If the sources are not absolute URLs after prepending of the “sourceRoot”, the sources are resolved relative to the SourceMap (like resolving script src in a html document).

The source maps generated by esbuild look like this for me:

{
  "version": 3,
  "sources": ["src/source.js", "..."],
  "mappings": "...",
  "sourcesContent": [...]
} 

They don't have a sourceRoot property and therefore the source maps are resolved relative to the js file.

/base/test1.js -> /base/tests/test1.js
                  /base/src/source.js
/base/sub/test2.js -> /base/sub/tests/sub/test2.js
                      /base/sub/src/source.js

This leads to duplicate path segments as above. Here is a screenshot of what it looks like in Chrome's Devtools in Preact's suite:

Screenshot 2021-01-14 at 17 08 47

In the screenshot compat/test/browser is repeated twice. So when a user creates a breakpoint in vscode the requested paths don't match and therefore the breakpoint is not found.

The way webpack handles this is by using a custom protocol webpack:// to force the resolution logic to always be absolute. The vscode debugger plugin has some built-in mappings that map this to the projects working directory.

I don't think using something like esbuild:// would be a good fit, but some form of absolute resolution is needed for a consistent experience. Maybe this can be done via sourceRoot by setting it to a value which can be easily mapped by debuggers.

@evanw
Copy link
Owner

evanw commented Jan 18, 2021

Can you try manually adding the appropriate sourceRoot value to the source map yourself and confirming that this fixes the issue for you locally? It would be good to know if that is a valid fix for this issue or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants