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

# 介绍

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

### 作用

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

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

# 常用方法

### 输出基本信息

在调试阶段打印通用调试级日志，是开发者追踪代码执行、验证变量值、排查逻辑问题，输出非关键性调试信息。

属于 `Debug` 级别日志（优先级低于 `info/warn/error`），

**注意：**调试完成后必须删除 或 注释

```
console.log((message, ...arguments))
```

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

```javascript
console.log("Hello World"); // 输出字符串
const name = "Alice";
console.log("Name:", name); // 输出变量（逗号分隔多个值）
console.log("Age: %d", 25); // 占位符（%d 数字，%s 字符串，%o 对象）
console.log(`Name: ${name}`); // 模板字符串
// 调试数组处理过程
const list = [1,2,3];
console.debug("数组长度：", list.length, "遍历第1项：", list[0]);
```

### 输出debug

等同于 `console.log()`，仅方法名语义不同

```
debug(message, ...arguments)
```

例子：

```
let name = '李雷'
console.debug('用户名是：',name)
```

### 输出信息

打印 **信息类日志**（级别为 `INFO`），优先级低于 `warn`/`error`，高于 `log`

```
console.info((message, ...arguments))
```

例子：

```
console.info("应用启动成功，进入首页");
```

### 输出警告

输出警告信息，通常显示为黄色，用于非致命问题。

```
console.warn((message, ...arguments))
```

例子：

```javascript
// 参数缺失，使用默认值
funciton getFontSize() {

return null
}
if (!getFontSize()) {
    console.warn("字体大小参数缺失，使用默认值16px");
}

```

### 输出错误

输出错误信息，通常显示为红色，用于标识错误（如异常）。

```
console.error((message, ...arguments))
```

例子：

```javascript
let a = 5
let b = 0
try {
    const res = a / b
} catch (e) {
    console.error("计算错误：", e.message);
}
```

# 日志级别

**日志级别**是对日志信息进行的“优先级/用途分类”，核心作用是帮开发者**区分日志重要性、精准筛选调试信息、管控日志输出范围**，同时降低非必要日志对性能的影响，是调试、测试、线上问题定位的核心基础。

### 作用

#### 1. 区分日志重要性，聚焦核心信息
不同级别对应不同场景的日志价值，避免“所有日志混在一起”导致关键信息被淹没：

- 低级别（Debug/Log）：仅开发调试用，无业务影响；
- 中级别（Info）：核心流程状态，辅助确认业务正常运行；
- 高级别（Warn/Error）：异常/风险信息，是问题定位的核心线索。

#### 2. 精准筛选日志，提升调试效率

DevEco Studio 的 Logcat、鸿蒙系统日志工具均支持按级别筛选，比如：

- 调试时只看 `Debug` 级，排查问题时只看 `Error/Warn` 级，无需在海量日志中翻找；
- 测试阶段可屏蔽 `Debug` 级，只关注 `Info/Warn/Error`，验证业务流程是否正常。

#### 3. 管控日志输出，优化性能与安全

- 性能层面：低级别日志（Debug/Log）通常在 Release 版本中移除，避免频繁日志输出拖慢应用运行；
- 安全层面：可配置仅保留高级别日志（Error/Warn），减少敏感信息（如调试用的变量值）泄露风险。

#### 4. 标准化日志管理，适配团队协作/线上排查

统一的级别定义（如约定 `Error` 仅记录致命故障，`Warn` 记录潜在问题），让团队成员、测试、运维能快速理解日志含义；线上应用可通过鸿蒙系统日志工具采集 `Error/Warn` 级日志，定位用户侧问题。

### 日志级别

鸿蒙支持两套日志体系：`console` 系列（前端/应用层）、`hilog` 系列（鸿蒙原生，全场景适配），级别定义完全对齐，核心分为5级（优先级从低到高）：

| 级别       | console 方法          |  核心定义           | 优先级       |
|------------|-----------------------|------------------|-------------|
| Debug      | console.debug()/log() |  开发调试专属，如中间变量、分支状态、计算过程，无业务价值，仅临时排查用     | 最低   |
| Info       | console.info()        |  关键流程状态，如“页面初始化完成”“接口请求成功”，确认业务正常运行         | ↗      |
| Warn       | console.warn()        |  潜在风险/非致命问题，如“参数缺失（使用默认值）”“缓存目录超限”，需关注但不崩溃 | ↗      |
| Error      | console.error()       |  致命错误/异常，如“接口请求失败”“数据库操作异常”“空指针”，导致功能不可用   | ↗      |

**提示：**：`console.log()` 属于 Debug 级，与 `console.debug()` 仅语义区别，鸿蒙底层无差异；`hilog` 是鸿蒙原生日志API，支持自定义标签/领域ID，比 `console` 更适配鸿蒙全场景（如分布式设备、系统服务）。

# 特殊用法

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 开发中不可或缺的调试工具。

原文出处：/show_1GW29Ultg0zb.html