Visual Studio Code调试控制台颜色？

Question

Visual Studio Code调试控制台颜色？

node.jsvisual-studio-code

43

在调试 node.js 代码时，是否有一种方法可以在 Visual Studio Code（版本1.10.2）的调试控制台中显示颜色（就像在终端中一样）？

- Gyuri

13个回答

21

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

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

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

作为日志库，您可以使用例如pinojs + pino-pretty模块，这样您的日志输出将显示如下:

- Nigrimmist

2

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

15

我认为目前最好的方法是将您的调试输出放入备选目标：

在启动配置属性中，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

- Gyuri

1

当使用Jest扩展调试功能时，externalTerminal也会以无色显示它。 - Norfeldt

8

为了获得最佳效果，请避免打开控制台。以下是我的配置，用于使用 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",
}

- Scott Nedderman

8

v1.45新增了许多调试主题颜色，详见此处

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版本说明)，一些调试控制台可主题化项正在添加：

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

针对调试过程中显示的行内值（不是在调试控制台中，而是在代码末尾显示的变量值），v1.57中添加了几种新颜色：

新增颜色用于主题化内联值：

editor.inlineValuesBackground：用于调试内联值前景文本的颜色。

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

提醒一下，内联值是在调试时显示的，如果已经注册了内联值提供程序或设置 debug.inlineValues 为 true。

- Mark

2

有没有关于背景颜色的设置？我看不到我正在突出显示的内容。有没有办法改变突出显示的颜色？ - Michael Tolsma

6

点击 Visual Studio 左下方的设置图标

点击设置

搜索 workbench，然后在下面的子标题 appearance 下点击。然后点击 Edit in settings json。

滚动到页面底部，在末尾添加以下代码：

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

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

砰！现在所有“info”日志都以绿色显示！

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

请参考此答案中需要添加的内容：https://dev59.com/11cP5IYBdhLWcg3w_ex2#61525127

- Akshay Chopra

2

我的设置，带有颜色的步骤：

我认为这里颜色的主要属性是--format=node_modules/cucumber-pretty

"Original Answer"翻译成"最初的回答"

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

}

- Luke Bennett

1

显然，当使用"console": "integratedTerminal"时，这是多余的（没有效果）"outputCapture": "std"。 - Evgeny

是的，这似乎是真的，因此我已经从配置示例中将其删除。 - Luke Bennett

2

对我来说，添加--colors参数起作用了。（我正在使用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
  }]
}

- csalazar

1

请尝试使用来自npm的“colors”软件包。它非常易于使用，并且您还可以使用加粗和下划线等功能。这是其文档的网址：https://www.npmjs.com/package/colors。

- Krishna Saxena

1

我是一个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");
  }
}

- Murrah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amarinediary · Accepted Answer

请参见https://dev59.com/11cP5IYBdhLWcg3w_ex2#55493884了解相关的传说和角色扮演。

这里只是一个毫无头脑的答案。

	版本
测试至	Visual Studio Code 2021年5月版 (版本`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" );