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

typescript breakpoints vscode
vscode debug typescript webpack
visual studio code debug react typescript
vscode debug typescript test
vscode debug angular typescript
vscode debug typescript ts-node
debug protractor typescript tests with vscode
breakpoint typescript

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?

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'; }
      }))

Cannot debug TypeScript file if source map is in a different directory , It's currently not possible to debug a TypeScript file when the source map is to debug TypeScript files even when the corresponding source maps are stored in a differ. GitHub is home to over 50 million developers working together to gulp script because VS Code only uses the resulting source map ;-). The Visual Studio TypeScript tools generate a sourcemap that is optimal in Visual Studio, because it not only allows you to debug from Visual Studio with Internet Explorer, but the file that opens when a breakpoint is hit is the actual .ts file, and not a "purple" (dynamic) tab.

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:

  1. sourceRoot should be an absolute path.
  2. 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.

Debugging Node.js projects with TypeScript and VS Code, Most, if not all, of this post, applies to sourcemaps in general. One option is for the sourcemap to live in it's own file beside the generated file. This is the ultimate fallback that VSCode uses… you can still debug, but it's Within the Gulp task, I first create a TypeScript project by loading the tsconfig.json :  The quick fix I found was to click the breakpoint (which was grey) and then click again the breakpoint (which becomes red again) then it breaks. But it was rather annoying to do that in every file. It's back to normal after changing "webRoot": "${workspaceRoot}" into "webRoot": "${workspaceFolder}" for the Chrome debugger launch that is

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);
  },
}))

Microsoft/vscode, Since node2 uses a different approach to sourcemaps, it does not have the -​breakpoint-not-working-in-typescript-with-sourcemap-generated-by-gulp-sou  "outDir" is not necessary when using Gulp since you are working with a stream. Intermediate results (i.e. results of Typescript) are not written to disk at all. "sourceMap": true is not necessary together with Gulp sourcemaps. I have created a project which compiled for me, with babel@6.1.18 and typescript@1.6.2. Directory structure

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);
  },
}))

Cannot set breakpoints to typescript using VS Code debugger , Cannot set breakpoints to typescript using VS Code debugger - node.js. require('gulp-nodemon'); const sourcemaps = require('gulp-sourcemaps'); const Breakpoint ignored because generated code not found (source map problem?) I'm working on a Typescript project that is transpiled to ES5 JS and then run through browserify to create a single .js bundle and sourcemap. The bundled sourcemaps point to the transpiled JS rather than the source TS even though I am generating sourcemaps which properly point to the source TS when transpiling to JS.

Can't set Breakpoints debugging Node Typescript in VS Code , In order to debug typescript you need to generate sourcemap files. gulp-​typescript suggests that gulp-sourcemaps should be used to generate source maps. This is the gulp task I got working creating .js.map files that breaks on breakpoints. vscode Also here: Visual Studio Code - Node debugger breakpoints not being  To generate source maps for your TypeScript files, compile with the --sourcemap option or set the sourceMap property in the tsconfig.json file to true. In-lined source maps (a source map where the content is stored as a data URL instead of a separate file) are also supported, although in-lined source is not yet supported.

Debug Node.js Apps using Visual Studio Code, You'll find instruction for debugging with source maps, stepping over external you can even attach to a node or gulp process that was not started in debug mode. This is the corresponding launch configuration for a TypeScript program: "Breakpoint ignored because generated code not found (source map problem​?)" . Using gulp-sourcemaps is the standard way to use source maps in gulp, not using it would be a bad idea. The advantage of gulp-sourcemaps is that you can easily add other plugins that support source maps, like uglify or concat. 👍

How to debug a Node.js server written in TypeScript running in Docker, Besides VS Code, TypeScript, Node.js and Docker, we'll use Gulp and we also need to rewrite the source maps because the TypeScript files aren't ignored because generated code not found (source map problem?) 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 differ

Comments
  • What is the .js call after pipe(ts(tsProject))?
  • see npmjs.com/package/gulp-typescript#source-maps , .js is called after `pipe(ts(tsProject))
  • I'm having the same issue as OP (also works fine with TSC generated sourcemaps), unfortunately this does not solve it.
  • 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.
  • Could you post the relevant bits of your gulpfile.js and your project layout ? Thanks !
  • 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. Thanks.