PHPStorm: How to debug TypeScript

Table of Content

Some time ago, I’ve started to work with Node.JS and its TypeScript. No one serious project get around without debugging. I work with PHPStorm many years, so there were no needs to search another IDE for Node.js, such as PHPStorm has natively support for Node.JS. That sounds great but a debugging approach is slightly different from PHP debugging with xDebug.

There are no needs to add special options in .tsconfig.json for compilation process from TypeScript in native JavaScript, PHPStorm will compile code on the fly.

Code preparation

Create main.ts file and add next code for debug:

// src/main.ts
let a = 5;
setInterval(() => {
}, 2000);

Set break point on third line and go to next step.

PHPStorm configuration

Click on Edit Configuration... on the right top

In the opened window click the green "+" button (Add New Configuration) and select Node.js

It creates new debug configuration for your script, some options can be applied automatically such as an option Node interpreter.

Fill in:
Node interpreter: the path to your node.exe file
Node parameters: --inspect --require ts-node/register
Working directory: the path to the root of your project
JavaScript file: TypeScript file which you want to debug
Environment variables: NODE_ENV=development

Click ApplyOK

Node parameters options are really important do not forget about them.

Run/Debug Configuration for TypeScript file

Go to filemain.ts, set a breakpoint on line five, click the Debugbutton on the right top, wait for some time while the automatic compilation executing and enjoy debugging process.

It may not be obvious but the debugging process is slightly different from PHP and you should take attention onawait/async constructions which are run asynchronously and they can run not in a normal way. Click buttonStep over several times and magic happens =).

Related links

Leave a Reply

Your email address will not be published. Required fields are marked *