Incorrect breakpoint location using VS Code, TypeScript and Node.js

Question

Trying to debug a node application using TypeScript in VS Code.

The problem is that the debugger does not stop at the correct location in the source code.

app.ts

class Foo 
{
    doSomething(){
        console.log("TEST");
    }   
}

var foo = new Foo()
foo.doSomething();

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "ES5",
        "module": "commonjs"
    }
}

launch.json

"configurations": [
    {
        // Name of configuration; appears in the launch configuration drop down menu.
        "name": "Launch app.js",
        // Type of configuration.
        "type": "node",
        // Workspace relative or absolute path to the program.
        "program": "app.ts",
        // Automatically stop program after launch.
        "stopOnEntry": false,
        // Command line arguments passed to the program.
        "args": [],
        // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
        "cwd": ".",
        // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
        "runtimeExecutable": null,
        // Optional arguments passed to the runtime executable.
        "runtimeArgs": ["--nolazy"],
        // Environment variables passed to the program.
        "env": {
            "NODE_ENV": "development"
        },
        // Use JavaScript source maps (if they exist).
        "sourceMaps": true,
        // If JavaScript source maps are enabled, the generated code is expected in this directory.
        "outDir": null
    },

tasks.json

// A task runner that calls the Typescript compiler (tsc) and
// compiles based on a tsconfig.json file that is present in
// the root of the folder open in VSCode

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // Tell the tsc compiler to use the tsconfig.json from the open folder.
    "args": ["-p", "."],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

The problem is that if I set a breakpoint at the "console.log("test");" line, the debugger jumps down two lines and misses my breakpoint.

Any idea why this happens. As far as I have understood it should be possible to debug node applications written in typescript.

Answer 1

I suspect the reason is that your app.js and app.map.js were not updated when your app.ts changed at some point.

You should run the tsc task every time before you run the debugger to ensure that the generated JavaScript files reflect the changes you made in the TypeScript files.

A simple project template for this (very common) use case can be found at https://github.com/jyuhuan/node-ts . It defines a tsc task that monitors the TS files for any changes, keeping the generated JS files always up-to-date.