This article describes how to use Node Inspector to debug JavaScript and TypeScript applications.

  • Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 🐞🔫
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

I prepared an example of calculating fibo sequences and put it in the Github repository. I suggest you clone it and follow my lead. Of course, this is not necessary.

$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git
$ cd medium-node-inspector-tests
$ npm i
Copy the code

I have scripted all the commands I need to use in this article. If you don’t have clone code, consider the following script:

"scripts": {
  "build:ts": "tsc"."start": "node index.js"."start:watch": "nodemon index.js"."start:debug": "node --inspect index.js"."start:debug:brk": "node --inspect-brk index.js"."start:debug:ts": "node --inspect --require ts-node/register index.ts"."start:debug:ts:brk": "node --inspect-brk --require ts-node/register index.ts"
}
Copy the code

When your environment is configured, you can use NPM start to start the program and visit localhost:3000/[n] to view the Fibo sequence.

Since I wanted to demonstrate JavScript and TypeScript debugging, I wrote the index.ts file and the corresponding JavaScript version generated by the TSC command. So, the JavaScript version will look a little ugly.

Debug mode running

We will use two modes for debugging. Use –inspect and –inspect-brk, respectively. The difference is that the second one doesn’t actually start until an Agent like Chrome DevTools comes in. And, once started, it will automatically pause at the user’s first line of code.

When a Node.js application runs in inspect mode, there are two things to note:

  • A UUID is assigned to this debugging session. And a WebSockets terminal (ws://127.0.0.1:9229/[UUID]) will always connect. The terminal sends the status of the code in real time.

  • An HTTP terminal (http://127.0.0.1:9229/json) provides, facilitate like Chrome DevTools such terminal unknown Node session and corresponding UUID.

You can curl http://127.0.0.1:9229/json. For more information, see legacy-Debugger.

Use Chrome DevTools to debug JavaScript

Run:

npm start:debug // if you're on the suggested repo or...
node --inspect index.js / /... otherwise.
Copy the code

You will see:

You can see a WebSocket server starting up and listening on port 9229. And you can see that the UUID is 5dc97… . Each session has its own UUID. If you restart the service, the UUID will change.

The next step is to open Chrome and type Chrome://inspect in the url box.

Here, I want to say is: Chrome by visiting http://127.0.0.1:9229/json can automatically find the running session. Now click inspect at the bottom of the image to start debugging. A new DevTools window opens. You can access the file you want to debug and deug it by adding breakpoints.

If, you run:

npm start:debug:brk // if you're on the suggested repo or...
node --inspect-brk index.js / /... otherwise.
Copy the code

You can see:

When you type Chrome://Inspect into Google Chrome, you’ll find two versions of TypeScript files: one with the corresponding Source map(labeled [sm]) and one without. Of course, if you want to debug, put the breakpoint in the file with the SM tag.

With so many tools available during development, what happens when you go live? Can you still debug happily? You can use Fundebug!

Use Visual Studio to debug JavaScript

Select the target JavaScript file you want to Debug, click the Debug option (Mac: Shift+Cmd+D), and then click the Execute button (▶️). Visual Studio automatically adds the inspect parameter to start Node.

Please click the link below to view the original video.

You can also create a Launch Configuration file if you want to run it on the console. Visual Studio’s auto-completion is amazing. Remember that 9929 is the default Node Inspector port number.

{
    "configurations": [{"type": "node"."request": "attach"."name": "Attach"."port": 9229}}]Copy the code

If you are careful enough, the above configuration file does not specify UUID. Instead, Visual Studio automatically accesses WS ://127.0.0.1:9229 to get the current session state. When configured, you can run it on the console:

npm start:debug // if you're on the suggested repo or...
node --inspect index.js / /... otherwise.
Copy the code

Then configure launch Configuraiton and Attatch, preferably by hitting the Play button. As follows:

Use Visual Studio to Debugging TypeScript

In Visual Studio,.ts files are not allowed if “type”:”node” is configured, so you have two options: you can either compile.ts with ts-Node.

{
    "configurations": [{"name": "Current TS File"."type": "node"."request": "launch"."program": "${workspaceRoot}/node_modules/.bin/ts-node"."args": ["${relativeFile}"]."protocol": "inspector"}}]Copy the code

Or specify the runtimeExecutable as NPM instead of the default node.

{
    "configurations": [{"type": "node"."request": "launch"."name": "Launch via NPM"."runtimeExecutable": "npm"."runtimeArgs": [
               "run-script"."start:debug:ts"]."port": 9229]}},Copy the code

If you want to run TypeScript on the console, it looks like this:

npm start:debug:ts // if you're on the suggested repo or...
node --require ts-node/register index.ts / /... otherwise.
Copy the code

Launch Configuraiton is as follows:

{
    "configurations": [{"type": "node"."request": "attach"."name": "Attach"."port": 9229}}]Copy the code

Debugging JavaScript using WebStorm

In the top right, you can select Run/Debug Configurations, click and select the + sign, and a number of candidate Configurations are listed. Then select Node.js and name it. In the JavaScript File option, fill in your entry file. And then it’s ready to run.

Debugging TypeScript using WebStorm

Almost the same as with JavaScript configuration, except for the Node Parameters option, you need to fill in –inspect –require TS-node /register.

Hope this article helps you have fun with debug!