console对象方法汇总及特殊输出

最新推荐文章于 2025-04-29 11:15:01 发布

锋利的绵羊

最新推荐文章于 2025-04-29 11:15:01 发布

阅读量871

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_37012965/article/details/100660175

版权

笔记本专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了浏览器控制台console对象的各种高级使用技巧，包括简单输出、分组输出、带记录的操作、特殊功能如输出表格、调用栈及图片等，帮助开发者更高效地进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简单输出

    console.log(); // 信息
    console.info(); // log的别名
    console.warn(); // 警告
    console.error(); // 错误
    console.clear(); // 清空输出

2.分组输出

console.group(); // 配合groupEnd对输出分组
console.groupCollapsed(); // 与group类似,区别是改组内容第一次显示时是收起的
console.groupEnd(); // 结束内联分组

3.带记录

// 计数器,输出被调用的次数,接收一个参数作为计数器的名字(不写为default), 可用在复杂环境中记录一个函数被调用了多少次,可设置多个(用不同参数区分)
console.count('a'); 
console.time(); // 生成一个时间戳,和timeEnd配合使用,记录两次操作之间的时间间隔
console.timeEnd(); // 计时结束输出上一个time()之间的时间间隔

4.其他

console.table(); // 将对象,数组转为键值对的表格显示
console.trace(); // 输出当前函数调用栈

// 接收两个参数,一参为表达式,二参为字符串,一参为false则输出二参的字符串,否则不做操作
console.assert(true === false, "判断条件不成立");

5.在控制台打印出图片 / 带样式的文字

5-1. 占位符(类似c的输出)

%s  字符串

%d or %i    整数

%f  浮点数

%o or %O  object对象

%c  根据提供的css样式格式化字符串

// %c作用于它之后紧跟的下一个%c之间的文字, so如果要实现高亮效果需要进行截断式操作
console.log('%c这是一条%c普通%c的信息','font-size:40px','font-size: 40px;color: red','font-size: 40px');

// 打印图片, 无法设置宽高,必须设置line-height和padding来给图片设置大小
console.log('%c ','background-image:url("http://pic1.win4000.com/wallpaper/c/53cdd1f7c1f21.jpg");background-size:120% 120%;line-height:60px;padding:30px 120px;');