JavaScript Console 对象所有用法

---

基础输出方法

1. console.log()

最基础和常用的输出方法

console.log("Hello World");

console.log("多个参数", 123, { name: "示例" });

2. console.info()

信息性输出，在某些浏览器中会显示一个信息图标

console.info("这是一条信息");

3. console.warn()

警告信息，通常显示为黄色，带警告图标

console.warn("这是一条警告信息");

4. console.error()

错误信息，通常显示为红色，带错误图标

console.error("这是一条错误信息");

5. console.debug()

调试信息，只在调试级别可见

console.debug("这是一条调试信息");

高级输出方法

6. console.table()

以表格形式展示数据

const users = [

{ name: "张三", age: 20 },

{ name: "李四", age: 25 }

];

console.table(users);

7. console.dir()

显示对象的所有属性和方法

console.dir(document.body);

分组和缩进

8. console.group()

创建一个新的分组

console.group("分组名称");

console.log("分组内的内容");

console.log("更多内容");

console.groupEnd();

9. console.groupCollapsed()

创建一个默认折叠的分组

console.groupCollapsed("折叠分组");

console.log("默认被折叠的内容");

console.groupEnd();

计时功能

10. console.time()

开始计时

console.time("计时器");

// 某些操作

console.timeEnd("计时器");

11. console.timeLog()

显示当前计时器的值

console.time("操作");

// 某些操作

console.timeLog("操作");

// 更多操作

console.timeEnd("操作");

计数和跟踪

12. console.count()

计数器

console.count("计数器");

console.count("计数器"); // 显示 2

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

13. console.trace()

显示调用堆栈

function foo() {

  console.trace("跟踪调用堆栈");

}
foo()

条件和清空

14. console.assert()

条件断言，当条件为 false 时输出信息

console.assert(1 === 2, "条件不满足时显示此消息");

15. console.clear()

清空控制台

console.clear();

样式化输出

16. 使用 CSS 样式

在输出文本时使用 CSS 样式

console.log(
  "%c 标签样式输出 %c 这是一个美观的输出！",
  "background: #4CAF50; color: white; padding: 5px; border-radius: 5px; font-weight: bold;",
  "color: #fff; font-size: 14px;"
);

17. console.memory

显示内存使用情况（仅在某些浏览器中可用）

console.log(console.memory);