Debugging Typescript in Visual Studio Code

calendarMay 4, 2017 · 2 min read · Uncategorised  ·
Share on: linkedincopy

This is one of those posts I do as a reminder to myself. I have struggled to get debugging working in VSCode for Typescript files. If I set breakpoints in the underlying generated JavaScript they worked, but did not work if they were set in the Typescript source file. There are loads of walkthroughs and answers on Stackoverflow, but all with that vital little bit (for me) missing. So this is what I needed to do for my usage scenario…

Whilst developing a Node based VSTS extension I have the following structure

 1
 2
 3Git repo root       (folder)
 4
 5\--- .vscode         (folder)
 6
 7\------ launch.json
 8
 9\--- mystuff.src   (the source .TS files)
10
11\------ script.ts
12
13\------ tsconfig.json
14
15\--- mystuff    (the target folder for the .JS files)

I develop my Typescript in the .src folder and use the TSC compiler to generate the .JS file into the target folder, running the ‘tsc –p .’ command whilst sitting in the .src folder.

Note: I actually run this Tsc command using Gulp, but this post does not need to go into detail of that.

The key thing is to make sure the two .json files have the correct options

The tsconfig.json is

 1{ 
 2
 3   "compilerOptions": { 
 4
 5   "target": "ES6", 
 6
 7   "module": "commonjs", 
 8
 9   "watch": false, 
10
11 "outDir": "../mystuff/", 
12
13 "sourceMap": true 
14
15}, 
16
17"exclude": \[ 
18
19   "node\_modules" 
20
21\] 
22
23}

The important lines are highlighted

  • The path to generate to .JS to – for me it was important to generate to a different folder as this made it easier to create the VSTS extension packages without shipping the .TS files by accident.This was part of my debugging problem as if the .ts and .js files are in the folder the should be no issues
  • Creating the source map which enables debugging, the .JS.MAP files

The launch.json is

 1{ 
 2
 3   "version": "0.2.0", 
 4
 5   "configurations":  
 6
 7   \[  
 8
 9   { 
10
11      "type": "node", 
12
13      "request": "launch", 
14
15      "name": "Node – my stuff", 
16
17 "program": "${workspaceRoot}/mystuff.src/script.ts", 
18
19 "outFiles": \["${workspaceRoot}/mystuff/\*.js"\] 
20
21   } 
22
23   \] 
24
25}

The critical lines, and the ones I messed up are

  • Program must point at the .TS file
  • Outfiles must point to the location of the .JS and .JS.Map files in the target folder and those square brackets [] are vital

Once I had all this in place I could set breakpoints the .TS file and they worked