JavaScript调试工具console.log()-CFANZ编程社区

console.log() 是 JavaScript 中最常用的调试工具之一，用于在浏览器控制台输出信息，帮助开发者进行调试和日志记录。

一、基本用法

1. 输出基本数据类型

// 输出字符串
console.log("Hello, World!"); 

// 输出数字
console.log(123 + 456); // 输出计算结果：579

// 输出布尔值
console.log(true);

// 输出对象
console.log({ name: "张三", age: 25 }); 

// 输出数组
console.log(["苹果", "香蕉", "橙子"]);

2. 输出多个值

const a = 10;
const b = 20;
console.log("a的值：", a, "b的值：", b, "a+b的结果：", a + b);
// 输出：a的值： 10 b的值： 20 a+b的结果： 30

二、格式化输出

console.log() 支持使用占位符进行格式化输出，类似于 C 语言的 printf 函数。

1. 常用占位符

%s：字符串
%d 或 %i：整数
%f：浮点数
%o：DOM 对象
%O：JavaScript 对象
%c：CSS 样式（特殊用法）

2. 格式化示例

var name = "李四";
var age = 30;
console.log("姓名：%s，年龄：%d", name, age); 
// 输出：姓名：李四，年龄：30

// 使用多个占位符
console.log("今天是：%s，现在是：%d点%d分", "星期五", 15, 30);
// 输出：今天是：星期五，现在是：15点30分

三、样式输出

使用 %c 占位符可以为输出内容添加 CSS 样式。

// 红色加粗文字
console.log("%c这是带样式的日志", "color: red; font-size: 16px; font-weight: bold;");

// 多个样式
console.log(
  "%c欢迎加入我们的%c大家庭 %c啦啦啦",
  "font-size: 30px; font-weight: bold; color: #ef475d",
  "font-size: 24px; font-weight: bold; color: cornflowerblue",
  "font-size: 18px; color: #333"
);

四、高级用法

1. 分组输出

console.group("用户信息");
console.log("用户名：lee");
console.log("年龄：30");
console.log("职业：测试者");
console.groupEnd(); // 结束分组

// 输出：
// 用户信息
//   用户名：lee
//   年龄：30
//   职业：测试者

2. 性能监控

console.time("代码执行时间");
// 代码执行
for (let i = 0; i < 100000; i++) {
  // 模拟计算
}
console.timeEnd("代码执行时间");
// 输出：代码执行时间: 5.8ms

3. 输出对象的详细信息

const user = { name: "张三", age: 25, hobbies: ["读书", "运动"] };

// 以表格形式展示
console.table(user);

// 以可交互的属性列表展示
console.dir(user);

4. 警告和错误输出

// 警告信息（黄色标识）
console.warn("变量未使用，可能存在冗余代码");

// 错误信息（红色标识，显示错误堆栈）
console.error("发生了一个错误：文件未找到");

五、高级技巧

1. 查看调用栈

function outer() {
  function inner() {
    console.trace(); // 查看调用栈
  }
  inner();
}
outer();

2. 输出图片（通过CSS背景图）

console.log(
  "%c ",
  "background: url('https://example.com/image.png') no-repeat; " +
  "width: 200px; height: 100px; padding: 50px 0 0 0;"
);

3. 保存对象快照

const obj = { time: new Date().toISOString() };
console.log(obj); // 展开查看时time值可能已改变

// 保存快照
console.log(JSON.parse(JSON.stringify(obj))); // 保存当前状态