JavaScript 中 console 方法全方位讲解：从基础到进阶

在 JavaScript 开发过程中，console对象是我们调试代码、查看数据的 “得力助手”。很多开发者可能只常用console.log()，但实际上console提供了一系列强大的方法，能应对不同的调试场景。本文将带大家系统学习console的常用方法，每个方法都配有详细的代码示例，帮助你快速上手。

一、基础调试方法：最常用的 4 个 “刚需” 方法

基础方法是日常开发中使用频率最高的，主要用于输出不同类型的信息，方便快速定位问题。

1. console.log ()：通用信息输出

console.log()是最基础的方法，用于输出普通信息，支持字符串、数字、对象、数组等多种数据类型，还可以使用占位符格式化输出。

代码示例：

// 1. 输出单个值

console.log("Hello, Console!"); // 输出字符串

console.log(123 + 456); // 输出计算结果：578

console.log({ name: "张三", age: 25 }); // 输出对象：{name: '张三', age: 25}

console.log(["苹果", "香蕉", "橙子"]); // 输出数组：(3) ['苹果', '香蕉', '橙子']

// 2. 输出多个值（用逗号分隔）

const a = 10;

const b = 20;

console.log("a的值：", a, "b的值：", b, "a+b的结果：", a + b);

// 输出：a的值： 10 b的值： 20 a+b的结果： 30

// 3. 使用占位符格式化

// %s：字符串占位符，%d：数字占位符，%c：样式占位符

console.log("姓名：%s，年龄：%d", "李四", 30);

// 输出：姓名：李四，年龄：30

console.log("%c这是带样式的日志", "color: red; font-size: 16px; font-weight: bold;");

// 输出红色、16px、加粗的文字

2. console.warn ()：警告信息输出

当代码存在潜在问题（如语法不规范、逻辑风险）但不影响运行时，用console.warn()输出警告信息，浏览器会默认用黄色标识，更易区分。

代码示例：

// 示例1：变量未使用

const unusedVar = "我没被用到";

console.warn("变量unusedVar已声明但未使用，可能存在冗余代码");

// 示例2： deprecated（过时）方法提示

function oldMethod() {

 console.warn("oldMethod()已过时，请使用newMethod()替代");

}

oldMethod(); // 调用时输出警告

3. console.error ()：错误信息输出

当代码运行出错（如语法错误、引用不存在的变量）时，用console.error()输出错误信息，浏览器默认用红色标识，且会显示错误堆栈，方便定位错误位置。

代码示例：

// 示例1：引用不存在的变量

try {

 console.log(undefinedVar); // 变量未声明

} catch (err) {

 console.error("发生错误：", err);

 // 输出：发生错误： ReferenceError: undefinedVar is not defined

}

// 示例2：自定义错误

function checkNum(num) {

 if (typeof num !== "number") {

   console.error("参数错误：期望传入数字，实际传入", typeof num);

 }

}

checkNum("abc"); // 输出：参数错误：期望传入数字，实际传入 string

4. console.info()：信息性提示输出

console.info()与console.log()功能类似，都用于输出普通信息，但部分浏览器会给info信息添加 “信息图标”，更适合输出需要强调的 “说明性内容”（如接口调用说明、配置信息）。

代码示例：

// 输出接口配置信息

const apiConfig = {

 baseUrl: "protocol://ip:port",

 timeout: 5000

};

console.info("接口配置信息：", apiConfig);

// 输出：接口配置信息： {baseUrl: 'protocol://ip:port', timeout: 5000}

// 输出操作说明

console.info("点击按钮后，将触发表单提交逻辑");

二、进阶调试方法：提升调试效率的 “利器”

除了基础输出，console还提供了针对 “数据查看”“性能分析”“代码分组” 的进阶方法，能大幅提升调试效率。

1. console.table ()：格式化输出数组 / 对象

当需要查看数组或对象的结构化数据时，console.table()会将数据以 “表格” 形式展示，清晰直观，尤其适合多维数据。

代码示例：

// 1. 输出数组（一维数组）

const fruits = ["苹果", "香蕉", "橙子"];

console.table(fruits);

// 表格结果：

// Index | Value

// 0     | "苹果"

// 1     | "香蕉"

// 2     | "橙子"

// 2. 输出对象数组（多维数据）

const users = [

 { name: "张三", age: 25, gender: "男" },

 { name: "李四", age: 30, gender: "女" },

 { name: "王五", age: 28, gender: "男" }

];

console.table(users);

// 表格结果会自动以对象的key为列名，每行对应一个对象

// 3. 指定显示的列

console.table(users, ["name", "age"]); // 只显示name和age列

2. console.dir ()：查看对象的详细结构

console.log()输出对象时，可能会显示简化结构；而console.dir()会以 “树形结构” 展示对象的所有属性和方法，包括原型链上的内容，适合深入查看对象结构。

代码示例：

// 查看DOM元素的详细结构

const btn = document.querySelector("button");

console.log("console.log(btn)：", btn); // 简化显示DOM元素

console.dir("console.dir(btn)：", btn); // 树形展示DOM元素的所有属性（如className、onclick、style等）

// 查看自定义对象的原型链

function Person(name) {

 this.name = name;

}

Person.prototype.sayHi = function() {

 console.log("Hi");

};

const person = new Person("张三");

console.dir(person); // 可看到person的name属性，以及原型链上的sayHi方法

3. console.time () & console.timeEnd ()：代码执行时间统计

当需要分析代码的执行效率（如循环耗时、接口请求耗时）时，用console.time(label)开始计时，console.timeEnd(label)结束计时，两者的label必须一致，最终会输出耗时（单位：毫秒）。

代码示例：

// 示例1：统计循环执行时间

console.time("loopTime"); // 开始计时，label为loopTime

let sum = 0;

for (let i = 0; i < 1000000; i++) {

 sum += i;

}

console.timeEnd("loopTime"); // 结束计时

// 输出：loopTime: 2.345ms（耗时根据设备性能不同而变化）

// 示例2：统计接口请求耗时（结合fetch）

async function fetchData() {

 console.time("fetchTime");

 const response = await fetch("protocol://ip:port/data");

 const data = await response.json();

 console.timeEnd("fetchTime"); // 输出请求总耗时

 return data;

}

fetchData();

4. console.group () & console.groupEnd ()：代码输出分组

当输出的日志较多时，用console.group(label)创建分组，console.groupEnd(label)结束分组，分组内的日志会被折叠 / 展开，方便管理。还可以用console.groupCollapsed()创建默认折叠的分组。

代码示例：

// 普通分组（默认展开）

console.group("用户信息分组");

console.log("姓名：张三");

console.log("年龄：25");

console.log("性别：男");

console.groupEnd("用户信息分组");

// 默认折叠的分组

console.groupCollapsed("订单信息分组");

console.log("订单号：OD123456");

console.log("金额：99元");

console.log("状态：已支付");

console.groupEnd("订单信息分组");

// 嵌套分组

console.group("外层分组");

console.log("外层信息");

console.group("内层分组");

console.log("内层信息");

console.groupEnd("内层分组");

console.groupEnd("外层分组");

三、注意事项：避免调试 “踩坑”

1. 生产环境删除调试日志：console方法会占用性能，且可能泄露敏感信息（如接口地址、用户数据），生产环境需通过构建工具（如 Webpack、Vite）自动删除所有console语句。

2. 避免过度依赖 console.log：复杂场景下，建议用debugger断点调试或console.table()/console.dir()等方法，比大量console.log()更高效。

3. 注意占位符的正确性：使用console.log("%d", "abc")时，字符串会被强制转为数字（结果为NaN），需确保占位符与数据类型匹配。

总结

console对象的方法远不止console.log()，合理使用console.warn()/console.error()区分信息类型、console.table()查看结构化数据、console.time()统计耗时，能让调试过程更高效、更清晰。