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(() => {
a++;
console.log(a++);
}, 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"+" 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 Apply – OK
Node parameters options are really important do not forget about them.
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 on
await/asyncconstructions which are run asynchronously and they can run not in a normal way. Click buttonStep overseveral times and magichappens =).