JavaScript Debug Console mangles output that includes both CSS and Object specifiers

[danrahn]

Issue Type: Bug

1. Launch VS Code with extensions disabled.
2. Create and save a new JavaScript file with the following content:

   console.log('%cTest: %o', 'color: red', { Test : 'object' });
   debugger;

3. Run > Start Debugging with Node.js environment.

4. See that the output in the debug console mangled:

   ▼ Test: {test: 'object'}
    ▼ arg2:{test: 'object'}
       test:'object'
       ▶[[Prototype]]:Object

Combining other specifiers works as expected. With the following file, only the last two are mangled:

const obj = { test : 'object' };

// %c combined with other specifiers
console.log('Red string: %c%s', 'color: red', obj.test);
console.log('Red number: %c%d', 'color: red', 100);
console.log('%cA test object: %s', 'color: red', JSON.stringify(obj));

// %o combined with other specifiers
console.log(obj);
console.log('A test object: %o', obj);
console.log('%d test object: %o', 1, obj);
console.log('%f test object: %o', 1.0, obj);

// %c and %o, but %o is actually a string
console.log('%cA test object: %o', 'color: red', JSON.stringify(obj));

// %c and %o, output mangled
console.log('%cA test object: %o', 'color: red', obj);
console.log('%cA test object%c: %o', 'color: red', 'color: inherit', obj);
debugger;

VS Code version: Code - Insiders 1.66.0-insider (6dca4c1a1f7bb3529074601eb32938526fa9ecc7, 2022-03-04T05:15:52.197Z) OS version: Windows_NT x64 10.0.19042 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|AMD Ryzen Threadripper 2950X 16-Core Processor (32 x 3493)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|63.90GB (29.54GB free)| |Process Argv|--disable-extensions| |Screen Reader|no| |VM|0%|

Extensions disabled

A/B Experiments

``` vsliv695:30137379 vsins829:30139715 vsliv368:30146709 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 pythonvspyl392:30422396 pythontb:30258533 pythonptprofiler:30281269 vshan820:30294714 pythondataviewer:30285072 vscod805cf:30301675 pythonvspyt200:30323110 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30404738 wslgetstartedc:30421358 vsclayoutctrc:30405799 dsvsc009:30440021 pythonvspyt640:30438691 vsbas813:30436447 vscscmwlcmt:30428973 azactmsalcf:30432849 vscgsvidc:30433759 dockersurvey3:30438168 pynewfile477cf:30443520 ```

[weinand]

you are receiving these messages because you are subscribed to this issue. See red arrow:

Press the "Unsubscribe" button to stop receiving notifications.