Visual Studio Code 调试控制台颜色？答案

【问题标题】：Visual Studio Code Debug Console colors?Visual Studio Code 调试控制台颜色？
【发布时间】：2017-04-20 19:18:52
【问题描述】：

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

【问题讨论】：

标签： node.js visual-studio-code vscode-settings

【解决方案1】：

有关传说和角色扮演，请参阅 @https://stackoverflow.com/a/55493884/3645650。

这里只是一个没有脑子的答案。

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

【讨论】：

【解决方案2】：

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

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

在Mocha 中实现。 32 是颜色代码。您可以在他们的 repo 中找到其他颜色代码和使用示例：https://github.com/mochajs/mocha/blob/9e95d36e4b715380cef573014dec852bded3f8e1/lib/reporters/base.js#L48

或者作为一个日志库你可以使用，例如pinojs + pino-pretty 模块，你的日志输出将显示在这里：

【讨论】：

也适用于 java：System.out.println("\u001b[32mhello stack\u001b[0m"); =>终端中的颜色。

【解决方案3】：

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 中添加了几种新颜色：

为内联值添加了新颜色：

editor.inlineValuesBackground: 调试内联值前景文本的颜色

editor.inlineValuesForeground：调试内联值背景的颜色。

作为提醒，在调试期间会显示内联值以进行调试已注册内联值提供程序的扩展，或者如果设置debug.inlineValues 为true。

【讨论】：

没有背景色吗？我看不到我在强调什么。有什么方法可以改变高亮颜色？

【解决方案4】：

单击 Visual Studio 左下角的设置图标

点击设置

搜索workbench 并在其下单击子标题appearance。然后点击Edit in settings json

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

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

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

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

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

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

【讨论】：

【解决方案5】：

我猜目前最好的方法是将调试输出放到备用目的地：

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

外部终端命令行可以在 VS Code 设置中的以下之一下进一步指定：terminal.external.windowsExec、terminal.external.osxExec 和 terminal.external.linuxExec，默认为您的默认操作系统终端。

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

【讨论】：

externalTerminal 在使用 Jest 扩展调试功能时也显示不带颜色..

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我的设置，彩色步骤：

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

}

【讨论】：

显然在使用 "console": "integratedTerminal" 时这是多余的（没有效果）"outputCapture": "std"
是的，这似乎是真的，因此我已将其从配置示例中删除

【解决方案9】：

添加 --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
  }]
}

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.com/help/how-to-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

【讨论】：