VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps

Question

I have a typescript file users.ts in a sub-directory routes.

The gulp code in gulpfile.js:

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

The sourcemap generated by gulp-sourcemaps does not work with VSCode :

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

The sourcemap generated by tsc works fine in VSCode:

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

and the VSCode breakpoint works fine with the sourcemap generated by tsc.

So how to config gulp-typescript/gulp-sourcemaps to generate the same sourcemap as tsc?

see https://www.npmjs.com/package/gulp-typescript#source-maps , `.js` is called after `pipe(ts(tsProject)) — Smartkid, Dec 11 '15 at 08:40

score 8 · Accepted Answer · edited May 23 '17 at 12:13

8

It is the same problem as in Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
Add sourceRoot function to sourcemaps.write(...)
Assuming your .ts files are in src folder of the project, sourcemaps pipe will look like:

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))

edited May 23 '17 at 12:13

Community

1
1

answered Jan 25 '16 at 05:23

v-andrew

21,939
6
36
41

I'm having the same issue as OP (also works fine with TSC generated sourcemaps), unfortunately this does not solve it. – pyrho Jan 29 '16 at 19:07
Confirmed this works. @pyrho Make sure that the '/src' part maps to root of your project relative to the root of your project. You might need to use other values such as '' or '/src/server', etc. – Shaun Rowan Feb 01 '16 at 01:14
Could you post the relevant bits of your gulpfile.js and your project layout ? Thanks ! – pyrho Feb 01 '16 at 10:13
Ok, I think I've found the issue. Using sourceRoot works fine. But for some reason gulp-typescript lowercases the filenames which somehow break VSCode's file mapping, see [this gulp-typescript issue](https://github.com/ivogabe/gulp-typescript/issues/255). Thanks. – pyrho Feb 01 '16 at 12:31

score 1 · Answer 2 · answered Oct 31 '18 at 16:19

The accepted answer is correct, however it took me some time to realize why this worked & how to adjust the answer for my particular environment (in my case I needed to drop the /src suffix).

If you inspect the generated source maps (this only works when outputting to map files, e.g. sourcemaps.write('.')) you should see two fields in the json object: sources and sourceRoot, there are two things you need to be sure of:

sourceRoot should be an absolute path.
Each path in sources should combine with sourceRoot to form the absolute path to your source file.

If #1 isn't true the path will work in some cases and not in others (some tools resolve relative paths relative to source map file, others based on your workspace root, cwd, or some other path).

If #2 isn't true your tools will be looking in the wrong place for the source files.

One other hint: Remember that changing your gulpfile doesn't trigger a rerun of watch mode or clear any file caches, since your source file didn't change.

score 0 · Answer 3 · answered Sep 02 '16 at 00:27

Sourcemap paths will be correct on the machine where you build them with v-andrew's method. However, if you want to compile the sourcemaps once to work on multiple machines, use relative filepaths:

var path = require('path');

...

.pipe(sourcemaps.write('.', {
  includeContent: false,
  sourceRoot: function(file) {
    var fullPath = path.join(file.cwd, file.path);
    return path.relative(fullPath, file.base);
  },
}))

score 0 · Answer 4 · answered Nov 10 '17 at 09:57

I'm using gulp-sourcemaps 2.6.1 on Windows, and @Westy92's solution doesn't work (anymore?), because file.path returns the absolute file path (including file name):

var path = require('path');

...

.pipe(sourcemaps.write({
  includeContent: false,
  sourceRoot: function(file) {
    return path.relative(path.dirname(file.path), file.base);
  },
}))

VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps

4 Answers4