Problem with colors when parameters contain object

[svallory]

Describe the bug
Logged messages with colors and objects do not display correctly on Debug Console. Messages without objects display correctly.

To Reproduce

import Debugger from 'debug';
const debug = Debugger('cva:init');
debug('Initializing');
debug({ a: 4 });

Log File

Relevant launch configuration

{
      "name": "Attach to Figma",
      "type": "chrome",
      "request": "attach",
      "address": "localhost",
      "port": 9222,
      "targetSelection": "pick",
      "pauseForSourceMap": true,
      "pathMapping": {
        "/file/": "${workspaceRoot}/",
        "../src/": "${workspaceRoot}/src/",
        "src/": "${workspaceRoot}/src/"
      },
      "outFiles": [
        "${workspaceFolder}/build/*.js",
        "${workspaceFolder}/build/*.js.map",
      ],
      "presentation": {
        "hidden": false,
        "group": "Figma",
        "order": 2,
      },
      "internalConsoleOptions": "openOnSessionStart"
    }

VS Code Version: 1.74.2

Additional context

NOTE: I added BEFORE FORMAT and AFTER FORMAT to the debug library to check what it was doing

EDIT

An easier way to reproduce. Type this directly on the debug console:

console.log('%cThis %cWorks %c +1ms', 'color: #00CC00', 'color: inherit', 'color: #00CC00');
console.log('%cThis %cDOES NOT %c +1ms %o', 'color: #00CC00', 'color: inherit', 'color: #00CC00', []);

[connor4312]

This is actually a VS Code bug, in part at least. ANSI color sequences are supported in top level expressions, but not in variables values. If an output has a variablesReference, the value of that variable is shown instead of any output string that might be included (so js-debug always emits an empty string in this case).

I think the best way to deal with this is tweak how we show output in VS Code, showing a non-empty output string if it exists and then pulling the variable and on expansion.

fyi @roblourens might try to tack this today/tomorrow