定制console.log的样式

在浏览器环境里，你能够借助 CSS 样式来自定义 console.log 输出内容的外观。具体做法是在 console.log 里添加 %c 占位符，接着在后面的参数中传入对应的 CSS 样式字符串。

下面有几个具体的示例，展示了如何定制 console.log 的样式：

// 基础的彩色文本
console.log('%c这是红色文字', 'color: red');
console.log('%c这是蓝色文字', 'color: blue');

// 背景高亮
console.log('%c这是带黄色背景的文字', 'background: yellow; color: black');

// 字体样式
console.log('%c这是大号粗体文字', 'font-size: 24px; font-weight: bold');

// 综合样式
console.log('%c这是一个带有多种样式的消息', 'color: white; background: purple; font-size: 16px; padding: 5px; border-radius: 5px');

// 多行样式
console.log('%c第一行%c第二行', 'color: green; font-size: 18px', 'color: orange; font-size: 14px');

// 自定义图标
console.log('%c🐱 这是一只小猫图标和文字', 'font-size: 16px');

在浏览器的控制台中运行这些代码之后，你就能看到带有不同样式的输出内容了。

你可以依据自身需求，灵活搭配各类 CSS 属性，像 color（文字颜色）、background（背景色）、font-size（字体大小）、font-weight（字体粗细）、padding（内边距）、border-radius（边框圆角）等，从而打造出独具个性的控制台输出样式。

除了使用 %c 占位符，还有其他几种方法可以自定义 console.log 的输出样式或行为。

1. 使用控制台特定的方法（如 console.group、console.table）

控制台内置了多种具有特殊格式的方法，这些方法能让输出内容更加清晰易读：

// 分组输出
console.group("用户信息");
console.log("姓名: 张三");
console.log("年龄: 30");
console.groupEnd();

// 表格形式输出
const users = [
  { name: "张三", age: 30 },
  { name: "李四", age: 25 }
];
console.table(users);

// 输出带有时间戳的信息
console.time("操作耗时");
// 模拟操作
setTimeout(() => {
  console.timeEnd("操作耗时");
}, 1000);

2. 重写 console.log 函数

你可以自定义 console.log 函数，为其添加统一的样式或者额外的功能：

// 备份原始的 console.log
const originalLog = console.log;

// 自定义带有前缀的日志
console.log = function(...args) {
  originalLog.apply(console, ["%c[自定义日志] ", "color: green; font-weight: bold", ...args]);
};

// 使用自定义日志
console.log("这是一条自定义日志");

3. 使用 Unicode 字符和 Emoji

通过在日志中添加 Emoji 或者 Unicode 图标，能让日志更加直观：

console.log("✅ 操作成功");
console.log("⚠️ 警告: 此操作有风险");
console.log("❌ 错误: 参数无效");

4. 自定义错误和警告样式

除了 console.log，你还可以对 console.error、console.warn 等方法进行样式定制：

console.error = function(message) {
  console.log("%c🚫 " + message, "color: red; font-weight: bold");
};

console.warn = function(message) {
  console.log("%c⚠️ " + message, "color: orange; font-weight: bold");
};

// 使用自定义错误和警告
console.error("文件未找到");
console.warn("内存使用过高");

5. 结合 CSS 变量

在浏览器控制台中，你可以先定义 CSS 变量，然后在 %c 中引用这些变量：

// 定义样式变量
const styles = {
  success: "color: green; font-weight: bold",
  error: "color: red; background: yellow; padding: 2px"
};

// 使用样式变量
console.log("%c操作成功!", styles.success);
console.log("%c发生错误!", styles.error);

总结下API列表：

console 对象提供了一组用于调试和日志记录的 API。以下是常见的 console API 列表：

1. 日志方法

   • console.log()：用于输出普通日志信息。
   • console.info()：用于输出信息性消息（与 console.log 类似）。
   • console.warn()：用于输出警告信息。
   • console.error()：用于输出错误信息。
   • console.debug()：用于输出调试信息（在某些浏览器中与 console.log 相同）。

2. 断言方法

   • console.assert(condition, message, ...args)：如果条件为假，则输出错误信息。

3. 清除方法

   • console.clear()：清除控制台。

4. 计时方法

   • console.time(label)：开始一个计时器。
   • console.timeEnd(label)：结束计时器并输出时间。
   • console.timeLog(label, ...args)：记录计时器的当前时间。

5. 计数方法

   • console.count(label)：记录 label 被调用的次数。
   • console.countReset(label)：重置 label 的计数。

6. 分组方法

   • console.group(label)：创建一个新的日志分组。
   • console.groupCollapsed(label)：创建一个折叠的日志分组。
   • console.groupEnd()：结束当前日志分组。

7. 表格方法

   • console.table(data, columns)：以表格形式输出数据。

8. 追踪方法

   • console.trace()：输出堆栈追踪信息。

9. 其他方法

   • console.dir(obj)：以可展开的形式输出一个对象。
   • console.dirxml(obj)：输出一个对象的 XML/HTML 表示。
   • console.profile(label)：开始性能分析。
   • console.profileEnd(label)：结束性能分析。
   • console.timeStamp(label)：添加一个时间戳。

以下是一些示例：

console.log('This is a log message');
console.info('This is an info message');
console.warn('This is a warning message');
console.error('This is an error message');
console.debug('This is a debug message');

console.assert(1 === 2, 'Assertion failed: 1 is not equal to 2');

console.clear();

console.time('Timer');
setTimeout(() => {
    console.timeEnd('Timer');
}, 1000);

console.count('Count');
console.count('Count');
console.countReset('Count');
console.count('Count');

console.group('Group');
console.log('Message in group');
console.groupEnd();

console.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);

console.trace('Trace message');

console.dir({ key: 'value' });
console.dirxml(document.body);

console.profile('Profile');
console.profileEnd('Profile');

console.timeStamp('TimeStamp');