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

v1.45 is adding a bunch of debug theme colors, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#new-debug-theme-colors

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), 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

Answer 4

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: https://go.microsoft.com/fwlink/?linkid=830387
"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"
        ]
    }
]

}

Answer 5

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:- https://www.npmjs.com/package/colors

Answer 6

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