Javascript console.log()使用说明

作者：马育民 • • 阅读：10071

介绍

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

作用

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

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

常用方法

输出基本信息

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

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

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

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

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

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))

例子：

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

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

输出错误

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

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

例子：

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 样式，自定义输出样式（仅浏览器支持）。 

    console.log(
 "%cThis is a styled message",
 "color: blue; font-size: 20px; font-weight: bold"
);

  2. 批量输出
    传入多个参数，用逗号分隔，console 会自动拼接输出。 

    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 时无反应。 

const num = 5;
console.assert(num > 10, "Number is too small"); // 条件不成立，输出错误

分组输出

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

语法

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

....

console.groupEnd() //结束分组

例子

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

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

表格化输出

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

语法

console.table(data)

例子

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

计数

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

语法

console.count(label)

例子

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

计时

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

语法

console.time(label)

...

console.timeEnd(label)

例子

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

清除控制台

console.clear()

清空当前控制台内容（快捷键：Chrome 中按 Ctrl+L 或 Cmd+L）。 

console.clear(); // 清空控制台

检查对象结构

语法

console.dir(obj)

例子

以树状结构展示对象的详细属性（比 log 更适合查看对象内部结构）。 

const obj = { a: 1, b: { c: 2 } };
console.dir(obj); // 展开显示对象的嵌套结构

显示 DOM 节点的 HTML/XML 结构

console.dirxml(node)

显示 DOM 节点的 HTML/XML 结构（主要用于浏览器）。 

console.dirxml(document.body); // 显示 body 标签的 DOM 结构

堆栈跟踪

console.trace()

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

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

注意事项

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

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

原文出处：/show_1GW29Ultg0zb.html

吉ICP备15003043号