美化控制台日志——让你的 `console.log` 变得更炫酷

最新推荐文章于 2025-04-22 14:43:27 发布

原创

最新推荐文章于 2025-04-22 14:43:27 发布 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

背景故事

在一次开发过程中，我意识到控制台日志虽然实用，但其单一的输出样式常常让调试工作变得乏味。为了提升调试的效率和视觉体验，我决定设计一个美化控制台输出的工具。最终，这个工具不仅在我的个人项目中发挥了作用，还引起了团队的关注。领导对这种日志美化的效果非常满意，并建议将其整合到我们的公共工具库中，以便团队其他成员使用。

本文将详细介绍如何实现一个美化控制台输出的工具，并展示如何在 Vue 3 项目中应用这一技术。
在这里插入图片描述

`console` 简介

console 是 JavaScript 内置的调试工具对象，提供了多种方法用于输出日志、警告和错误信息。常用的 console 方法包括：

console.log()：输出一般信息。
console.info()：输出信息，样式与 console.log 类似。
console.warn()：输出警告信息，通常带有黄色背景。
console.error()：输出错误信息，通常带有红色背景。
console.table()：以表格形式展示数据，适合显示数组和对象。

例如，使用 console.table() 输出员工信息列表：

const employees = [
    {
    name: 'Alice', position: 'Developer', age: 30 },
    {
    name: 'Bob', position: 'Designer', age: 25 }
];
console.table(employees);

在这里插入图片描述

虽然这些方法提供了基本的输出功能，但它们的样式和信息展示方式较为单一。为了让日志输出更加直观和美观，我们可以利用 console.log 的 CSS 样式功能来实现自定义样式。

技术方案

console.log 支持多种参数类型，包括字符串、数字、对象等。更重要的是，它支持占位符，尤其是 %c 占位符可以用来应用 CSS 样式，从而让日志信息更具可读性。例如：

console.log('%c Stylish Log Message', 'color: blue; font-size: 16px;');

实现美化控制台日志

下面我们实现一个 prettyLog 方法，用于美化控制台日志的输出：

// src/utils/prettyLog.ts

const isEmpty = (value: any) => {
   
  return value == null || value === undefined || value === '';
};

const prettyPrint = (title: string, text: string, color: string) => {
   
  console.log(
    `%c ${
     title} %c ${
     text} %c`,
    `background: