Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
colors = {
reset: '\033[0m',
//text color
black: '\033[30m',
red: '\033[31m',
green: '\033[32m',
yellow: '\033[33m',
blue: '\033[34m',
magenta: '\033[35m',
cyan: '\033[36m',
white: '\033[37m',
//background color
blackBg: '\033[40m',
redBg: '\033[41m',
greenBg: '\033[42m',
yellowBg: '\033[43m',
blueBg: '\033[44m',
magentaBg: '\033[45m',
cyanBg: '\033[46m',
whiteBg: '\033[47m'
}
console.log('\033[31m this is red color on text');
console.log('\033[0m this is reset');
console.log('\033[41m this is red color on background');
其他回答
旧版本的Chrome不允许你让console.log()以编程方式显示特定的颜色,但是调用console.error()会在错误行上放一个红色的X图标,并使文本变成红色,而console.warn()会让你变成黄色!图标。
然后,您可以使用控制台下面的All、Errors、Warnings和Logs按钮筛选控制台条目。
Firebug支持控制台的自定义CSS。从2010年开始,Chrome支持已经添加到Chrome 24。
console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
'more text');
当%c出现在第一个参数中的任何位置时,下一个参数将用作设置控制台行样式的CSS。进一步的参数被连接起来(一如既往)。
colors = {
reset: '\033[0m',
//text color
black: '\033[30m',
red: '\033[31m',
green: '\033[32m',
yellow: '\033[33m',
blue: '\033[34m',
magenta: '\033[35m',
cyan: '\033[36m',
white: '\033[37m',
//background color
blackBg: '\033[40m',
redBg: '\033[41m',
greenBg: '\033[42m',
yellowBg: '\033[43m',
blueBg: '\033[44m',
magentaBg: '\033[45m',
cyanBg: '\033[46m',
whiteBg: '\033[47m'
}
console.log('\033[31m this is red color on text');
console.log('\033[0m this is reset');
console.log('\033[41m this is red color on background');
更新:
去年我为自己写了一个JavaScript库。它还包含其他特性,例如调试日志的冗长性,还提供了一个导出日志文件的下载日志方法。看看JS Logger库和它的文档。
我知道现在回答有点晚,但由于OP要求在控制台获得不同选项的自定义颜色消息。每个人都在每个console.log()语句中传递颜色样式属性,这会在代码中创建复杂性,使读者感到困惑,也会损害代码的整体观感。
我的建议是写一个函数,用很少的预定颜色(例如成功,错误,信息,警告,默认颜色),这些颜色将根据传递给函数的参数应用。
它提高了代码的可读性,降低了代码的复杂性。它太容易维护,并根据您的需要进一步扩展。
下面给出的是一个JavaScript函数,您必须编写一次,然后使用它 一次又一次。
function colorLog(message, color) {
color = color || "black";
switch (color) {
case "success":
color = "Green";
break;
case "info":
color = "DodgerBlue";
break;
case "error":
color = "Red";
break;
case "warning":
color = "Orange";
break;
default:
color = color;
}
console.log("%c" + message, "color:" + color);
}
输出:
默认颜色是黑色,在这种情况下,您不必传递任何关键字作为参数。在其他情况下,您应该传递成功、错误、警告或info关键字以获得所需的结果。
这是正在工作的JSFiddle。查看浏览器控制台中的输出。
是的,只要在你的消息和风格后面加上%c符号。
console.log('%c Hello World','color:red;border:1px solid dodgerblue');
如果您正在使用节点,并希望在终端中为控制台着色,那么您可以使用转义序列,如
console.log('\x1b[33m%s\x1b[0m', 'hi!')
将控制台颜色调成黄色,否则你可以用粉笔一样的库来给控制台上色吗
const chalk = require('chalk')
console.log(chalk.yellow('hi!'))
我写了一个npm模块,提供了通过的可能性:
自定义颜色-文本和背景; 前缀——帮助识别源代码,如[MyFunction] 类型——像警告、成功、信息和其他预定义的消息类型
https://www.npmjs.com/package/console-log-plus
输出(带有自定义前缀):
clp({
type: 'ok',
prefix: 'Okay',
message: 'you bet'
});
clp({
type: 'error',
prefix: 'Ouch',
message: 'you bet'
});
clp({
type: 'warning',
prefix: 'I told you',
message: 'you bet'
});
clp({
type: 'attention',
prefix: 'Watch it!',
message: 'you bet'
});
clp({
type: 'success',
prefix: 'Awesome!',
message: 'you bet'
});
clp({
type: 'info',
prefix: 'FYI',
message: 'you bet'
});
clp({
type: 'default',
prefix: 'No fun',
message: 'you bet'
});
输出(不带自定义前缀):
输入:
clp({
type: 'ok',
message: 'you bet'
});
clp({
type: 'error',
message: 'you bet'
});
clp({
type: 'warning',
message: 'you bet'
});
clp({
type: 'attention',
message: 'you bet'
});
clp({
type: 'success',
message: 'you bet'
});
clp({
type: 'info',
message: 'you bet'
});
clp({
type: 'default',
message: 'you bet'
});
为了确保用户不会呈现无效的颜色,我还编写了一个颜色验证器。它将通过名称、十六进制、rgb、rgba、hsl或hsla值来验证颜色