Beautiful JS 控制台日志 - JavaScript

在 JavaScript 开发中，控制台日志是常用的调试工具，它可以帮助开发者更好地理解代码的运行流程及各种变量的值。

然而，浏览器默认的控制台日志输出格式较为简单，难以区别不同类型的信息，也不够美观。本文将介绍一些可以美化控制台日志的 JS 库，以及它们的使用方法。

1. BeautifyConsole

BeautifyConsole 是一个轻量级的控制台日志美化库，可以将控制台输出的对象、数组、字符串等数据类型进行格式化，同时还能为不同的日志类型添加不同的颜色。

使用方法：

1. 引入 BeautifyConsole 库

<script src="path/to/beautifyConsole.js"></script>

2. 初始化 BeautifyConsole

console.beautify();

3. 美化控制台日志

console.log('Hello, world!'); // 打印一条普通的日志
console.debug('debug info'); // 打印一条 debug 日志
console.info('info', { foo: 'bar' }, [1, 2, 3]); // 打印一条 info 日志，并格式化输出对象和数组
console.warn('a warning'); // 打印一条警告日志
console.error('oops!', new Error('an error message')); // 打印一条错误日志，并输出错误对象的信息

效果如下图所示：

2. colorful-console

colorful-console 是另一个比较流行的控制台日志美化库，可以为不同类型的日志添加不同的颜色，让控制台输出更加易读。

使用方法：

1. 引入 colorful-console 库

<script src="path/to/colorfulConsole.js"></script>

2. 美化控制台日志

console.log('%cThis is a blue message', 'color: blue'); // 打印一条带有颜色的日志
console.debug('%cThis is a debug message', 'font-weight: bold'); // 打印一条带有样式的 debug 日志
console.info('%cThis is an info message', 'background: #222; color: #bada55'); // 打印一条带有背景颜色的 info 日志
console.warn('%cThis is a warning message', 'color: orange'); // 打印一条带有颜色的警告日志
console.error('%cThis is an error message', 'color: red'); // 打印一条带有颜色的错误日志

效果如下图所示：

3. console.log-style

console.log-style 是一个基于标签的控制台日志美化库，可以为不同类型的日志添加不同的图标、颜色和样式。

使用方法：

1. 引入 console.log-style 库

<script src="path/to/console.log-style.js"></script>

2. 初始化 console.log-style

// 初始化，可以传入自定义的主题样式
console.theme({
  error: { prefix: '❌', color: 'red', background: 'white' },
  warn: { prefix: '⚠️', color: 'yellow' },
  info: { prefix: '🍃', color: 'green' },
  log: { prefix: '' }
});

// 替换掉 console.log 等基本方法，使用 console.logStyle、console.errorStyle 等代替
console.log = console.logStyle;
console.warn = console.warnStyle;
console.error = console.errorStyle;
console.info = console.infoStyle;

3. 美化控制台日志

console.logStyle('%cThis is a styled log message', 'background-color: #1e90ff; color: white'); // 打印一条自定义样式的 log 日志
console.errorStyle('This is an error message'); // 打印一条带有自定义图标和样式的错误日志
console.warnStyle('This is a warning message'); // 打印一条带有自定义图标和样式的警告日志
console.infoStyle('This is an info message'); // 打印一条带有自定义图标和样式的 info 日志

效果如下图所示：

结语

美化控制台日志不仅能让开发者更加便捷地调试代码，还能提高编码的审美度和效率。本文介绍了三个常用的 JS 库：BeautifyConsole、colorful-console 和 console.log-style，它们各有特色，可以根据个人喜好进行选择和使用。