你可能不知道的console

1. 概述

  • console 对象提供对浏览器控制台的接入。不同浏览器上它的工作方式是不一样的. 其次它是一个全局对象, 我们先在控制台将console打印出来, 看看它里面都有些什么东西

    你可能不知道的console_第1张图片

2. log()方法

  • console.log() 就是向web控制台输出一条信息. 参数可以是变量, 数字, 字符串等。
    // 常规下
    var name = '肖奇 马斯克'
    console.log('Hello');            // Hello
    console.log(name);               // Jack
    console.log(`Hello, ${name}`);   // 肖奇 马斯克
  • 除此之外, 还支持格式化输出:
    var name = '肖奇 马斯克'
    // %s         字符串
    // %d or %i   整数
    // %f         浮点数
    // %c         样式代码
    console.log('Hi, 我是%s。', name);
    console.log('%cHi, 我是%s。', 'color: rebeccapurple;', name);

    图片描述

3. info(), warn(), error()方法

  • // Info
    console.info('Hi, This is message');
    // warning 警告
    console.warn('On, Your operation may cause a security breach!');
    // Error 报错
    console.error('Shit! Variable does not exist!');

    你可能不知道的console_第2张图片

4. table()方法

  • 接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数。它会把数据通过表格的形式打印出来
    let array = [
      { name: '肖奇 马斯克', tag: '虞美人' },
      { name: '拉贾 佩奇', tag: '谷歌' },
      { name: '埃隆 马斯克', tag: '特斯拉' }
    ];
    console.table(array)

    你可能不知道的console_第3张图片

5. group()方法

  • console.group和console.groupWEnd就像一对标签一样。group在控制台创建一个新的分组, 输出到控制台上的内容都会被添加一个缩进, 表示该内容属于当前分组, 直到调用console.groupEnd()之后, 当前分组才结束。
    let items = [
      { name: '肖奇 马斯克', tag: '虞美人' },
      { name: '拉贾 佩奇', tag: '谷歌' },
      { name: '埃隆 马斯克', tag: '特斯拉' }
    ];
    items.forEach(item => {
      console.group(`${item.name}`);
      console.log(`${item.name}`);
      console.log(`%c代表标识  ${item.tag}`, 'color: red;');
      console.groupEnd(`${item.name}`);
    })

    你可能不知道的console_第4张图片

6. dir()方法

  • 在控制台中显示指定JavaScript对象的属性,并展现类似文件树样式的交互列表。
    console.dir(document.getElementById('header'));

    你可能不知道的console_第5张图片

7. count()方法

  • 输出每一次被调用的次数。
    console.count('肖奇 马斯克');
    console.count('拉贾 佩奇');
    console.count('埃隆 马斯克');
    console.count('埃隆 马斯克');
    console.count('拉贾 佩奇');
    console.count('埃隆 马斯克');
    console.count('埃隆 马斯克');
    console.count('拉贾 佩奇');

    你可能不知道的console_第6张图片

8. clear()方法

  • 清除控制台信息。
    console.clear();
    // 执行结果:Console was cleared

9. time()方法

  • 启动一个计时器(timer)来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字。 页面中最多能同时运行10,000个计时器。跟group一样, time也是配套的。 当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间。
    console.time('fetching data');
    fetch('https://api.github.com/users/anran758')
        .then(data => data.json())
        .then(data => {
            console.timeEnd('fetching data');
            console.log(data);
        });

    你可能不知道的console_第7张图片

10. assert()方法

  • 第一个参数接受一个断言(声明), 第二个参数是一个message。 如果断言为false,则将一个错误消息写入控制台;如果断言是true,就当做没发生。
    // 语法:console.assert(assertion, message [, subst1, ..., substN]);
    console.assert(1 === 1, '此条消息不会在控制台输出!');
    console.assert(1 === 2, '1 === 2 这是个错误!');

    图片描述

你可能感兴趣的