how to debug typescript files in visual studio code

Question

using version 0.3 of visual studio code and I'm not sure how to enable sourcemaps and debug the ts file

I get the following error can't launch program '/Projects/app-server/server.ts'; enabling source maps might help

how do I enable sourcemaps and typescript debugging. Sourcemap is set to true in my

tsconfig.json

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

launch.json

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch server.ts",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "server.ts",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // 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,
            // Environment variables passed to the program.
            "env": { }
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858
        }
    ]
}

Lashandralashar

you have "program": "server.ts" but you should be executing the outputted js file, and in that js file will be the necessary source map info to point back to the ts file – Margarita

tried that originally with the source map but it won't stop at breakpoints in the ts file – Lashandralashar

I get the same error message. It has not changed after upgrading to the 0.5 version of TypeScript. – Supplementary

Doing what @Margarita said worked for me. Make sure to include "sourceMap": true in the tsconfig.json file. – Feint

Answer 1

This configuration is working fine for me:

Project distribution

|-- .vscode
    |----- launch.json
|-- bin
    |----- app.js
    |----- app.js.map
|-- src
    |----- app.ts
|-- node_modules
    |-- [..]
|-- tsconfig.json
|-- [...]

The idea is compile the typescript under src folder and place it under bin folder.

tsconfig.json

It's important to active sourceMap option.

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "target": "ES5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true
    }
}

launch.json

==== EDIT ====

This is the configuration I'm currently using at Visual Studio Code v1:

{
    "version": "0.2.0",
    "configurations": [
        {
            "args": [],
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "name": "DEBUG",
            "outDir": "${workspaceRoot}/bin",
            "preLaunchTask": "compile",
            "program": "${workspaceRoot}/src/app.ts",
            "request": "launch",
            "runtimeArgs": [
                "--nolazy"
            ],
            "runtimeExecutable": null,
            "sourceMaps": true,
            "stopOnEntry": false,
            "type": "node"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        }
    ]
}

Note the key preLaunchTask is extremely helpful if you're using any task runner as gulp because the IDE is able to detect its tasks by name.

Running

1. Compile your ts (typing in a terminal rm -r bin/ ; tsc or executing your compiling task)
2. In visual Code play Launch type (our configuration name)
3. Enjoy!

Skied

I seem to get a lot of errors when running tsc with node_modules with several "duplicate" identifiers. Is there anyway around ignoring node_modules?? – Jujube

What's getting the errors, the tsc or visual code itself? – Skied

tsc is aggressively trying to build all d.ts files including in node_modules. That was what was causing the problem... I started using atom-typescript and had some better luck because of their "fileGlob" support. – Jujube

Have you tried the configuration of the post? try with "rootDir": "src" – Skied

@max-alexander You can add an exclude section to tsconfig.json like so: { "compilerOptions": { }, "exclude": [ "node_modules", "bin" ] } – Draconic

All I needed was to set outDir and enable sourceMaps apart from the default config. – Jessamine

does not work. And vscode shows an incompletely displayed error message. how can such a basic functionality be so complicated to implement ? – Portwin

Answer 2

I think it got simpler and simpler over the releases...

I have installed ts-node (https://github.com/TypeStrong/ts-node), so my config files end up very simple.

Install ts-node with npm install ts-node --save-dev in the project folder - thanks to Hrafnkell in the comments

launch.json

{
        "name": "Launch index.ts",
        "type": "node",
        "request": "launch",
        "runtimeArgs": [
            "-r",
            "ts-node/register"
        ],
        "args": [
            "${workspaceFolder}/src/index.ts"
        ]
}

There are two things worth noting:

• runtimeArgs - passed to node to register the ts-node to handle the TypeScript files.
• there is no program property. The name of TS file to start is given as first argument instead.

That way you do not need to compile the TS to JS, you can even have modules written in TS not compiled to JS yet.

Luminous

Simplicity itself! As a reformed C# coder :-) I have worked hard to create as much of an "all Typescript" dev environment as I can. Transpiling is a bit of a necessary evil when I'v e got to get code working in the browser. But a lot of my work is support libraries where JS is unnecessary. This solution solves a problem I have been trying to solve for several days and rounds out my VSCode dev setup. Brilliant! – Falconiform

Excellent solution works like a charm. I also had to install ts-node locally "npm install ts-node --save-dev" and set a different run directory (for firebase functions): "cwd": "${workspaceFolder}\\functions" – Mccandless

This should be the accepted answer, its the only relevant one that works as of April 2019 – Stryker

Note: This information comes directly from ts-node's NPM page and its Github page (github.com/TypeStrong/ts-node#visual-studio-code). If you would like a little more information on how to use ts-node to debug Typescript code, go to either of the two aforementioned pages, and look under the "Visual Studio Code" header. This was important to me, because I was unable to get this solution to work until I specified a 'tsconfig.json' file as the note following the official documentation says. – Delivery

It's also worth mentioning ts-node has to be a project dependency, e.g. it's not going to work when ts-node is only installed globally. – Koniology

"type": "node" should change to "type": "pwa-node" for new debugger – Virgo

Simple and most efficient answer. npm i ts-node -D and not npm i -g ts-node as the global install won't work. – Homeroom

If you replace "${workspaceFolder}/src/index.ts" with ${file}, you can run the current TS file when you press F5 instead of always running index.ts – Theadora

Which port is used? Can I run it in the browser, e.g. pressing F5 in browser and setting breakpoint should stop at breakpoint? – Mcmillen

@Mcmillen When it comes to browsers, as long as you have source-maps available, debugging inside browser works out of the box. – Luminous

@Delivery - if you checked the history of the page you quoted, you would learn that page listed the configuration months after this answer was initially given. – Luminous

When debugging, I get TypeError: Unknown file extension ".ts" – Mcmillen

I've just started using this approach but immediately ran into a problem on VSCode 1.88.1 whereby it was all working fine then the next day I came back and VSCode had somehow lost touch with the node process. Even after exiting VSC the process continued running. I used ps aux | grep ts-node/register to track it down so it could be manually killed in order to re-launch via VSC – Disremember

Answer 3

This is what has been working for me with latest TS and VsCode as of November,2017

Following configuration will help you start the server and debug TS inside VS Code

This is what my tsconfig.json looks like:

{
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "../build",
        "sourceMap": true,
        "target": "es2016",
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "../node_modules",
        "../*.js"
    ]
}

And this is what my directory structure looks like:

If you pay attention you would see my src folder and build folder(containing resultant transpiled JS and map files) lives side by side which really helps me maintain a logical directory structure.

Ok, now comes the launch config:

{
            "type": "node",
            "request": "launch",
            "name": "Start and Debug",
            "preLaunchTask": "nb-tsc-watch",
            "timeout": 10000,
            "program": "${workspaceFolder}/backend/src/app.ts",
            "restart": true,
            "cwd": "${workspaceRoot}",
            "outFiles": [
                "${workspaceFolder}/backend//build/**/*.js"
            ],
            "sourceMaps": true
        }

You can use whatever preLaunchTask you want to use, or even skip it. If you skip it, you would have to transpile TS to JS manually.

This is what I do in my task nb-tsc-watch

{
            "label": "nb-tsc-watch",
            "type": "typescript",
            "tsconfig": "backend/src/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ]
        }

Kunz

Answer 4

For the more later version of VSCode as of Feb/2017, this is what worked for me (it's a combination of what both @manu and @tommy Falgout have provide):

It assumes that your json out files are in a dest folder and your source in a src folder, respectively

/.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "internalConsole",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/src/main.ts",
            "outFiles": ["${workspaceRoot}/dest/*.js"]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858,
            "outFiles": []
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "module": "commonjs",
        "outDir": "dest",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules"
    ]
}

Adaxial

I get the error 'window is not defined', probably because node has no window? Is it possible to debug client-side javascript / typescript with the debugger? – Kepler

you forgot "runtimeExecutable": "/path-to/ts-node" because otherwise the runtimeexecutable is node and not ts-node. Or did I get it wrong? – Mcmillen

Answer 5

The below setup tests mocha chai with breakpoints. It works by transpiling src to lib directory and then running tests in lib with sourceMapping back to src.

.vscode/launch.json

{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "tsc",
    "name": "Run Mocha",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": ["lib/**/*.js"],
    "cwd": "${workspaceRoot}",
    "sourceMaps": true,
    "outFiles": ["${workspaceRoot}/lib/**/*.js"]
}

tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "lib",
      "target": "es6"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

package.json to show installed modules. Scripts are irrelevant to debugging.

"scripts": {
  "test": "mocha --compilers ts:ts-node/register src/**/*.spec.ts",
  "test:coverage": "nyc -e '.ts' npm test"
},
"dependencies": {
  "@types/chai": "^3.4.35",
  "@types/mocha": "^2.2.39",
  "@types/node": "^7.0.5",
  "@types/sinon": "^1.16.35",
  "chai": "^3.5.0",
  "mocha": "^3.2.0",
  "nyc": "^10.1.2",
  "sinon": "^1.17.7",
  "ts-node": "^2.1.0",
  "typescript": "^2.2.1"
}

• Mac OSX 10.12.3 Sierra
• Visual Studio Code 1.10.1
• NodeJS v7.7.1

Blueweed

I was not sure what of the above were changes I needed to make. The key change for me to make my configuration work was adding outFiles in launch.json. – Preponderance

Answer 6

If you do not want to hardcode filenames but like simple Grogi's version here ? Using info from VS variable reference page you can do 2 things:

npm i ts-node

then launch.json like (full in case, but you can grab only this one configurations from):

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TS",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "args": [
                "${workspaceFolder}/${fileBasename}"
            ]
        }
    ]
}

Few examples from that VSC page - sometimes somewhere you can use Ctrl+Space to get them, but does not work inside existing for me:

${workspaceFolder} - /home/your-username/your-project
${workspaceFolderBasename} - your-project
${file} - /home/your-username/your-project/folder/file.ext
${relativeFile} - folder/file.ext
${relativeFileDirname} - folder
${fileBasename} - file.ext
${fileBasenameNoExtension} - file
${fileDirname} - /home/your-username/your-project/folder
${fileExtname} - .ext
${lineNumber} - line number of the cursor
${selectedText} - text selected in your code editor
${execPath} - location of Code.exe

Hyperaesthesia

Answer 7

The answer by @manu pointed me in the right direction; however, with the latest version of VSCode, I still had the same problem. This is the fix that worked for me:

https://github.com/Microsoft/vscode/issues/13499

"outFiles": [ "${workspaceRoot}/js/*.js" ]

Berard

Answer 8

2017/12/17
.vscode/launch.json ```json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.ts",
      "outFiles": [
        "${workspaceRoot}/dist/index.js"
      ],
      "sourceMaps": true,
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "env": {
          "NODE_ENV": "development"
      },
      "console": "internalConsole",
      "preLaunchTask": "compile",
      "name": "DEBUG"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 5858
    }
  ]
}

.vscode/tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "compile",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
          "$tsc"
      ],
      "group": {
          "kind": "build",
          "isDefault": true
      }
    }
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Frangipani

Adding the "outDir" on the compiler options is what made TypeScript debugging work for me. Thanks. – Whity

Thanks I was able to piece it together with this! – Takamatsu

Answer 9

If you are running your script from a command line, in the latest Visual Studio Code versions you can skip the creation of launch.json which is sometimes a laborous task. Instead, you can automatically attach the debugger to the any ts-node or node command you run from the command line.

1. Enable source maps for your tsconfig.json - TypeScript config needs source map support or debugging is not possible.

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

2. Enable Auto Attach on Visual Studio Code debugger. It is a button on the task bar, but can be also accessed through the command palette.

3. Instead of launching the script as:

ts-node myscript.ts

Launch it as

node -r ts-node/register --inspect-brk myscript.ts

You will see this on Node startup:

Debugger listening on ws://127.0.0.1:9229/8bb6dcc8-a73c-405e-b1fe-69a3d7789a20
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

Then Visual Studio Code debugger will

1. Stop on the first line of the program

2. Stop on any of the following breakpoints set in the Visual Studio Code editor

Gillies

this worked for me with latest node and vs code on Ubuntu. I guess can make node -r ts-node/register --inspect-brk myscript.ts to a script in launch but i was not able to – Screwy

Answer 10

Auto-configuration approaches

A simple, automatic config is sufficient for many use cases - no need to configure launch.json manually. Prerequisite: Enable sourcemaps in workspace tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    // ...
  }
}

1.) Debug current file without launch.json

Just open or re-focus the file and then press F5 (Start Debugging). If multiple debug environments exist like Chrome and Node.js, select the latter.

Note: This currently requires no other entry to be present in launch.json. Next VS Code release will come with single file debug improvements.

2.) Auto Create launch.json

Go to Debug view (CtrlShiftD) and click "create a launch.json file". This will create a debug entry for the main field file of package.json or the active file, if no main exists. Example:

  "configurations": [ // auto-generated 
    { 
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\dist\\A.js",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]

Note: This requires launch.json to not be present before.

3.) Attach debugger to running program

Turn on Auto Attach feature in settings.json or via UI → "Debug: Toggle Auto Attach".

"debug.node.autoAttach": "on" // in settings.json

Start the node program in debug mode. Shortly after, VS Code will start debugging.

node --inspect-brk dist/A.js

Or use "Debug: Attach to Node Process" (also with launch.json: "${command:PickProcess}").

Haftarah

"preLaunchTask": "tsc: build - tsconfig.json" was the configuration I was looking for! Thanks! – Attitudinize

Answer 11

I just wrote my own PowerShell function as preLaunchTask. This can be a worse solution than previous ones, but can add more flexibility to inject more task under preLaunchTask field. Because currently it does not support array, and allows only one task to be run before launch action.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node.js",
            "program": "${file}",
            "preLaunchTask": "RebuildTypeScript",
            "outFiles": [
                "${workspaceRoot}/js/**/*.js"
            ]
        }
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },        
        {
            "taskName": "RebuildTypeScript",
            "type": "shell",
            "command": "Powershell ./RebuildTypeScript.ps1",
            "group": "none",
            "presentation": {
                "reveal": "never"
            }
        }       
    ]
}

RebuildTypeScript.ps1

$currentDir = Split-Path -Path $MyInvocation.MyCommand.Definition -Parent
function CompileTypeScriptFiles($folder) {
    $tsFiles = Get-ChildItem $folder -Filter "*.ts" -Recurse
    $tsFiles | ForEach-Object {
        $tsFile = $_.FullName;
        $options = $tsFile + " --outDir js --sourceMap"
        Start-Process "tsc" $options 
    }
}


CompileTypeScriptFiles $currentDir

Classics

Answer 12

For me, after so many launch.json configs. I came to find that using jestJs with istanbul cause my breakpoint not to break at the correct location until I set the config to:

config.collectCoverage = false;

See issue

Perretta

Answer 13

This simple configuration in launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run/Debug current file",
      "skipFiles": ["<node_internals>/**"],
      "program": "${file}",
      "outFiles": ["${workspaceFolder}/**/*.js"]
    }
  ]
}

should allow you to run/debug the current ts file.

Of course, start "npx tsc -w" before.

Atomicity

Answer 14

• Install ts-node

npm install --save-dev ts-node

• Put this json to .vscode/launch.json or add configurations property value to your existing configurations

{
  "version": "1.0.0",
  "configurations": [
    {
      "name": "TS-Node",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node",
      "runtimeArgs": [
        "--transpile-only",
        // if you use esm
        "--esm" 
      ],
      "program": "${file}",
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**", "node_modules/**"]
    }
  ]
}

• Switch to file you want to launch and set breakpoint
• Enable Run and Debug window on the left side of VSCode and run this configuration called TS-Node
• Congratulations! You are debugging your typescript code

Q