Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
更新:
去年我为自己写了一个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。查看浏览器控制台中的输出。
其他回答
我写了一个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值来验证颜色
我发现你可以使用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" );
模板系统,有用的,如果你想创建彩色的行文本,而不为每个块创建完整的风格
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`);
如果你想给你的终端控制台上色,那么你可以使用npm包粉笔
npm i chalk
从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)