浏览器打印日志方法与技巧

在浏览器中，开发者通常通过 console 对象来打印日志，用于调试和跟踪代码执行。以下是常见的日志打印方式及实用技巧：

1. 基础日志方法

(1) console.log()

• 用途：输出普通信息。
• 示例：

  console.log("Hello World");  // 字符串
  console.log({ name: "John", age: 30 }); // 对象
  console.log("Value:", value); // 动态值
  

(2) console.info()

• 用途：输出提示性信息（部分浏览器会显示图标）。

  console.info("This is an info message");
  

(3) console.warn()

• 用途：输出警告信息（黄色背景）。

  console.warn("This is a warning");
  

(4) console.error()

• 用途：输出错误信息（红色背景，包含堆栈跟踪）。

  console.error("This is an error");
  

(5) console.debug()

• 用途：输出调试信息（默认可能被浏览器隐藏，需手动开启显示）。

  console.debug("Debug message");
  

2. 结构化日志

(1) console.table()

• 用途：以表格形式展示数组或对象。

  const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
  console.table(users);
  

(2) console.dir()

• 用途：显示对象的详细属性（如 DOM 元素的结构）。

  console.dir(document.body);
  

(3) console.group() 与 console.groupCollapsed()

• 用途：将日志分组显示（groupCollapsed 默认折叠）。

  console.group("User Details");
  console.log("Name: Alice");
  console.log("Age: 25");
  console.groupEnd();
  

3. 调试与分析

(1) console.trace()

• 用途：输出函数调用堆栈。

  function foo() { console.trace(); }
  foo();
  

(2) console.time() 与 console.timeEnd()

• 用途：计算代码执行时间。

  console.time("Timer");
  // 执行代码...
  console.timeEnd("Timer"); // 输出耗时
  

(3) console.assert()

• 用途：条件断言，仅当表达式为 false 时输出。

  console.assert(x > 0, "x is not positive");
  

4. 高级技巧

(1) 格式化输出

使用 % 占位符格式化内容：

console.log("User: %s, Score: %d", "Alice", 95);
// %s 字符串, %d 数字, %o 对象, %c CSS 样式

(2) 自定义样式

通过 %c 添加 CSS 样式：

console.log("%cImportant Message", "color: red; font-size: 20px;");

(3) 条件输出

仅在特定条件下打印日志（避免污染生产环境）：

if (isDev) {
  console.log("Debug data:", data);
}

(4) 清空控制台

console.clear(); // 清空控制台所有日志

5. 注意事项

• 生产环境：建议使用构建工具（如 Webpack）移除 console 语句。
• 浏览器兼容性：绝大多数现代浏览器支持上述方法，但部分方法（如 console.table）在旧版浏览器中可能不可用。
• 性能：频繁的 console 操作可能影响页面性能，尤其是循环或高频触发场景。

通过灵活组合这些方法，可以更高效地调试和分析浏览器端的代码行为。