Weird node.js console.log() output behaviour when printing arrays

Question

I have the following, somewhat simple code in VSCode(Mac OS) which I run in node.js v14.13.1 environment:

let fruits = ['Apple', 'Banana'];
let fruits1 = ['Apple1', 'Banana1'];
console.log(fruits);
console.log(fruits1);

The output behaviour seems very weird to me, it prints either:

(2) ['Apple', 'Banana']

or

(2) ['Apple', 'Banana']
(2) ['Apple1', 'Banana1']

or

(2) ['Apple', 'Banana']
Canceled

I couldn't find any particular pattern of printing (except for first two outputs are printed more often than the third one), so it seems as if it 'randomly decides' what to output.

This code, however, outputs always as expected when executed via Mac terminal(node my_file.js), i.e.:

[ 'Apple', 'Banana' ]
[ 'Apple1', 'Banana1' ]

Is that some kind of VSCode bug, or there is something about printing arrays with console.log() (with strings and integers it works just fine) what I don't take into account?

Answer 1

I have the same problem. I think it is some kind of VSCode bug.
When I print the data in a event callback, console.log behave as expected. But after a while, the main thread exists and console.log output Canceled.

import some modules...

vtgeojson(tiles, { tilesOnly: true })
  .on('data', function (data) {
    featurecollection.features.push(data);
    console.log(data)
  })
  .on('end', function () {
    console.log(featurecollection);
    console.log(featurecollection.features.length);
  })

The problem disappears when I set the breakpoint and print the data line by line.

The problem also disappears when I run the script in the powershell.

Although the console.log is canceled, the data has been successfully pushed into the feature list. The behavior is most likely caused by the vscode terminal or the way that vscode handle the console.log command.

My node version is v12.20.0 and VSCode version is:

Version: 1.51.1 (system setup)
Commit: e5a624b788d92b8d34d1392e4c4d9789406efe8f
Date: 2020-11-10T23:34:32.027Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.17763

I find someone else has a similar problem.
console.log() is “Canceled” when looping unattended

Answer 2

One solution you could try is to convert the array to a string when doing the console.log command:

let fruits = [['Apple', 'Banana'],['Apple', 'Banana']];
console.log(fruits.toString());  // Apple,Banana,Apple,Banana
console.log('' + fruits);  // Apple,Banana,Apple,Banana
console.log(JSON.stringify(fruits));  // [["Apple","Banana"],["Apple","Banana"]]

I like the last one because it keeps this array displayed within brackets, even with multidimensional arrays.

However, one problem I found with this is when working with regular expression, there is addition output lost when converting to a string:

let str = 'xyz';
let pat = /y/;
let res = str.match(pat);
console.log(res);  // ['y', index: 1, input: 'xyz', groups: undefined]
console.log(res.toString());  // y
console.log('' + res);  // y
console.log(JSON.stringify(res));  // ["y"]

I believe this error may be occurring because the debugger is stopping before the output is sent to the debug console? Therefore For another solution, either add an empty line at the end of your code and add a breakpoint there; this seems to allow all the output to be generated when doing a multiple console.logs on arrays. Or, at the end of the code, add:

setTimeout(() => { }, 1000)

Which also seems to be adding enough time to properly output all the console.log of arrays. The advantage to the former is, you can expand the array details in the debug console, until you continue to the end of the code, but the con is you still have to chose to continue the code for it to end. The latter also allows you to expand the details of the object in the output, but only for the duration of the timer.

I also found, you can add either of these to your launch.json file (within the appropriate node configuration object, and don't forget to add a common to either the end the line before and/or the the end of either of these lines depending on where you are inserting):

"console": "integratedTerminal"

Or:

"console": "externalTerminal"

These send the output to either the VS Code terminal pane or an external cmd window.

And finally I also found instead of either of these console command, you can add this to the launch.json:

"outputCapture": "std"

This will keep the output in the debug console. It looks a bit different with color & some other messages, but seems to successfully output arrays.

Answer 3

This seems quite interesting. I have tried running it multiple times and got the same result as output from Chrome's console:

["Apple", "Banana"]
["Apple1", "Banana1"]

The issue could be related either to the version of Node.js you are running on your computer or the terminal on the version of VSCode you have.

Because I tried running it from the VSCode terminal and got the same result: