揭秘前端黑科技：console.log如何输出七彩字体？

2023-12-02 15:42:20

掌控好console.log可以在开发中帮我们解决很多问题，在编写和调试JavaScript代码时，我们经常会使用console.log在控制台输出信息。然而，默认情况下，这些输出的信息总是单调的黑色，这可能会让人觉得很枯燥。

1. 使用CSS样式：

1.1 创建自定义样式表

/* 自定义控制台样式表 */
#console-output {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* 自定义日志颜色 */
.log-error {
  color: red;
}

.log-warning {
  color: orange;
}

.log-info {
  color: blue;
}

.log-debug {
  color: green;
}

1.2 在HTML页面中引用自定义样式表

<head>
  <link rel="stylesheet" href="custom-console-styles.css">
</head>

1.3 在JavaScript代码中使用`console.log`输出带颜色的信息

console.log('%c This is an error message', 'color: red');
console.log('%c This is a warning message', 'color: orange');
console.log('%c This is an info message', 'color: blue');
console.log('%c This is a debug message', 'color: green');

2. 使用自定义日志方法：

2.1 创建自定义日志方法

// 定义一个自定义日志方法
function log(type, message) {
  // 根据日志类型设置不同的颜色
  let color;
  switch (type) {
    case 'error':
      color = 'red';
      break;
    case 'warning':
      color = 'orange';
      break;
    case 'info':
      color = 'blue';
      break;
    case 'debug':
      color = 'green';
      break;
    default:
      color = 'black';
      break;
  }

  // 使用CSS样式输出日志信息
  console.log(`%c ${message}`, `color: ${color}`);
}

2.2 在JavaScript代码中使用自定义日志方法输出带颜色的信息

// 使用自定义日志方法输出错误信息
log('error', 'This is an error message');

// 使用自定义日志方法输出警告信息
log('warning', 'This is a warning message');

// 使用自定义日志方法输出信息信息
log('info', 'This is an info message');

// 使用自定义日志方法输出调试信息
log('debug', 'This is a debug message');