那些你不知道的 console 调试用法

在我们写项目的时候,肯定不会对console陌生, 但是,console还有很多方便的用法.

首先让我们打开Chrome控制台-开发者工具

1.向控制台输出信息的种类有以下几种

console.log('Hello world!');
console.info('Hello world!');
console.warn('Hello world!');
console.error('Hello world!');
console.debug('Hello world!');

结果如下:

2.console.dir() 显示一个对象的所有属性和方法

console.dir(document);

3.console.table() 将数据以表格的形式显示

这个方法需要一个必填参数, 该参数必须是一个数组或者一个对象.

var names = [
    {
        name: "小明",
        age: 20,
        gender: '男'
    },
    {
        name: "小红",
        age: 18,
        gender: '女'
    },
    {
        name: "小李",
        age: 22,
        gender: '男'
    }
];

console.table(names);

4.计算代码运行开始到结束的时间

注意: 每一个定时器的名字是唯一的, 也就是说不可以重名.

console.time('CodeRunTime');
let count = 0;
for (let i=0; i<100; i++) {
    count++;
}
console.timeEnd('CodeRunTime');

5.输出被调用的次数

console.count() 次函数接受一个可选参数

let user = "";
function greate () {
    console.count(user);
    return 'hi' + user;
}

user = 'Bob';
// 此时的lable是Bob
greate();

user = 'John';
// 此时的lable是John
greate();
greate();
console.count('John');

6.判断结果是否为真

console.assert() 如果结果为false, 则将一个错误消息输出到控制台, 如果结果为true, 则没有任何反应.

console.assert(1==1, 'Success');
console.assert(1==2, 'Error');

7.分组

console.group() 在控制台创建一个分组, 直到调用console.groupEnd()之后分组结束.

console.group('GroupOne');
    console.log('A');
    console.log('B');
    console.log('C');
console.groupEnd();

console.group('GroupTwo');
    console.log('D');
    console.log('E');
    console.log('F');
console.groupEnd();

风影OvO

风影OvO, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权 | 转载请注明原文链接

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐