Visual Studio Code Debug Console colors?

Question

Is there a way to display colors (like in a terminal) in the Debug Console of Visual Studio Code (Version 1.10.2) when debugging node.js code?

Answer 1

I guess so far the best way is to put your debug output into alternate destinations:

In Launch Configuration Attributes the console setting can be set to one of the following: internalConsole (default, the builtin Debug Console) externalTerminal (external cmd window) or integratedTerminal (the VS Code terminal).

The external terminal command line can further be specified in the VS Code Settings under one of the following: terminal.external.windowsExec, terminal.external.osxExec, and terminal.external.linuxExec from the default that is your default os terminal.

Source: VS Code docs, for example for node.js: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes

Answer 2

To output coloured messages from nodejs in visual studio you can use formatted message in console.log method. for example :

console.log('\u001b[' + 32 + 'm' + 'hello stack' + '\u001b[0m')

as implemented in Mocha. 32 is a color code. Other color codes and usage sample you can find in theirs repo: https://github.com/mochajs/mocha/blob/9e95d36e4b715380cef573014dec852bded3f8e1/lib/reporters/base.js#L48

Or as a log library you can use, for example pinojs + pino-pretty module and your log output will be displayed as here :

Answer 3

See @ https://stackoverflow.com/a/55493884/3645650 for lore and roleplay.

Here is just a no brain answer.

	Versions
Tested up to	Visual Studio Code May 2021 (version 1.63)

Text

console.log( "\u001b[1;31m Red message" );
console.log( "\u001b[1;32m Green message" );
console.log( "\u001b[1;33m Yellow message" );
console.log( "\u001b[1;34m Blue message" );
console.log( "\u001b[1;35m Purple message" );
console.log( "\u001b[1;36m Cyan message" );

Background

console.log( "\u001b[1;41m Red background" );
console.log( "\u001b[1;42m Green background" );
console.log( "\u001b[1;43m Yellow background" );
console.log( "\u001b[1;44m Blue background" );
console.log( "\u001b[1;45m Purple background" );
console.log( "\u001b[1;46m Cyan background" );

Reset

console.log( "\u001b[0m Reset text and background color/style to default" );

Example

console.log( "\u001b[1;31m --process: Error" + "\u001b[0m" );

Answer 4

For best results, also avoid opening the console. Here's my config for debugging the current file with Jest:

{
    "type": "node",
    "request": "launch",
    "name": "Jest Test (current)",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": [
        "--config=jest.config.json",
        "--runInBand",
        "${relativeFile}",
    ],
    // The vscode console does not support colors used by Jest output
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
}