Cannot debug TypeScript file if source map is in a different directory

[SetTrend]

It's currently not possible to debug a TypeScript file when the source map is stored in a different directory.

However, I feel it should be possible to debug TypeScript files even when the corresponding source maps are stored in a different directory.

• VSCode Version: 0.10.11
• OS Version: Windows 10/64

Steps to Reproduce:

https://github.com/SetTrend/VSC-Debugger

[isidorn]

@SetTrend Very cool repro septs. however I do not see the launch.json as part of that repository? Have you tried setting the 'outDir' in your launch.json to point to your output folder

[weinand]

@SetTrend yes, please set 'sourceMaps' to true and 'outDir' to '${workspaceRoot)/output' and let me know if that works. If not I will reopen this issue.

[SetTrend]

@isidorn : Oops... I accidentally excluded the .vscode folder. Added it now to the repository.

@weinand : Nope, the suggested solution didn't help:

[weinand]

@SetTrend thanks for making the project available.

There a two problems with your setup:

1. outDir expects the folder where the generated code lives. For your project this is ${workspaceRoot}\\output\\js.
2. the source map rev 3 spec says: '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)'.
   In your source map the concatenated path is ../.././src/typescript/X/Test.ts which is identical to ../../src/typescript/X/Test.ts. Resolving this relative to the source map location VSC-Debugger/output/maps/js/X/results in VSC-Debugger/output/maps/js/X/../../src/typescript/X/Test.ts which can be simplified to VSC-Debugger/output/maps/src/typescript/X/Test.ts. This location does not exist.
   The correct sourceRoot for your project is ../../../../src/typescript/. With this setting breakpoints work fine.

There is still a bug in the source-map npm module that VS Code uses which prevents that paths with single dot segments /./ are handled correctly. For that reason I've reopened this issue.

BTW, you can use forward slashes in your launch.json. They are portable and do not need escaping...

BTW you can enable source map logging by adding a "trace": "sm" to the launch config.

[SetTrend]

Thanks, @weinand , for your very informative answer!

With your information I was now able to update the source map paths assignment. I uploaded an update to GitHub to reflect the changes I made.

However, the TypeScript source is still not used by the debugger:

Is that the bug you have spotted? Or is it due to #2544 ? Shouldn't we re-open #2544 anyway? It contains action items to solve an issue which haven't been implemented yet. The feature request therein is still valid.

[weinand]

@SetTrend I've pulled your changes and did a 'gulp tsc' on Windows 10 but the sourceRoot in the map file still lacks another '..'. After adding it, VS Code opens the TypeScript for me:

BTW, the trace output in your screenshot looks different then my Windows 10 screenshot:

Your 'src' paths on the right hand side start with 'file://' whereas mine do not. This might be another issue...

[SetTrend]

Strange... Perhaps it's because I have some spaces in the path (see this issue)?

Actually I found the three ".." in the path alright. Have you seen my code in the tsc task:

.pipe(pi.sourcemaps.write(path.relative(dest, mapsRoot)   // relative to gulp.dest() folder
                         , { includeContent: false
                           , sourceRoot: path.relative(mapsRoot, tsRoot)  // TypeScript source root, relative to maps root
                           }))

The path is getting calculated. The trace log gives the correct path to the TypeScript file. It just isn't used.

[weinand]

@SetTrend yes, the space in the path could be the reason why the 'src' pathes start with 'file://'. I will try to reproduce.

I'll try again to explain why 'sourceRoot' is wrong (no, I will not debug the code in the gulp script because VS Code only uses the resulting source map ;-)

Here is the concatenation based on the source map v3 spec:

src = <location of source map> + <sourceRoot> + <sources entry>
src = 'output/maps/js/X' + '../../../src/typescript' + 'X/Test.ts'
src = 'output/src/typescript/X/Test.ts'

The resulting path still has an 'output' segment.

And the trace log shows the erroneous 'output' segment as well.

Here is the result of the correct input:

src = 'output/maps/js/X' + '../../../../src/typescript' + 'X/Test.ts'
src = 'src/typescript/X/Test.ts'

[weinand]

@SetTrend no, spaces in paths do not result in pathes starting with 'file://':

[SetTrend]

There's one thing I don't understand: Why does the trace in my debug session give two different paths to the .ts source file:

[weinand]

@SetTrend the first lookup is using a more lenient lookup that I wrote which only works for files (not locations within a file). The second is using the standard source map npm module which I cannot configure to become 'lenient'.

[bluntcoder]

@weinand Trying to use your debugging tips but microsoft/vscode-react-native#391 (apologies I put it in the wrong project)

[SetTrend]

Just to drop a note here: I'm currently working in a full-time project working with legacy ASP.NET, so unfortunately I cannot follow my GitHub threads at this time.

If you can wait: The project I'm participating in is planned to be completed in April. I'll return to VC Code R&D then.

And I will then finally have time to solve a long-term issue in gulp-sourcemaps. When that issue is solved it might help solving this issue here. But I'm not sure though at this time.

[a8775]

+1

[weinand]

This should work now. Please reopen if you see it again.