【转载】你不知道的 console，让 JS 调试更简单

╰+哭是因爲堅強的太久メ 2023-08-17 17:16 84阅读 0赞

对于前端工程师，肯定不会对console陌生，但是，又能深入了解多少呢？

### Chrome控制台-开发者工具 ###

windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打开控制台

### 1. 向 Web 控制台输出一条消息 ###

console.log('Hello world!');
    console.info('Hello world!');
    console.warn('Hello world!');
    console.error('Hello world!');
    console.debug('Hello world!'); 复制代码

![1][]

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

console.dir(document);
    复制代码

![1 1][]

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

这个方法需要一个必须参数data，data必须是一个数组或者一个对象

var names = [
        {
            name: "小明",
            age: 20,
            gender: '男'
        },
        {
            name: "小红",
            age: 18,
            gender: '女'
        },
        {
            name: "小李", age: 22, gender: '男' } ] console.table(names) 复制代码

![1 2][]

### 4. 计算操作占用的时常 ###

注意：每一个定时器必须拥有唯一的名字

console.time('timer');
    let count = 0;
    for (let i=0; i<100; i++) {
        count++;
    }
    console.timeEnd('timer'); 复制代码

![1 3][]

### 5. 输出被调用的次数 ###

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

let user = "";
    function greate () { console.count(user); return 'hi' + user; } user = 'Bob'; // 此时的lable是Bob greate(); user = 'John'; // 此时的lable是John greate(); greate(); console.count('John'); 复制代码

![1 4][]

### 6. 判断断言是否为真 ###

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

console.assert(1==1, 'Success');
    console.assert(1==2, 'Error');
    复制代码

![1 5][]

### 7. 分组 ###

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

console.group('今日事项');
        console.log('吃饭');
        console.log('睡觉');
        console.log('打豆豆');
    console.groupEnd();
    
    console.group('明日事项'); console.log('赏花'); console.log('赏月'); console.log('赏秋香'); console.groupEnd(); 复制代码

![1 6][]

原文出处： [https://juejin.im/post/5d42b1dae51d4561e9196b3c?utm\_medium=hao.caibaojian.com&utm\_source=hao.caibaojian.com][https_juejin.im_post_5d42b1dae51d4561e9196b3c_utm_medium_hao.caibaojian.com_utm_source_hao.caibaojian.com]

转载于:https://www.cnblogs.com/hzhjxx/p/11330882.html

[1]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8bf5f092b7f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8c28bcab2b9?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8c4e834e099?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8c7861b466d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 4]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8c999b7873c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8cbf42a0670?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 6]: https://user-gold-cdn.xitu.io/2019/8/1/16c4c8ce4c11d8c5?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[https_juejin.im_post_5d42b1dae51d4561e9196b3c_utm_medium_hao.caibaojian.com_utm_source_hao.caibaojian.com]: https://juejin.im/post/5d42b1dae51d4561e9196b3c?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com