JavaScript console 常用方法有哪些

打开浏览器的开发者工具（按F12就能唤出），除了用来调试代码错误，其实它自带的Console面板，更是前端开发者的“随身小助手”——就像汽车的仪表盘，能帮你实时看到代码运行的状态，不用每次都弹窗提示。很多新手只会用最基础的console.log，其实它还有不少实用的方法，能让调试效率翻好几倍。

一、最常用的输出：console.log()

这是大家最熟悉的方法，用来在Console面板输出信息，比如变量的值、字符串、甚至对象。不过很多人不知道，它支持占位符语法：用%s代表字符串、%d或%i代表数字、%f代表浮点数、%o代表对象。举个例子，要输出“用户张三今年25岁”，不用拼接字符串，直接写console.log("用户%s今年%d岁", "张三", 25)，代码更整洁。如果直接输出对象，还能点击对象名展开查看详细属性，比alert弹出的内容清晰太多。

二、区分信息类型：console.info()、console.warn()、console.error()

这三个方法的用法和log几乎一样，区别在于输出的样式和颜色，能帮你快速区分信息级别。console.info()用来输出普通提示信息，前面会带个蓝色的小i图标；console.warn()输出警告，前面是黄色感叹号，适合提示一些可能出问题的逻辑，比如“这个功能即将废弃，请更新代码”；console.error()输出错误，前面是红色叉号，能直接标记出代码里的错误位置，排查问题时一眼就能找到重点。

三、统计运行次数：console.count()

如果你想知道某段代码被执行了多少次，不用自己定义变量计数，console.count()就能搞定。比如循环里调用某个函数，想看看它执行了几遍，直接写：

`javascript

function test() {

console.count("函数test执行次数");

}

test(); // 输出：函数test执行次数: 1

test(); // 输出：函数test执行次数: 2

`

还能给计数器加个标签，区分不同场景的计数，比手动加变量方便很多。

四、计算代码耗时：console.time() & console.timeEnd()

做性能优化时，经常需要看一段代码运行花了多久，这两个方法就是专门用来计时的。用法很简单，给它们加同一个标签，在要计时的代码前后分别调用：

`javascript

console.time("循环耗时");

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

// 空循环，只是模拟耗时操作

}

console.timeEnd("循环耗时");

`

运行后会输出“循环耗时: X ms”，不用手动掐表，就能快速知道代码的执行效率，排查性能瓶颈很高效。

五、整理输出对象：console.table()

如果要输出数组或对象数组，用console.log会把内容挤成一团，很难看清楚结构。console.table()能把数据整理成表格形式，一目了然。比如有个用户数组：

`javascript

const users = [

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

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

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

];

console.table(users);

`

运行后会出现三列的表格，每一行对应一个用户的信息，不用再手动拆解对象，找数据特别方便。

这些Console方法不用复杂的配置，只要在浏览器里直接写就能用，哪怕是新手也能快速上手。掌握它们，就能告别弹窗调试和杂乱的log输出，让前端调试变得更轻松。