你只会console.log就Out了

基础 console 方法

除了最常用的 console.log(),console 对象还提供了多种不同用途的方法:

javascript 复制代码
console.log('普通信息'); // 通用输出
console.info('资讯类信息'); // 信息性消息
console.debug('调试信息'); // 调试信息
console.warn('警告信息'); // 警告信息
console.error('错误信息'); // 错误信息

这些方法在控制台中会以不同颜色和图标显示,帮助我们快速识别不同类型的消息。

美化 console 输出

你知道吗?console.log() 支持使用 CSS 样式美化输出:

javascript 复制代码
console.log(
  '%c这是带样式的文本',
  'color: white; background-color: blue; padding: 5px; border-radius: 3px;'
);

你甚至可以使用多个样式:

javascript 复制代码
console.log(
  '%c红色%c蓝色',
  'color: red; font-weight: bold;',
  'color: blue; text-decoration: underline;'
);

实用 console 技巧

1. 清空控制台

javascript 复制代码
console.clear(); // 清除控制台中的所有信息

2. 计数功能

javascript 复制代码
// 统计代码执行次数
console.count(); // 默认计数器
console.count('myCounter'); // 命名计数器
console.countReset('myCounter'); // 重置计数器

3. 查看对象详细信息

javascript 复制代码
const user = { name: '张三', age: 25, address: { city: '北京' } };
console.dir(user); // 以可折叠的树形结构显示对象属性

4. 性能测量

javascript 复制代码
console.time('数据加载时间');
// 模拟耗时操作
setTimeout(() => {
  console.timeEnd('数据加载时间'); // 输出执行时间
}, 1000);

5. 条件输出

javascript 复制代码
const value = 10;
console.assert(value > 20, '值太小了'); // 只有当条件为假时才会输出

6. 追踪调用栈

javascript 复制代码
function first() {
  second();
}
function second() {
  console.trace('调用栈追踪'); // 显示当前的调用栈
}
first();

7. 表格形式展示数据

javascript 复制代码
const users = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '广州' }
];
console.table(users); // 以表格形式展示数组或对象

8. 分组显示

javascript 复制代码
console.group('用户信息');
console.log('姓名: 张三');
console.log('年龄: 25');
console.groupCollapsed('详细地址'); // 默认折叠的分组
console.log('城市: 北京');
console.log('区域: 朝阳区');
console.groupEnd();
console.groupEnd();

9. 内存使用情况

javascript 复制代码
console.memory; // 查看内存使用情况(注意:这是一个属性,不是方法)

实际应用场景

调试复杂数据

当处理复杂对象时,使用 console.table() 可以更清晰地查看数据:

javascript 复制代码
// 传统方式
console.log(users);

// 更好的方式
console.table(users, ['name', 'age']); // 只显示特定列

性能优化

使用 console.time()console.timeEnd() 定位性能瓶颈:

javascript 复制代码
console.time('数据处理');
// 复杂的数据处理代码
processLargeData();
console.timeEnd('数据处理');

条件调试

只在开发环境中输出调试信息:

javascript 复制代码
if (process.env.NODE_ENV === 'development') {
  console.debug('调试信息');
}

注意事项

  1. 生产环境移除:记得在生产环境中移除或禁用 console 语句,可以使用构建工具自动处理
  2. 避免过度使用:合理使用 console,避免控制台信息过多影响调试
  3. 使用断点调试:对于复杂问题,console 不能替代浏览器调试器的断点功能

总结

console 对象提供了丰富的调试功能,远不止我们常用的 console.log()

记住,好的开发者不仅会写代码,更会高效地调试代码。console 就是你工具箱中不可或缺的利器!

相关推荐
Kevin Wang72714 分钟前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic17 分钟前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年19 分钟前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala22 分钟前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen200827 分钟前
前端-ES6-11
前端·es6
菜鸟una1 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088502 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili2 小时前
用 Tinymce 打造智能写作
前端