js 中的console使用详解

console 是 JavaScript 提供的一个全局对象，常用于调试和日志记录。它包含一组方法，用于在控制台中打印消息、显示数据以及调试程序。以下是 console 常见方法的详细介绍和用法。

---

1. 常用方法

1.1 console.log()

• 作用：打印普通消息，最常用的日志方法。

• 用法 ：

  console.log("Hello, world!"); 
  console.log("Number:", 42, "Boolean:", true);

• 特点 ：

  • 支持格式化输出（如字符串插值、占位符）。
  • 不同浏览器可能对复杂对象的显示方式不同。

---

1.2 console.info()

• 作用 ：打印消息，和 console.log 类似，语义上用于提供信息。

• 用法 ：

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

---

1.3 console.warn()

• 作用：打印警告消息，通常会在控制台显示黄色或带警告符号。

• 用法 ：

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

• 场景 ：

  • 提醒潜在问题，但不一定是错误。
  • 提示某些功能已废弃。

---

1.4 console.error()

• 作用：打印错误消息，通常会在控制台显示红色或带错误符号。

• 用法 ：

  console.error("An error occurred!");

• 特点 ：

  • 用于记录错误信息。
  • 可能会在浏览器开发工具中标记为错误。

---

1.5 console.debug()

• 作用：打印调试消息，在某些浏览器中默认隐藏，需开启调试级别日志。

• 用法 ：

  console.debug("This is a debug message.");

---

2. 调试相关方法

2.1 console.assert()

• 作用 ：如果断言条件为 false，则打印错误信息。

• 用法 ：

  console.assert(2 + 2 === 4, "This will not log."); 
  console.assert(2 + 2 === 5, "This will log, as the assertion fails.");

• 特点 ：

  • 用于验证假设，类似于断言工具。

---

2.2 console.trace()

• 作用：打印函数调用栈，帮助追踪代码执行路径。

• 用法 ：

  function a() { b(); }
  function b() { c(); }
  function c() { console.trace("Trace example"); }
  a();

• 输出 ：

  • 打印从调用位置到根调用的完整堆栈。

---

2.3 console.time() 和 console.timeEnd()

• 作用：测量一段代码的执行时间。

• 用法 ：

  console.time("timer");
  for (let i = 0; i < 100000; i++) {}
  console.timeEnd("timer");

• 特点 ：

  • console.time() 开始计时。
  • console.timeEnd() 停止计时并打印耗时。
  • 可以使用多个计时器，计时器名称需匹配。

---

3. 数据显示方法

3.1 console.table()

• 作用：以表格形式打印数组或对象。

• 用法 ：

  const data = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
  ];
  console.table(data);

• 特点 ：

  • 显示更直观，适合数组或对象的数据。

---

3.2 console.dir()

• 作用 ：打印对象的详细结构，类似 console.log，但显示更接近对象内部属性。

• 用法 ：

  const obj = { foo: "bar", baz: { qux: "quux" } };
  console.dir(obj);

---

3.3 console.group() 和 console.groupEnd()

• 作用：将日志分组，提供层级结构。

• 用法 ：

  console.group("Outer Group");
  console.log("Message 1");
  console.group("Inner Group");
  console.log("Message 2");
  console.groupEnd();
  console.groupEnd();

• 特点 ：

  • 嵌套分组，层次清晰。

---

4. 控制日志输出

4.1 console.count()

• 作用：计数器，记录某段代码被调用的次数。

• 用法 ：

  console.count("counter");
  console.count("counter");
  console.countReset("counter"); // 重置计数
  console.count("counter");

---

4.2 console.clear()

• 作用：清空控制台。

• 用法 ：

  console.clear();

---

5. 特殊格式

占位符格式

• 用法 ：

  console.log("String: %s, Number: %d, Object: %o", "Hello", 42, { foo: "bar" });

• 占位符说明 ：

  • %s：字符串
  • %d：数字
  • %o：对象
  • %c：CSS 样式

CSS 样式

• 用法 ：

  console.log("%cThis is styled text", "color: red; font-size: 20px;");

---

6. 浏览器差异与注意事项

• 输出格式：不同浏览器显示效果可能不同，尤其是对象结构或表格。
• 性能 ：过多的 console 输出会影响性能，生产环境建议移除调试日志。
• 调试工具扩展：结合浏览器开发者工具，可以查看变量、堆栈和时间统计。

---

通过灵活使用 console，开发者可以更方便地调试代码，定位问题，并展示调试信息。