Javascript console.log()使用说明-马育民老师

# 介绍

在 JavaScript 中，`console` 是用于在浏览器控制台或 Node.js 环境中输出信息、调试代码的全局对象，提供了多种方法用于日志记录、错误提示、性能分析等。

### 作用

用于调试和输出信息，不会影响页面渲染，仅在开发者工具的“控制台（Console）”中显示。

**环境支持**：浏览器（Chrome、Firefox 等）和 Node.js 均支持，但部分方法存在差异（下文以浏览器环境为主）。

# 常用方法

### 输出基本信息

```
console.log()
```

最常用的方法，输出普通信息，支持字符串、变量、表达式等，可搭配占位符。

```javascript
console.log("Hello World"); // 输出字符串
const name = "Alice";
console.log("Name:", name); // 输出变量（逗号分隔多个值）
console.log("Age: %d", 25); // 占位符（%d 数字，%s 字符串，%o 对象）
console.log(`Name: ${name}`); // 模板字符串
```

### 输出警告

```
console.warn()
```

输出警告信息，通常显示为黄色，用于非致命问题。  
```javascript
console.warn("This is a warning!"); // 警告：可能存在风险
```

### 输出错误

```
console.error()
```

输出错误信息，通常显示为红色，用于标识错误（如异常）。
```javascript
console.error("This is an error!"); // 错误：需要修复的问题
```

### 特殊用法

1. **样式美化**  
   在 `console.log` 中使用 `%c` 占位符搭配 CSS 样式，自定义输出样式（仅浏览器支持）。  
```javascript
console.log(
	"%cThis is a styled message",
	"color: blue; font-size: 20px; font-weight: bold"
);
```

2. **批量输出**  
   传入多个参数，用逗号分隔，`console` 会自动拼接输出。  
```javascript
const a = 1, b = 2, c = 3;
console.log("Values:", a, b, c); // Values: 1 2 3
```

# 断言与条件输出

### `console.assert(condition, message)`

当 `condition` 为 `false` 时，输出错误信息 `message`；为 `true` 时无反应。  
```javascript
const num = 5;
console.assert(num > 10, "Number is too small"); // 条件不成立，输出错误
```

# 分组输出

用于将相关日志分组，便于阅读复杂输出。

### 语法

```
console.group(label)  //创建分组（默认展开）  
console.groupCollapsed(label) //创建分组（默认折叠）

....

console.groupEnd() //结束分组
```

### 例子

```javascript
console.group("用户信息");
console.log("Name: Bob");
console.log("Age: 30");
console.groupEnd(); // 结束分组

// 折叠分组
console.groupCollapsed("详细数据");
console.log("Address: ...");
console.groupEnd();
```

# 表格化输出

将数组或对象以表格形式展示，适合结构化数据。

### 语法

```
console.table(data)
```

### 例子

```javascript
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
console.table(users); // 以表格显示用户数据
```

# 计数

计数，记录该 label 被调用的次数

### 语法

```
console.count(label)
```

### 例子

```javascript
console.count("点击次数"); // 点击次数: 1
console.count("点击次数"); // 点击次数: 2
```

# 计时

计时，用于测量代码执行时间

### 语法

```
console.time(label)

...

console.timeEnd(label)
```

### 例子

```javascript
console.time("循环耗时");
for (let i = 0; i < 100000; i++) {}
console.timeEnd("循环耗时"); // 循环耗时: 0.5ms（实际时间因环境而异）
```

# 清除控制台

```
console.clear()
```

清空当前控制台内容（快捷键：Chrome 中按 `Ctrl+L` 或 `Cmd+L`）。  
```javascript
console.clear(); // 清空控制台
```

# 检查对象结构

### 语法

```
console.dir(obj)
```

### 例子

以树状结构展示对象的详细属性（比 `log` 更适合查看对象内部结构）。  
```javascript
const obj = { a: 1, b: { c: 2 } };
console.dir(obj); // 展开显示对象的嵌套结构
```

# 显示 DOM 节点的 HTML/XML 结构

### `console.dirxml(node)`  
显示 DOM 节点的 HTML/XML 结构（主要用于浏览器）。  
```javascript
console.dirxml(document.body); // 显示 body 标签的 DOM 结构
```

# 堆栈跟踪

```
console.trace()
```

输出当前代码的调用堆栈，用于定位函数调用路径。

```javascript
function a() { b(); }
function b() { c(); }
function c() { console.trace("调用轨迹"); }
a(); // 输出从 a() 到 b() 再到 c() 的调用堆栈
```

# 注意事项

- **生产环境**：避免保留 `console` 输出（可能泄露信息或影响性能），可通过构建工具（如 Webpack）移除。
- **环境差异**：部分方法（如 `dirxml`、样式美化）仅在浏览器有效，Node.js 中可能不支持或行为不同。
- **调试效率**：合理使用分组、表格、计时等方法，可大幅提升调试效率。

通过灵活运用 `console` 的各种方法，能高效定位代码问题、分析数据结构和性能瓶颈，是 JavaScript 开发中不可或缺的调试工具。

原文出处：https://malaoshi.top/show_1GW29Ultg0zb.html