Vscode: Debug Node.js with ES6

Created on 19 Sep 2017  ·  13Comments  ·  Source: microsoft/vscode
  • VSCode Version: Code 1.16.1 (27492b6bf3acb0775d82d2f87b25a93490673c6d, 2017-09-14T16:24:39.530Z)
  • OS Version: Darwin x64 16.7.0
  • Extensions:

Extension|Author (truncated)|Version
---|---|---
path-intellisense|chr|1.4.2
vscode-eslint|dba|1.3.1
python|don|0.7.0
node-module-intellisense|lei|1.4.0
vscode-icons|rob|7.13.0
background|sha|1.1.15
vscode-react-native|vsm|0.4.2
vscode-todo-highlight|way|0.5.11

I am using Visual Studio Code to debug a Node.js program which is coded with ES6.

I use babel to compile the ES6 to ES5, and everything works fine, code works fine when I run it without debugging.

When it comes to debug, a problem shows up.

There are 3 files:

index.js

import hello from './imported';
import hello2 from './imported2';

const h = hello();
const h2 = hello2()

console.log(h);
console.log(h2);

imported.js

function hello() {
    return 'hello world';
};

export default hello;
````

imported2.js

```js
function hello2() {
    return 'hello world again';
}

export default hello2;

and here is my launch.js

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/build/index.js",
            "sourceMaps": true
        }
    ]
}

I am using source map, so that the breakpoints can stop at the source file.

I put 3 breakpoints in the program:

  1. index.js const h = hello();
  2. imported.js return 'hello world';
  3. imported2.js return 'hello world again';

When I enable all 3 breakpoints, all breakpoints works fine, when I disable the first breakpoints, something wrong happens, debug console prints:

Debugging with inspector protocol because Node.js v8.5.0 was detected.
node --inspect=38607 --debug-brk build/index.js 
Debugger listening on ws://127.0.0.1:38607/7cf119cf-beb5-4105-84f3-880f44c9fe00
Debugger attached.
hello world
hello world again
******** Unhandled error in debug adapter - Unhandled promise rejection: Error: not opened
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/ws/lib/WebSocket.js:219:16)
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeConnection.js:43:20)
    at Client._sendQueuedRequests (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:82:30)
    at Client._send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:76:14)
    at Promise (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:100:18)
    at Promise (<anonymous>)
    at Client.call (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:98:16)
    at Proxy.target.(anonymous function) (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:140:53)
    at NodeDebugAdapter.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/nod[...]
******** Unhandled error in debug adapter - Unhandled promise rejection: Error: not opened
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/ws/lib/WebSocket.js:219:16)
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeConnection.js:43:20)
    at Client._sendQueuedRequests (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:82:30)

It seems the program works fine, but the breakpoints do not take effect.

How could I make the breakpoints works when I just enable the last two breakpoints?

I am using:

node -v v8.5.0

bug debug verified
Source
picture Monsoir

Most helpful comment

Below is my config bit, for cases where you’d like to debug a whatever module (entrypoint) that is in editor’s focus.

{
        "name": "Launch via Babel",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
        "runtimeArgs": ["--presets", "env"],
        "program": "${file}"
}
picture felicio on 21 Oct 2017
❤2 🎉1

All 13 comments

Can you set "trace": true, and upload the log from the path it prints in the debug console? Thanks!

roblourens picture roblourens on 19 Sep 2017

Should I put "trace": true to launch.json?

here is the launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/build/index.js",
            "sourceMaps": true,
            "trace": true
        }
    ]
}

after I hit start debugging, debug console prints different content, sometimes prints Content 1, sometimes prints Content 2 (in both cases, the last 2 breakpoints are enabled)

Content 1

Debugging with inspector protocol because Node.js v8.5.0 was detected.
Verbose logs are written to:
/var/folders/m7/ys_3bv0d6yv7hhm1dt0m7y_h0000gn/T/vscode-node-debug2.txt
node --inspect=27982 --debug-brk build/index.js 
Debugger listening on ws://127.0.0.1:27982/50285c8b-333e-45a7-b495-9771b8023f19
Debugger attached.
hello world
hello world again
******** Unhandled error in debug adapter - Unhandled promise rejection: Error: not opened
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/ws/lib/WebSocket.js:219:16)
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeConnection.js:43:20)
    at Client._sendQueuedRequests (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:82:30)
    at Client._send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:76:14)
    at Promise (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:100:18)
    at Promise (<anonymous>)
    at Client.call (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:98:16)
    at Proxy.target.(anonymous function) (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:140:53)
    at NodeDebugAdapter.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/nod[...]

Content 2

Debugging with inspector protocol because Node.js v8.5.0 was detected.
Verbose logs are written to:
/var/folders/m7/ys_3bv0d6yv7hhm1dt0m7y_h0000gn/T/vscode-node-debug2.txt
node --inspect=38039 --debug-brk build/index.js 
Debugger listening on ws://127.0.0.1:38039/9284e467-34ae-4dc8-9d26-0818da59581d
Debugger attached.
hello world
hello world again
******** Unhandled error in debug adapter - Unhandled promise rejection: Error: not opened
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/ws/lib/WebSocket.js:219:16)
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeConnection.js:43:20)
    at Client._sendQueuedRequests (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:82:30)
    at Client._send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:76:14)
    at Promise (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:100:18)
    at Promise (<anonymous>)
    at Client.call (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:98:16)
    at Proxy.target.(anonymous function) (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:140:53)
    at NodeDebugAdapter.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/nod[...]
******** Unhandled error in debug adapter - Unhandled promise rejection: Error: not opened
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/ws/lib/WebSocket.js:219:16)
    at LoggingSocket.send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeConnection.js:43:20)
    at Client._sendQueuedRequests (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:82:30)
    at Client._send (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:76:14)
    at Promise (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:100:18)
    at Promise (<anonymous>)
    at Client.call (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:98:16)
    at Proxy.target.(anonymous function) (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/node_modules/noice-json-rpc/lib/noice-json-rpc.js:140:53)
    at NodeDebugAdapter.<anonymous> (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.node-debug2/nod[...]

I find that it has no differences whether I set "trace": true or not. Please let me know if I do something not right.

Thanks!

Monsoir picture Monsoir on 20 Sep 2017

That's right, when you set that, it prints

Verbose logs are written to:
/var/folders/m7/ys_3bv0d6yv7hhm1dt0m7y_h0000gn/T/vscode-node-debug2.txt

please upload that log

roblourens picture roblourens on 20 Sep 2017

vscode-node-debug2.txt

Monsoir picture Monsoir on 20 Sep 2017

Just out of curiosity, why are you using babel / source maps for ES6 when you are using Node.js 8.5?

indiejames picture indiejames on 21 Sep 2017

I know that Node.js 8.5 supports the ES6 modules. But to use import, the files have to be named with .mjs, add we have to add --experimental-modules option when execute them.

I am no sure whether these extra steps will still be needed or not in the future. And also, I want to keep the extension .js to work well with other facilities, like the plugins which do not support .mjs files.

And I am just new to Node.js, I don't know if this is a good practice. If you have any instructions for beginners like me, please let me know.

Thanks!

Monsoir picture Monsoir on 21 Sep 2017

The breakpoints aren't hit because vscode doesn't know where to set the breakpoints until the scripts are already loaded. By the time it loads the sourcemaps, the code in those files has already run.

If you set the outFiles property of your launch config to point toward those files on disk, then it should be able to load the sourcemaps ahead of time.

The error is a debug adapter bug.

roblourens picture roblourens on 25 Sep 2017

It works, thanks!

Monsoir picture Monsoir on 26 Sep 2017

@Monsoir would you mind posting resulting configuration and any extra steps you needed to take?

What I still don't understand is how you were able to debug ECMAScript modules in the editor while using node without setting --experimental-modules flag and with file extension of .js instead of .mjs.

felicio picture felicio on 21 Oct 2017

@felicio

Actually, because the module feature is not supported in Node 8.5 as other ES6 features, I do not debug the ES6 code directly in the editor.

I use Babel to compile the ES6 code to JavaScript code which can run directly in Node 8.5. As a result, the code using module feature is compiled to the code which can run directly in Node 8.5.

And the code I debug in the editor is the compiled code, not the source code written in ES6. But with some additional configurations, you can set breakpoints in ES6 code directly, editor will do the rest of the work.

And here is some steps to setup the debug environment

  1. Create a package.json file
npm init -y
  1. Install some dependencies
npm i -D babel-cli babel-core babel-preset-es2015 babel-preset-stage-2
  1. Add some scripts. This step is optional, but convenient

In the package.json file, add the code below to the scripts field

"build": "babel ./src -d ./build",
"start": "npm run build && node ./build/index.js",
  1. Add a file called .babelrc, and add the code below
{
    "presets": [
        "es2015",
        "stage-2"
    ]
}
  1. Configure the launch.json, the file vscode use for debugging
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/build/index.js",
            "sourceMaps": true,
            "trace": true,
            "outFiles": [
                "${workspaceRoot}/build/*"
            ]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        }
    ]
}

things should be noticed:

1. `program` field, the value is the path to the complied code entry, instead of the ES6 source code.

2. `sourceMaps` field, when set to `true`, vscode is able to trace back to the ES6 code

3. `outFiles` field, the key to close this issue
  1. Finally

Before debugging the code, you should run the command to compile the ES6 source code

npm run build

Actually, I have recorded these steps, but it is written in my native language Chinese. But there are some screenshots that may help. 👉 The link

Monsoir picture Monsoir on 21 Oct 2017
❤3

I understand that for the ES6+ you went with Babel to pull off debugging inside editor. For a reason I also thought that this issue’s target was a sceneraio leveraging only ES modules from the specs. For that, there seems to be another issue open.

felicio picture felicio on 21 Oct 2017

Below is my config bit, for cases where you’d like to debug a whatever module (entrypoint) that is in editor’s focus.

{
        "name": "Launch via Babel",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
        "runtimeArgs": ["--presets", "env"],
        "program": "${file}"
}
felicio picture felicio on 21 Oct 2017
❤2 🎉1

Thanks to @felicio , show my config below, and all going well:

  1. init a module:
yarn init -y
  1. babel setup
yarn add babel-cli babel-core babel-preset-env --dev

and edit .babelrc:

{
  "presets": ["env"]
}
  1. and my package.json file
{
    "name": "node",
    "version": "1.0.0",
    "description": "尝试玩一玩",
    "main": "index.js",
    "author": "scue",
    "license": "MIT",
    "scripts": {
        "start": "babel-node index.js",
        "debug": "babel-node debug index.js"
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-preset-env": "^1.6.1"
    }
}
  1. and my .vscode/launch.json file
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229
        },
        {
            "type": "node",
            "request": "launch",
            "protocol": "inspector",
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
            "runtimeArgs": ["--presets", "env"]
        }
    ]
}

node -v # v8.7.0

screenshot:

image

scue picture scue on 4 Nov 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

vsccarl picture vsccarl  ·  3Comments
chrisdias picture chrisdias  ·  3Comments
borekb picture borekb  ·  3Comments
trstringer picture trstringer  ·  3Comments
trstringer picture trstringer  ·  3Comments