Can't set Breakpoints debugging Node Typescript in VS Code

Question

I see other questions with the same issue but I've tried all the other solutions and nothing is working on my end.

I have a typescript Node app that I'm trying to debug in VSCode.

My launch.json is

 "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 5858,
      "sourceMaps": true,
      "outFiles": ["${workspaceRoot}/build/**/*.js"]
    }
  ]

This attaches fine to my app. I can pause and resume, all working correctly, but I cannot step into code or set a breakpoint.

I'm running my app via gulp nodemon

nodemon({
    script: 'build/server.js',
    watch: 'src',
    ext: 'ts',
    tasks: ['clean', 'compile'],
    exec: 'node --debug'
});

The console pipes out

Debugger listening on [::]:5858

Now when I try to set a breakpoint it says

Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?).

Updates;

I have also tried using the webRoot item as suggested by other posts around, Typing validation complains that Property webRoot is not allowed., I tried proceeding anyway to no avail.

I'm running Node v6.11.5 and VS Code v1.23.0

I've seen in a posts people calling to run the .scripts tag for more info the help resolve but when I do by typing .scripts in the Debug Console it says invalid expression: unexpected token .

My tsconfig.json is

"compilerOptions": {
    "outDir": "build",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "typeRoots": ["node_modules/@types"]
  },

However; there are no .js.map files present in my build folder. I am running build via gulp-typescript as follows

gulp.task('compile', () => {
    tsProject = ts.createProject('tsconfig.json');
    let tsResult = tsProject.src().pipe(ts());

    return merge([
        tsResult.dts.pipe(gulp.dest('build/definitions')),
        tsResult.js.pipe(gulp.dest('build'))
    ]);
});

Per suggestion, I also added the following gulp task

gulp.task('jsMaps', function() {
    gulp.src('build/**/*.js')
      .pipe(sourcemaps.init())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build'));
  });

And confirmed my build .js files have the source maps written inline, looks like //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc..........., but I'm still getting the same error when trying to set a breakpoint.

Answer 1

In order to debug typescript you need to generate sourcemap files. Make sure the following is in your tsconfig.json, you should see .js.map files generated in your build directory.

{
  "compilerOptions": {
    "sourceMap": true
  }
}

---

With gulp-typescript:

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. Found in this gulp-typescript issue

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var path = require('path');
var ts = require('gulp-typescript');

gulp.task('compile', () => {
    tsProject = ts.createProject('tsconfig.json');
    let tsResult = tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject());

    tsResult.js
        .pipe(sourcemaps.write({
          sourceRoot: function (file) {
            var sourceFile = path.join(file.cwd, file.sourceMap.file);
            return path.relative(path.dirname(sourceFile), file.cwd);
          }
        }))
        .pipe(gulp.dest('build'));
});