学会console调试，会让你少走很多弯路；

最新推荐文章于 2024-08-24 13:21:02 发布

柚子·小哥哥

最新推荐文章于 2024-08-24 13:21:02 发布

阅读量953

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_46174785/article/details/108438455

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、 console.log(输出的日志)

有五个占位符
%s 字符串
%d 或 %i 整数
%f 浮点数
%o 对象的链接
%c CSS格式字符

但是和console.log()很像的还有俩，一个是console.info()，一个是console.debug()。其实这个三个功能都是一样的，只不过有些区别

    console.info("我是console.info()打印出来的");

    console.debug("console.debug()打印出来的");

两者输出的结果是：
在这里插入图片描述

2、.console.clear() 清除控制台打印的内容，并将光标回归到第一行。

在这里插入图片描述

3、console.assert(表达式 [,arg1, arg2……argn])打印断言。

第一个参数是用来判断是否打印断言的表达式，只有当表达式的值为falsy的时候，才会打印后续的参数：

const arr = [1, 2, 3];

// 打印断言，如果arr[0]的值不等于2，则打印提示信息
console.assert(arr[0] === 2, 'arr[0]的值不等于2');

在这里插入图片描述

注意：

客户端的console.assert()打印断言，并不会阻塞后续代码的执行，只是在断言的表达式为false的时候，向控制台打印你的内容。而在node.js中，值为假的断言将会导致一个AssertionError被抛出，使得代码执行被打断。这两者是有区别的。

4、console.count() 打印计数。输出他被调用了多少次。

for (let i = 0; i < 10; i++) {
    console.count('我被调用了');
}

在这里插入图片描述

5、 console.time()和console.timeEnd()打印计时。用来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，time()的参数名和timeEnd()的参数名要一样。可以没有参数，默认计时提示为default

// 立即启动计时器
console.time()

// 某些操作
for (let i = 0; i < 10000; i++) {
    // 某些操作				
}

// 立即结束计时器，并输出计时结果
console.timeEnd()

在这里插入图片描述

注意：

页面中最多能同时运行10,000个计时器
该方法并不会将结算结果返回到js中，而只是能打印在控制台上。所以不能使用此方法在js中来作为普通计时器使用或者进行性能收集器的一部分

6、console.dir() 输出以 JavaScript 形式表示的指定对象。如果正在记录的对象是 HTML 元素，将输出其以 DOM 形式表示的属性


// 一个对象
const obj = {
    name: '柚子小哥哥',
    age: 22,
    sex: '男'
}

在这里插入图片描述

7、 console.group() + console.groupEnd()将控制台输出的内容进行分组。

// console.groupCollapsed() + console.groupEnd()的形式，默认是折叠的
console.group('分第一组');
console.log('html')
console.dir({ type: '前端'}),
console.groupEnd('分第一组')

// console.group() + console.groupEnd() 默认是展开的
console.group('分第2组');
console.log('php')
console.dir({ type: '后台'}),
console.groupEnd('分第2组')

在这里插入图片描述

8、 console.table()可以将数组、对象等复杂类型的数据打印成表格的形式。

const arr = [
    {
        name: '小明',
        age: 22,
        likes: ['跳舞', '上网']
    },
    {
        name: '小刚',
        age: 23,
        likes: ['撸码', '计算机']
    }
];
				
console.table(arr)

在这里插入图片描述

9、 console.trace()堆栈中调用此方法的路径。

function test(name) {
    console.trace(`此处调用了${name}`)
}
				
function doSome (name) {
    test(name);
}
				
doSome('柚子小哥哥')

在这里插入图片描述

10、console.warn()打印一条警告信息；

11、 console.error()打印错误。

12、console.timeLine(‘标签参数’)配合 console.timeLineEnd(‘标签参数’)录制一段时间的时间轴

// 录制第一段时间的会话信息
console.timeline('测试循环100万相关的性能分析')
for (let i = 0; i < 1000000; i ++) {}
console.timelineEnd('测试循环100万相关的性能分析')


// 录制第二段时间的会话信息				
console.timeline('测试循环1000万相关的性能分析')
for (let i = 0; i < 10000000; i ++) {}
console.timelineEnd('测试循环1000万相关的性能分析')

在这里插入图片描述