logo标签列表

JavaScript控制台中的颜色

javascriptgoogle-chromeconsolegoogle-chrome-devtools
1196

Chrome内置的JavaScript控制台能够显示颜色吗？

我希望错误消息以红色显示，警告消息以橙色显示，而console.log中的消息以绿色显示。这可能吗？

71
只需使用console.error()代替console.log，即可在红色（默认）中获得错误提示。请注意，此操作仅为翻译，不包含任何解释或其他信息。 - nrabinowitz
28
console.warn() 也可以使用橙色的“警告”图标，但文本本身仍然是黑色。 - Charlie Schliesser
5
在Chrome浏览器中，特别是在滚动控制台时，console.log("%c", "background: red;padding: 100000px;");会导致非常奇怪的行为。 - user6560716
1
在控制台中显示颜色的最简单的方法是： - Suhaib Janjua
1
我写了一个用于给日志着色的小型软件包：console colors。 - vsync
30个回答
28

只需要在您的消息前面添加%c符号和样式，然后跟随您的消息即可。

console.log('%c Hello World','color:red;border:1px solid dodgerblue');

如果您正在使用Node并希望在终端中着色控制台，则可以使用转义序列，例如

console.log('\x1b[33m%s\x1b[0m', 'hi!')

如果你想将控制台颜色设置为黄色，可以使用chalk等库来实现。

const chalk = require('chalk') 
console.log(chalk.yellow('hi!'))
问题是关于Chrome开发者控制台的。Chalk在Chrome开发者控制台上无法工作。 - Meera Datey
18
1
谷歌已经记录了这个 https://developer.chrome.com/devtools/docs/console#styling-console-output-with-css。现在那里没有提到控制台样式。 - ChrisJJ
1
这里是 https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css - ChrisJJ
现在它已经到这里了：https://developer.chrome.com/docs/devtools/console/format-style/ - Enrico
17

你可以尝试：

console.log("%cI am red %cI am green", "color: red", "color: green");

输出结果：

这里输入图片描述

2
这看起来像是可以工作的，但你的图片是错误的。此外，在这篇帖子中有数百万个与你类似的答案^^ - Crocsx
16

我发现您可以使用ANSI颜色代码来制作彩色日志，这使得在调试中更容易找到特定的消息。试一试：

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" );
3
在我的终端中，不知何故，在添加了你的一个示例后，它不仅对该特定日志进行着色，而且对其后的所有日志都进行着色，无论我是否使用相同的颜色方案。请问需要翻译哪些内容呢？ - George Linardis
@Geroge Linardis：添加 "\x1b[0m" 将结束着色，如下面的帖子所示：https://dev59.com/-Gs05IYBdhLWcg3wAdST#60602339例如，可以按以下方式打印绿色消息：console.log("\u001b[1;32m绿色消息\x1b[0m"); - Sascha Klatt
14

模板系统，如果您想创建彩色行文本而不必为每个块创建完整的样式，则非常有用。

var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cMagenta %cRed %cBlue', `${tpl} magenta`, `${tpl} Red`,`${tpl} #4274fb`);

彩色控制台日志

9

看看这个：

控制台中的动画，加上CSS

(function() {
  var frame = 0;
  var frames = [
    "This",
    "is",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!"
  ];
  var showNext = () => {
    console.clear();
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    console.log(
      `%c ${frames[frame]}`,
      "background: red; color: white; font-size: 25px; padding: 3px 40%;"
    );
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    setTimeout(
      showNext,
      frames[frame] === "SPARTA!" || frames[frame] === " " ? 100 : 1500
    );
    // next frame and loop
    frame++;
    if (frame >= frames.length) {
      frame = 0;
    }
  };
  showNext();
})();

https://jsfiddle.net/a8y3jhfL/

您可以在每个帧中粘贴ASCII以观看ASCII动画。

1
这很简单，但结果非常好！LOL - Luis Lobo
9

我认为不会有人真正看到这个，但是我有一个简单的解决方案，适用于那些想在同一行中混合多种颜色的人：

export enum Colors {
    Black = '\033[30m',
    Red = '\x1b[31m',
    Green = '\x1b[32m',
    Yellow = '\x1b[33m',
    Blue = '\033[34m',
    Magenta = '\033[35m',
    Cyan = '\033[36m',
    White = '\033[37m'
}


function color(text: string, color: color: Colors) {
    return `${color}${text}\x1b[0m`;
}


console.log(`This is ${color('green text', Colors.Green)} but this is black. This is red ${color('red', Colors.Red)} etc`);
我看到了，谢谢！这里有一个链接，可以为您提供更多类似的好东西：使Console.log()输出在浏览器中具有彩色和时尚的效果...。 - Rene van der Lende
8
如果您想要更加现代化，您也可以使用模板字面量，以下是一个简单和复杂的示例；使用模板字面量可以让您使用表情符号、变量以及更多酷炫的功能。 简单示例 enter image description here 复杂示例 enter image description here 代码 

/*
* Simple example
*/

console.log(
  `%c[line 42] | fooBar.js myFunc() -> YOU DEBUG MESSAGE HERE `,
  ` color:white; background-color:black; border-left: 1px solid yellow; padding: 4px;`
);

/*
* Complex example
*/

const path = `../this/goes/to/my/dir`;

const line = 42;

const ref = `myFunc()`;

const message = `A FANCY DEBUG MESSAGE  `;

const styling = `
    color:white;
    background-color:black;
    border-left: 1px solid yellow;
    padding: 8px;
    font-weight: 600;
    font-family: Courier;
`;

console.log(
    `%c ✨ F A N C Y - L O G G E R ✨`,
    `${styling} font-size: 16px; border-top: 1px solid yellow;`
);

console.log(
    `%c  Path: ${path} `,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
    `%c  Line: ${line}`,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
    `%c  Ref: ${ref} `,
    `${styling} font-size: 10px; font-weight: 100;`
);

console.log(
  `%c  Message: ${message} `,
  `${styling} font-size: 12px; border-bottom: 1px solid yellow;`
);

6
为了链接跨越多行的CSS3样式，您可以像这样操作：
var styles = [
    'background: linear-gradient(#D33106, #571402)'
    , 'border: 1px solid #3E0E02'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');

console.log('%c a spicy log message ?', styles);

结果

enter image description here

查看更多：https://coderwall.com/p/fskzdw/colorful-console-log

干杯。

6

从Chrome 60开始，他们在编写console.info时删除了蓝色文本颜色的功能，并对控制台API进行了许多更改。

如果您在es6模式下使用反引号``作为标识符（称为模板字符串）在console.log()中编写字符串文字，则可以按以下方式着色控制台输出。

console.log(`%cToday date=>%c${new Date()}`,`color:#F74C2F`, `color:green`);
// output :Today date (in red color) => Date (in green color)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接