Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
你可以试试:
console.log("%cI am red %cI am green", "color: red", "color: green");
输出:
其他回答
我写了template-colors-web https://github.com/icodeforlove/Console.js,让我们更容易做到这一点
console.log(c`red ${c`green ${'blue'.bold}.blue`}.green`.red);
使用默认的console.log将很难做到以上这些。
现场互动演示点击这里。
在Chrome & Firefox(+31)中,您可以在console.log消息中添加CSS:
console.log('%c我的天哪!', '背景:#222;颜色:# bada55 ');
同样适用于在同一命令中添加多个CSS。
参考文献
MDN:样式化控制台输出 Chrome:控制台API参考
我最近想解决一个类似的问题,构造了一个小函数,只对我关心的关键字进行着色,这些关键字很容易通过周围的花括号{keyword}识别。
这招很管用:
var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
_.each(splitText, (split) => {
if (/^\{/.test(split)) {
cssRules.push('color:blue');
} else {
cssRules.push('color:inherit')
}
styledText += `%c${split} `
});
console.log(styledText , ...cssRules)
从技术上讲,您可以用switch/case语句替换if语句,以允许根据不同的原因使用多种样式
谷歌对此进行了记录 https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
CSS格式说明符允许您自定义控制台中的显示。使用说明符开始字符串,并给出希望应用的样式作为第二个参数。
一个例子:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
您可以使用自定义样式表为调试器着色。你可以把这段代码放在C:\Documents and Settings<用户名>\Local Settings\Application Data\谷歌\Chrome\用户数据\Default\用户样式表\Custom.css(如果你在WinXP中),但是目录因操作系统不同而不同。
.console-error-level .console-message-text{
color: red;
}
.console-warning-level .console-message-text {
color: orange;
}
.console-log-level .console-message-text {
color:green;
}