Can't launch VSCode debugger for node with babel-node

2.8k views Asked by At

When I type npm run debug into the console I get: "Debugger listening on ws://127.0.0.1:3090/d17dfe56-4fa4-4686-a62e-d07cff78c834". When I go to this adress in chrome the only thing I see is "WebSockets request was expected". What parts of my config should I tweak to make the debugger work? I'm using the latest version of nodejs.

package.json scripts

"scripts": {
    "prod": "webpack -p --env.production --progress",
    "start": "babel-node --presets es2015 server/server.js",
    "watch": "nodemon --exec npm run start",
    "debug": "babel-node --presets es2015 server/server.js --inspect --debug-brk=3090"
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "program": "${workspaceRoot}/server/server.js",
            "restart": true,
            "runtimeArgs": [
                "run-script", "debug"
            ],
            "port": 3090
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3090",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 3090,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

File structure:

├───.vscode
├───js
├───server
│   ├───db
│   ├───middleware
│   ├───models
│   ├───server.js 

enter image description here

1

There are 1 answers

6
Radheya On BEST ANSWER

This seems to be an issue with nodejs library version >= 7.0.0.

First Workaround:

A small workaround to open this file in chrome with dev tools is to copy the code of link after ws in your case:

Debugger listening on ws://127.0.0.1:3090/d17dfe56-4fa4-4686-a62e-d07cff78c834

and append it in the end of the line of dev tools link with ws= just as shown below:

chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:3090/d17dfe56-4fa4-4686-a62e-d07cff78c834

This will enable you to open your program in chrome dev tools. Link and solution to the issue is given here

Second Workaround:

I tried installing old version of node i.e. 6.11.2 and npm 3.10 and gave it a try in visual studio code, it was working perfectly fine without any problems.

however, with the trick shown above in first method I am still able to use latest version of both node and npm.

EDIT: Formatted my answer for better understanding