Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
你可以试试:
console.log("%cI am red %cI am green", "color: red", "color: green");
输出:
其他回答
在Chrome & Firefox(+31)中,您可以在console.log消息中添加CSS:
console.log('%c我的天哪!', '背景:#222;颜色:# bada55 ');
同样适用于在同一命令中添加多个CSS。
参考文献
MDN:样式化控制台输出 Chrome:控制台API参考
你可以试试:
console.log("%cI am red %cI am green", "color: red", "color: green");
输出:
实际上,我只是偶然发现了这个,好奇会发生什么,但你实际上可以使用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及之后的所有文本将切换为新颜色。
虽然我还没有在其他浏览器中尝试过这个功能,但我认为值得一提。
我为它创建了一个包。cslog
使用
npm i cslog
像这样使用它
import log from 'cslog'
log.h2("This is heading 2")
log.p("This is colored paragraph")
log.d(person, "Person Info")
你也可以自定义颜色。在这里
我怀疑是否有人会真正看到它,但对于那些想要在同一条线上混合几种颜色的人,我有一个简单的解决方案:
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`);