Debugging

There are two ways of running and debugging TypeScript:

Transpile to JavaScript, run in node and use mappings to link back to the TypeScript source files

or

Run TypeScript directly using ts-node (opens new window)

This article describes both ways using Visual Studio Code (opens new window) and WebStorm (opens new window). All examples presume that your main file is index.ts.

TypeScript with ts-node in WebStorm

Add this script to your package.json:

"start:idea": "ts-node %NODE_DEBUG_OPTION% --ignore false index.ts",

Right click on the script and select Create 'test:idea'... and confirm with 'OK' to create the debug configuration:

(opens new window)

Start the debugger using this configuration:

(opens new window)

TypeScript with ts-node in Visual Studio Code

Add ts-node to your TypeScript project:

npm i ts-node

Add a script to your package.json:

"start:debug": "ts-node --inspect=5858 --debug-brk --ignore false index.ts"

The launch.json needs to be configured to use the node2 type and start npm running the start:debug script:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node2",
            "request": "launch",
            "name": "Launch Program",
            "runtimeExecutable": "npm",
            "windows": {
                "runtimeExecutable": "npm.cmd"
            },
            "runtimeArgs": [
                "run-script",
                "start:debug"
            ],
            "cwd": "${workspaceRoot}/server",
            "outFiles": [],
            "port": 5858,
            "sourceMaps": true
        }
    ]
}

JavaScript with SourceMaps in Visual Studio Code

In the tsconfig.json set

"sourceMap": true,

to generate mappings alongside with js-files from the TypeScript sources using the tsc command.
The launch.json (opens new window) file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\index.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

This starts node with the generated index.js (if your main file is index.ts) file and the debugger in Visual Studio Code which halts on breakpoints and resolves variable values within your TypeScript code.

JavaScript with SourceMaps in WebStorm

Create a Node.js debug configuration (opens new window) and use index.js as Node parameters.

(opens new window)