Debugging TypeScript projects with VSCode in 2023

#vscode #typescript #node #javascript

I finally decided to invest some time in properly setting up a debugger for my Node + TS projects. console.log is cool and all, but it just wasn't cutting it anymore.

So, I've been reading documentation (plus so many GitHub issues), and trying different solutions, and I ended up with a config that I'm actually happy with!

Keep reading to learn how to:

Create a project with Node.js and TypeScript.
Install a package (ts-node-dev) and configure it so it can run your project and auto-restart on save.
Configure the debugger in VSCode so it uses ts-node-dev to both enable the debugging of .ts files and provide auto-restarts.
Finally, stop relying on console.log('here!') to debug your code :D

Initialize the project

Create a directory for your project and initialize it:

mkdir ts-starter
cd ts-starter
npm init -y

Install TypeScript

Install TypeScript and the type definitions for node:

npm install typescript @types/node --save-dev

Setup your tsconfig

To create the tsconfig.json file, run the following command:

npx tsc --init

The default tsconfig.json generated should look something like this:

{
    "compilerOptions": {
        "target": "ES2016",
        "module": "commonjs",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true 
    }
}

Install ts-node-dev

Were going to hook up ts-node-dev with the VSCode debugger to get both the debugger and auto-restarts working!

Start by installing the package:

npm install ts-node-dev --save-dev

To quickly try it out, we can create a new script in the package.json:

"scripts": {
    "dev": "ts-node-dev --respawn src/index.ts"
},

Now lets write some code to run!

Create the src directory and add the following code:

// index.ts

interface Game {
  name: string;
  genre: string;
  platform: string;
}

const game: Game = {
  name: "Super Mario",
  genre: "Platformer",
  platform: "Nintendo",
};

console.log(game);

Were adding some types so we can make sure the compiler is working properly.

Finally, run the dev script from your terminal:

npm run dev

You should see something like this:

And finally, change the values in your game constant and save the file, to see the automatic restarts in action!

Nice, we can see how the app auto-restarts after we make changes!

Set up the VSCode Debugger

First, lets generate a launch.json file. To do that:

Open the command palette (Ctrl + Shift + P or Cmd + Shift + P on Mac) and select Debug: Add Configuration
On the next step, select Node.js for the Debugger

You should get an auto-generated launch.json file, like this one:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\\\src\\\\index.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

Replace it with the following configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch + auto-restart",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
            "args": [
                "--respawn",
                "${workspaceRoot}/src/index.ts" 
            ]
        }
    ]
}

The main properties to notice here are:

runtimeExecutable: By default, this would be node, but we are replacing it with ts-node-dev
args: Were adding the --respawn flag, which tells ts-node-dev to restart the process when files change, and then we add the path to our startup file.

Essentially, these two properties produce a result similar to the ts-node-dev --respawn src/index.ts script we set up earlier in the package.json.