How to debug TypeScript in WebStorm?

In this article, I want to show you how WebStorm can debug TypeScript code. As you know, TypeScript code should be compiled into JavaScript before running in a browser or NodeJS. After compilation code will not be the same. If you want to put a breakpoint and check variable values, you have to tell the debugger where it should stop. How to do that?

I will set up a project from scratch and show you how to make the WebStorm debugger work.

Long Story Short: you need to set sourceMap parameter in tsconfig.json to true. It will tell tsc to build source maps and that will help WebStorm to know where to stop if you put a breakpoint.

Setup the TypeScript project

First of all, you should have installed NodeJS and WebStorm to make all scripts on commands works. Also, all terminal commands might not work in Windows systems.

And one more important thing. Of course, you can debug with console.log and don't use any external debugger. However, I should say sometimes the program's complexity makes console.log debugging pretty hard. Better to have some tools in the pocket that will allow you to use more power.

Let's set up an empty project first. We can create a directory and initialize npm there by following commands.

# create directory
mkdir typescript-debug-webstorm

# go inside directory
cd typescript-debug-webstorm

# initialize empty npm project
npm init -y

To make TypeScript work we need to install it and initialize it. Let's do that.

# installing TypeScript
npm i --save-dev typescript

# initialize default configuration
npx tsc --init

Now I would like to set up a basic directories structure. My preference is to use src directory for TypeScript files, and dist directory for compiled code.

# create both directories 
mkdir src 
mkdir dist

Now time to edit TypeScript configuration and make it work as excepted with my directories. Open the directory in WebStorm, and then open the tsconfig.json file. Afterward we need to edit it a bit to make it work with my preferred directory structure.

TypeScript compiler will scan src directory by default. As for dist directory, we need to edit the parameter outDir. Find it in the file, remove the comment, and change it to ./dist.

Now time to test our setup before we move to debug. Let's create a simple index.ts file inside the src directory.

And here is the code.

function main() {
    console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
}

main();

Let's compile it and run it by executing the following commands.

# compile source (you could also just run tsc)
npx tsc 

# run 
node dist/index.js

Nice! As a result it looks like everything is working. But noted let's set up one more thing before we will move to debugging. I am talking about npm commands. Open the package.json file and add a few commands inside the scripts section. Here is my result package.json file.

{
  "name": "typescript-debug-webstorm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx tsc",
    "prestart": "npm run build",
    "start": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.9.5"
  }
}

As you can see, I added the commands build and start. Also, I added a pre-command, which will run before each start execution start. Now we can run our program by following the command, and the source code will be compiled automatically. That is possible because before each start we run the build command which compiles our sources via TypeScript compiler.

Let's change our program code a bit and rerun the program.

function main() {

    console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
    for (let i = 0; i < 10; i++) {
        console.log(`Debugging is fun! ${i}`);
    }
}

main();

# run our program by following command
npm run start 

It looks like everything is working. Okay, now let's move to setting up the debugger.

Debugging TypeScript in WebStorm

First, let's add run configuration to our WebStorm settings.

1. Open Edit Configurations popup.
2. Then press on "+" to add new.
3. In the new popup, select npm.
4. After select the command start from the scripts menu.
5. Press OK.

1. Open Edit Configurations popup.

2. Then press on "+" to add new.

3. In the new popup, select "npm".

4. After select the command start from the sripts menu.

5. Press OK

After all, we are done with the configurations. Let's try to debug. Put breakpoint somewhere, for example, on the second console.log call. To do that, click on the line number on the left.

Then press debug button on the top. Additionally don't miss one important thing: the start script should be selected like a current run configuration.

Nice, but... The program finished successfully, besides nothing happened with our breakpoint.

Why did it happen? As I mentioned before, WebStorm doesn't know where to stop, because NodeJS executes compiled JavaScriopt code.

How to fix it? We need to edit the tsconfig.json file and set sourceMap parameter to true. That will tell TypeScript compiler to make a source map between TypeScript and JavaScript code. Because of that WebStorm will know where is corresponding code.

Let's try again to debug.

Finnaly it's working! After that you could use the Resume Program button and iterate via each loop statement inside the code. Awesome, isn't it?

In sum it isn't too hard to setup debugger for TypeScript in WebStorm. I hope you will be able to use the full power of the WebStorm debugger. If you have any questions feel free to ask them in the comments section below.

If you would like to check source files welcome to my GitHub: https://github.com/Jakeroid/blog-article-typescript-debug-webstorm.