Visual Studio 代码调试控制台颜色？

Question

在调试 node.js 代码时，有没有办法在 Visual Studio 代码（版本 1.10.2）的调试控制台中显示颜色（就像在终端中一样）？

Answer 1

我想目前为止最好的方法是将调试输出放入备用目的地：

在启动配置属性中，console 设置可以设置为以下之一：internalConsole（默认，内置调试控制台）externalTerminal（外部 cmd window) 或 integratedTerminal（VS 代码终端）。

可以在 VS 代码设置中进一步指定外部终端命令行，位于以下选项之一下：terminal.external.windowsExec、terminal.external.osxExec 和 terminal.external.linuxExec（默认为您的默认设置） os 终端机。

来源：VS Code 文档，例如 node.js：https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes

Answer 2

为获得最佳效果，也请避免打开控制台。这是我使用 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",
}

Answer 3

要在 visual studio 中从 nodejs 输出彩色消息，您可以在 console.log 方法中使用格式化消息。例如：

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

在 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

中实施

或者您可以使用日志库，例如 pinojs + pino-pretty 模块，您的日志输出将显示如下：

Answer 4

我的设置，彩色步骤：

我认为这里颜色的主要属性是--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

v1.45 正在添加一堆调试主题颜色，参见 https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#new-debug-theme-colors

debugView.exceptionLabelForeground：当调试器因异常中断时 CALL STACK 视图中显示的标签的前景色

debugView.exceptionLabelBackground：当调试器因异常中断时 CALL STACK 视图中显示的标签的背景颜色
debugView.stateLabelForeground：显示当前会话或线程状态的 CALL STACK 视图中标签的前景色
debugView.stateLabelBackground：显示当前会话或线程状态的 CALL STACK 视图中标签的背景颜色
debugView.valueChangedHighlight：用于在调试视图（即变量视图）中突出显示值更改的颜色
debugTokenExpression.name：调试视图（即变量或观察视图）中显示的令牌名称的前景色
debugTokenExpression.value：调试视图中显示的令牌值的前景色
debugTokenExpression.string: 调试视图中字符串的前景色
debugTokenExpression.boolean：调试视图中布尔值的前景色
debugTokenExpression.number：调试视图中数字的前景色
debugTokenExpression.error: 调试视图中表达式错误的前景色

并且在 v1.46 (v1.46 release notes) 中，添加了一些调试控制台主题项目：

debugConsole.infoForeground: 调试控制台中信息消息的前景色
debugConsole.warningForeground: 调试控制台中警告消息的前景色
debugConsole.errorForeground: 调试控制台中错误消息的前景色
debugConsole.sourceForeground: 调试控制台中源文件名的前景色
debugConsoleInputIcon.foreground: 调试控制台输入标记图标的前景色

特定于调试期间显示的内联值（不是在调试控制台中，而是在代码行末尾显示的变量值），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.

Answer 6

添加 --colors 参数对我有用。（我在开玩笑）。

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

Answer 7

尝试使用 npm 中的“colors”包。它非常易于使用，您还可以使用粗体和下划线等功能。这是它的文档的 url：- https://www.npmjs.com/package/colors

Answer 8

对于来自 Java 菜鸟的 Java 控制台来说真的又快又脏：

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");
  }
}

Answer 9

请参阅@了解知识和角色扮演。

这里只是一个无脑的回答。

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

正文

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" );

背景

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" );

重置

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

例子

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

Answer 10

点击 Visual Studio

左下角的设置图标

点击设置

搜索 workbench 并在其下单击 sub-heading appearance。然后点击Edit in settings json

向下滚动，最后添加如下代码：

"workbench.colorCustomizations": {
    
        "debugConsole.infoForeground": "#00ff66"
    }

根据您的选择更改颜色代码。

轰！现在每个“信息”日志都是绿色的！

如果要更改错误、警告等日志，只需在 "workbench.colorCustomizations": { ... }

下添加以下内容

请参阅此答案以了解要添加的内容：https://whosebug.com/a/61525127/9420335

Answer 11

console.log("\u001b[1;32m" + 'This is your message!!!' + "\u001b[0m"); //Green message with escape
    
console.log("\u001b[1;31m" + 'This is your message!!!' + "\u001b[0m"); //Red message with escape

Answer 12

这是我根据此处的答案（以及一些谷歌搜索）编写的一个小实用程序：

export const colored_console = {
  /**
   * @param color red | green | yellow | blue | purple | cyan | red_bg | green_bg | blue_bg | purple_bg | cyan_bg | yellow_bg | white_bg
   * @param args things you want to log
   */
  log: function(color, ...args) {
    // adjust text color
    if      (color === 'red'      ) { console.log(`\u001b[31m`, ...args, `\u001b[0m`) }
    else if (color === 'green'    ) { console.log(`\u001b[32m`, ...args, `\u001b[0m`) }
    else if (color === 'yellow'   ) { console.log(`\u001b[33m`, ...args, `\u001b[0m`) }
    else if (color === 'blue'     ) { console.log(`\u001b[34m`, ...args, `\u001b[0m`) }
    else if (color === 'purple'   ) { console.log(`\u001b[35m`, ...args, `\u001b[0m`) }
    else if (color === 'cyan'     ) { console.log(`\u001b[36m`, ...args, `\u001b[0m`) }
    // adjust bg color
    else if (color === 'red_bg'   ) { console.log(`\u001b[41m`, ...args, `\u001b[0m`) }
    else if (color === 'blue_bg'  ) { console.log(`\u001b[44m`, ...args, `\u001b[0m`) }
    else if (color === 'purple_bg') { console.log(`\u001b[45m`, ...args, `\u001b[0m`) }
    else if (color === 'cyan_bg'  ) { console.log(`\u001b[46m`, ...args, `\u001b[0m`) }
    // adjust text and bg color for better visibility
    else if (color === 'green_bg' ) { console.log(`\u001b[42m\u001b[34m`, ...args, `\u001b[0m`) }
    else if (color === 'yellow_bg') { console.log(`\u001b[43m\u001b[34m`, ...args, `\u001b[0m`) }
    else if (color === 'white_bg' ) { console.log(`\u001b[47m\u001b[34m`, ...args, `\u001b[0m`) }
    // if you didn't specify a color, log everything with default color
    else                            { console.log(color, ...args) }
  }
}

...这里有一些我认为有用的进一步阅读：

Google Search: ANSI colors（查看图片结果）

Wikipedia: ANSI escape code

Visual Studio 代码调试控制台颜色？

Visual Studio Code Debug Console colors?

node.js

visual-studio-code

vscode-settings

正文

背景

重置

例子