3

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

Umbrella
  • 1,085
  • 1
  • 14
  • 30

1 Answers1

6

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

Radheya
  • 779
  • 1
  • 11
  • 41
  • Thanks. I installed 6.2 version of node js and now I get a correct URL from the console. However, server.js file isn't present in "sources" in chrome dev tools. Is there something wrong with my launch.json? – Umbrella Aug 04 '17 at 07:50
  • considering you are already running your project from the work space location, can you try changing `"program": "${workspaceRoot}/server/server.js",` with `"program": "${workspaceRoot}/server.js",` and see if its running. – Radheya Aug 04 '17 at 08:22
  • Neither "${workspaceRoot}/server.js" nor "${workspaceRoot}" work, unfortunately. – Umbrella Aug 04 '17 at 19:26
  • okay. and what happens when you try changing `"program": "${workspaceRoot}/server/server.js"` with `"program": "${file}"` in your launch.json? here `"program": "${file}"` is global launch configuration and automatically fetches file name of the project you are running. you dont have to mention it specifically just as you did previously in launch.json. try to replace the code as shown above and tell if its working – Radheya Aug 05 '17 at 08:23
  • Tried all the combinations, what I always see is on the screenshot above. – Umbrella Aug 05 '17 at 09:10
  • Tried creating a dummy file and launched debugger using "node" instead of "babel-node" and it worked fine. When I opened that file with "babel-node" I saw the same crap that is on the screenshot I attached instead of my actual code. – Umbrella Aug 05 '17 at 09:38