console详解

最新推荐文章于 2025-05-05 22:00:00 发布

原创最新推荐文章于 2025-05-05 22:00:00 发布

· 1.2w 阅读

120 ·

版权

文章标签：

#javascript

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

文章目录

console

console

console通常是用于在浏览器控制台打印信息，是用于调试的强大工具之一。console对象可以从任何全局对象中访问，它被定义为Window.console，平常可以通过console来调用。平常用的最多的就是console.log()，但是它还有其他方法：

console.assert()—判断一个参数是否为真，false的话抛出异常并在控制台输出相应信息
console.clear()—清空控制台
console.count()—以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数
console.countReset()—重置指定标签的计数器值
console.debug()—在控制台打印一条"debug"级别的信息
console.dir()—显示一个特定的JavaScript对象列表组成的可交互列表
console.dirxml()—打印XML/HTML元素表示的指定对象，否则显示JavaScript对象视图
console.error()—打印一条错误信息
console.group()—创建一个新的内联group，后续所有打印内容都会以子层级的形式展示，调用groupEnd()来封闭内联表
console.groupEnd()—封闭当前的group
console.groupCollapsed()—创建一个新的内联group，使用方法和group()相同，不同之处在于，groupCollapsed()打印的内容默认是折叠的，也是通过groupEnd()来封闭内联表
console.info()—打印内容的通用方法
console.table()—将列表型数据打印成表格
console.time()—启动一个以入参作为特定名称的计时器，在显示页面中可同时运行的计时器上限为1000，。其实就是一个用于计算该语句后面，console.timeEnd()语句之前的代码的运行时间
console.timeEnd()—结束上一个console.time()，并以毫秒打印其中代码的运行时间
console.timeLog()—打印特定计时器所运行的时间
console.trace()—输出一个stack trace
console.warn()—打印一个警告信息

console还支持使用字符来进行参数的替换

字符	描述
%o \| %O	打印JavaScript对象，
%d \| %i	打印整数，支持数据格式化
%s	打印字符串
%f	打印浮点数，支持格式化

const obj = {name:'simon'};
console.log('JavaScript对象: %o',obj); //JavaScript对象: Object: name:'simon'
console.log('Foo %.2d', 1.1);  //Foo 1
console.log("Foo %.3f", 1.1); //Foo 1.1
let str = 'hello simon';
console.log('str是：%s',str); //hello simon

console.log()

这是平常最常见的方法，就是用于在控制台输出任何数据，其数据类型都会被转换为字符串输出。同时输出的也可以是模板字符串，就不再详细介绍了

console.dir()

在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示

const body = document.getElementsByTagName('body')[0];
console.log(body); //打印的将是整个DOM树结构
console.dir(body); //打印的是body对象的所有属性

console.error()

其用法与console.log()一致，用于打印错误信息。错误信息是指平常的报错

console.error('aaasds');  //aaasds——不过是一条错误信息

console.info()

向控制台输出一条通知信息，其语法规则与console.log()一致，与console.log()差别不大

console.info('aaabbb'); //aaabbb

console.debug()

向控制台输出一条调试信息，其语法规则与console.log()一致，与console.log()差别不大

console.info('aaabbb'); //aaabbb

console.assert()

如果断言为false，则将一个错误消息写入控制台。如果断言是 true，没有任何反应。

语法：console.assert(assertion, obj1 [, obj2, …, objN]);

assertion是一个布尔表达式，如果assertion为假，消息将会以错误的消息输出，若assertion为真，将不会打印任何东西

console.assert(1>3,'这是错的'); //这是错的——是一条错误信息

console.trace()

输出一个stack trace

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

console.time()

用于给程序运行计时，其中包含一个参数，为计时器的名称

console.time('aa');  //这个不会打印
function fun(){
	for(let i=0;i<10;i++){
	console.log(i*100);
	}
}
console.timeLog('aa');  //打印第一次
fun();
console.timeEnd('aa');  //打印第二次

console.group()

将所有打印信息都放在一个内联表中

console.group();
console.log(1+2);
console.log('1+2');
console.log('aabbcc');
console.log('hello simon');
console.groupEnd();

console.table()

将数据以表格的形式展示，这个方法必须有一个参数data，且data必须是一个数组或对象。还有一个可选参数columns

const obj = {
    name:'simon',
    age:24,
    job:'student',
    families:{
        one:{
            name:'simoner',
            age:24
        },
        two:{
            name:'li',
            age:24
        }
    }
};
console.table(obj);
console.table(['apple','banna','cherry','data']);