Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
我怀疑是否有人会真正看到它,但对于那些想要在同一条线上混合几种颜色的人,我有一个简单的解决方案:
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`);
其他回答
下面是另一种方法(在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!');
输出:
实际上,我只是偶然发现了这个,好奇会发生什么,但你实际上可以使用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及之后的所有文本将切换为新颜色。
虽然我还没有在其他浏览器中尝试过这个功能,但我认为值得一提。
我最近想解决一个类似的问题,构造了一个小函数,只对我关心的关键字进行着色,这些关键字很容易通过周围的花括号{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语句,以允许根据不同的原因使用多种样式
是的,只要在你的消息和风格后面加上%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包粉笔
npm i chalk