Visual Studio Code Debug Console colors?

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?

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:

[To see links please register here]

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

<!-- language: lang-js -->

{
"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",
}

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][1]. 32 is a color code. Other color codes and usage sample you can find in theirs repo:

[To see links please register here]

[![enter image description here][2]][2]

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


[![enter image description here][5]][5]


[1]:

[To see links please register here]

[2]:

[3]:

[To see links please register here]

[4]:

[To see links please register here]

[5]:

My Setup, coloured steps:

I think the main attribute to the colour here is `--format=node_modules/cucumber-pretty`

{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:

[To see links please register here]

"version": "0.2.0",
"configurations": [

{
"type": "node",
"request": "launch",
"console": "integratedTerminal",
"name": "Cucumber",
"program": "${workspaceFolder}/tests/cucumberjs/node_modules/cucumber/bin/cucumber-js",
"cwd": "${workspaceFolder}/tests/cucumberjs",
"args": [
"--tags=@luke",
"--format=node_modules/cucumber-pretty"
]
}
]
}

Adding the `--colors` argument worked for me. (I'm using jest).

```
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"args": ["--colors"],
"runtimeArgs": [
"--inspect-brk",
"${workspaceRoot}/node_modules/.bin/jest",
"--runInBand"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229
}]
}
```

Try using "colors" package from npm. It is very easy to use and you can use features like bold and underline as well. Here is the url for it's documentation:-

[To see links please register here]

Really quick and dirty for Java console from a Java noob:

private static void debugLog(String msg) {
if (msg.indexOf("Exception") > -1) {
System.out.println("\u001b[31m" + msg + "\u001b[0m");
} else {
System.out.println("\u001b[32m" + msg + "\u001b[0m");
}
}

v1.45 is adding a bunch of debug theme colors, see

[To see links please register here]

`debugView.exceptionLabelForeground`: Foreground color for a label shown in the CALL STACK view when the debugger breaks on an exception

- `debugView.exceptionLabelBackground`: Background color for a label shown in the CALL STACK view when the debugger breaks on an exception

- `debugView.stateLabelForeground`: Foreground color for a label in the CALL STACK view showing the current session's or thread's state

- `debugView.stateLabelBackground`: Background color for a label in the CALL STACK view showing the current session's or thread's state

- `debugView.valueChangedHighlight`: Color used to highlight value changes in the debug views (ie. in the Variables view)

- `debugTokenExpression.name`: Foreground color for the token names shown in debug views (ie. the Variables or Watch view)

- `debugTokenExpression.value`: Foreground color for the token values shown in debug views

- `debugTokenExpression.string`: Foreground color for strings in debug views

- `debugTokenExpression.boolean`: Foreground color for booleans in debug views

- `debugTokenExpression.number`: Foreground color for numbers in debug views

- `debugTokenExpression.error`: Foreground color for expression errors in debug views

---------------------------

And in v1.46 ([v1.46 release notes][1]), some debug console themeable items are being added:

* `debugConsole.infoForeground`: Foreground color for info messages in debug console
* `debugConsole.warningForeground`: Foreground color for warning messages in debug console
* `debugConsole.errorForeground`: Foreground color for error messages in debug console
* `debugConsole.sourceForeground`: Foreground color for source filenames in debug console
* `debugConsoleInputIcon.foreground`: Foreground color for debug console input marker icon

--------------

Specific to inline values displayed during debugging (not in the debug console but the variable values shown at the end of lines within the code), a couple of new colors are being added to v1.57:

> New colors were added to theme the inline values:
>
> * `editor.inlineValuesBackground`: color for the debug inline value foreground text
> * `editor.inlineValuesForeground`: color for the debug inline value background.
>
> As a reminder inline values are shown during debugging for debug
> extensions that have inline value providers registered or if the
> setting `debug.inlineValues` is `true`.


[1]:

[To see links please register here]

Click on Settings Icon on bottom left of Visual Studio

[![Settings Visual Studio][1]][1]


Click on Settings

[![enter image description here][2]][2]

Search for `workbench` and under that, click on the sub-heading `appearance`.
Then click on `Edit in settings json`

[![Search workbench][3]][3]

Scroll down, and add the following code in the end:


"workbench.colorCustomizations": {

"debugConsole.infoForeground": "#00ff66"
}

Change the color code as per your choice.

[![enter image description here][4]][4]

Boom! Every "info" logs are in green color now!

If you want to change for error, warn, etc logs, just add the following under `"workbench.colorCustomizations": { ... }`

Refer this answer for what to add :

[To see links please register here]

[1]:

[2]:

[3]:

[4]: