如果你想给你的终端控制台上色，那么你可以使用npm包粉笔

npm i chalk

在Chrome & Firefox(+31)中，您可以在console.log消息中添加CSS:

console.log('%c我的天哪!'， '背景:#222;颜色:# bada55 ');

同样适用于在同一命令中添加多个CSS。

参考文献

MDN:样式化控制台输出 Chrome:控制台API参考

const coloring = fn => ({ background, color = 'white' }) => (...text) => fn(`%c${text.join('')}`, `color:${color};background:${background}`); const colors = { primary: '#007bff', success: '#28a745', warning: '#ffc107', danger: '#dc3545', info: '#17a2b8', }; const dir = (key = '', value = {}) => { logs.primary(`++++++++++++start:${key}++++++++++++++`); console.dir(value); logs.primary(`++++++++++++end:${key}++++++++++++++`); }; const logs = Object.keys(colors) .reduce((prev, curr) => ({ ...prev, [curr]: coloring(console.log)({ background: colors[curr] }) }), { dir }); logs.success('hello succes'); logs.warning('hello fail');

如果你想给你的终端控制台上色，那么你可以使用npm包粉笔

npm i chalk

默认情况下，很少有内置的控制台方法来显示警告、错误和正常控制台以及特定的图标和文本颜色。

console.log(“console.log”); console.warn(“console.warn”); console.error(“console.error”);

但如果您仍然想应用自己的样式，您可以使用%c与消息和CSS样式规则作为第二个参数。

Console.log ('%cconsole.log'， 'color:绿色;'); console.warn(“% cconsole。警告'，'颜色:绿色;'); console.error(“% cconsole。错误'，'颜色:绿色;');

注意:在运行上述代码段时，请在浏览器控制台中检查结果，而不是代码段结果。

实际上，我只是偶然发现了这个，好奇会发生什么，但你实际上可以使用bash着色标志来设置Chrome输出的颜色:

console.log('\x1b[36m Hello \x1b[34m Colored \x1b[35m World!');
console.log('\x1B[31mHello\x1B[34m World');
console.log('\x1b[43mHighlighted');

输出:

查看这个链接了解颜色标志的工作原理:https://misc.flogisoft.com/bash/tip_colors_and_formatting

基本上用\x1b或\x1b来代替\e。如。\x1b[31m及之后的所有文本将切换为新颜色。

虽然我还没有在其他浏览器中尝试过这个功能，但我认为值得一提。