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.

Clint · Accepted Answer · 2018-05-31T14:49:49.047

3

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

edited May 31 '18 at 14:49

answered May 08 '18 at 23:24

Clint

2,696
23
42

I added my tsconfig.json to the answer. It already had `"sourceMap": true` in there... but there are no `.js.map` files in my build directory, only `.js` files. Is there another setting somewhere, I added how I'm building it in gulp with gulp-typescript to my question – Joshua Ohana May 09 '18 at 00:57
I edited my post with what I found after a quick search, I'm out at the moment and didn't have time to try it out myself. However it looks like `gulp-sourcemaps` is worth looking into – Clint May 09 '18 at 01:03
Man I thought that was going to be it! Tried a few different ways but no dice. Updated my question with the info. Is there some way I'm supposed to specify the map files are inline as opposed to their own file? – Joshua Ohana May 09 '18 at 01:40
Awesome it works thanks! I'm getting some TS errors that say `error TS2300: Duplicate identifier 'Promise'.` but the debugging issue is resolved. – Joshua Ohana May 09 '18 at 02:10
`Awesome it works` - arghhh, I've reached the end of the paper trail and the solution is still infuriatingly elusive. What did you do to make it work? – half of a glazier Apr 05 '20 at 14:38

score 2 · Answer 2 · answered Jul 23 '18 at 10:13

2

Since updating VS Code I could no longer debug applications.

By downloading 1.23 I was able to debug again.

Please see the answer posted here:

How to downgrade vscode

Also here:

Visual Studio Code - Node debugger breakpoints not being hit

answered Jul 23 '18 at 10:13

JoshuaTree

1,211
14
19

Can't set Breakpoints debugging Node Typescript in VS Code

2 Answers2

With gulp-typescript: