Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
默认情况下,很少有内置的控制台方法来显示警告、错误和正常控制台以及特定的图标和文本颜色。
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。错误','颜色:绿色;');
注意:在运行上述代码段时,请在浏览器控制台中检查结果,而不是代码段结果。
其他回答
你可以试试:
console.log("%cI am red %cI am green", "color: red", "color: green");
输出:
下面是另一种方法(在Typescript中),它覆盖console.log函数并检查传递的消息,以便根据消息中的开始标记应用CSS格式。这个方法的一个好处是被调用者不需要使用一些包装console.log函数,他们可以坚持使用普通的console.log(),所以如果这个覆盖消失,该功能将恢复到默认的console.log:
// An example of disabling logging depending on environment:
const isLoggingEnabled = process.env.NODE_ENV !== 'production';
// Store the original logging function so we can trigger it later
const originalConsoleLog = console.log;
// Override logging to perform our own logic
console.log = (args: any) => {
if (!isLoggingEnabled) {
return;
}
// Define some tokens and their corresponding CSS
const parsing = [
{
token: '[SUCCESS]',
css: 'color: green; font-weight: bold;',
},
{
token: '[ERROR]',
css: 'color: red; font-weight: bold;',
},
{
token: '[WARN]',
css: 'color: orange; font-weight: bold;',
},
{
token: '[DEBUG]',
css: 'color: blue;',
},
];
// Currently only supports console.log(...) with a single string argument.
if (typeof args === 'string') {
const message: string = args;
let formattedArgs: string[] = [];
for (let i = 0; i < parsing.length; i += 1) {
const parser = parsing[i];
if (args.startsWith(parser.token)) {
formattedArgs = [`%c${message.substring(parser.token.length + 1, message.length)}`, parser.css];
break;
}
}
originalConsoleLog.apply(console, formattedArgs);
} else {
originalConsoleLog.apply(console, args);
}
};
使用示例:
console.log('[ERROR] Something went wrong!');
输出:
默认情况下,很少有内置的控制台方法来显示警告、错误和正常控制台以及特定的图标和文本颜色。
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。错误','颜色:绿色;');
注意:在运行上述代码段时,请在浏览器控制台中检查结果,而不是代码段结果。
从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)
如果你想给你的终端控制台上色,那么你可以使用npm包粉笔
npm i chalk