Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
Chrome内置的JavaScript控制台可以显示颜色吗?
我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?
当前回答
我发现你可以使用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" );
其他回答
我为它创建了一个包。cslog
使用
npm i cslog
像这样使用它
import log from 'cslog'
log.h2("This is heading 2")
log.p("This is colored paragraph")
log.d(person, "Person Info")
你也可以自定义颜色。在这里
你可以试试:
console.log("%cI am red %cI am green", "color: red", "color: green");
输出:
模板系统,有用的,如果你想创建彩色的行文本,而不为每个块创建完整的风格
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`);
几年前,我为自己写了一个非常非常简单的插件:
要添加到你的页面,你所需要做的就是把这个放在头部:
<script src="https://jackcrane.github.io/static/cdn/jconsole.js" type="text/javascript">
然后在JS中:
jconsole.color.red.log('hellllooo world');
该框架有以下代码:
jconsole.color.red.log();
jconsole.color.orange.log();
jconsole.color.yellow.log();
jconsole.color.green.log();
jconsole.color.blue.log();
jconsole.color.purple.log();
jconsole.color.teal.log();
以及:
jconsole.css.log("hello world","color:red;");
对于任何其他css。上面的代码是用以下语法设计的:
jconsole.css.log(message to log,css code to style the logged message)
下面是另一种方法(在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!');
输出: