你可能不知道的console

1. 概述

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

  

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!');

  

4. table()方法

• 接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数。它会把数据通过表格的形式打印出来

  let array = [
    { name: '肖奇 马斯克', tag: '虞美人' },
    { name: '拉贾 佩奇', tag: '谷歌' },
    { name: '埃隆 马斯克', tag: '特斯拉' }
  ];
  console.table(array)

  

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}`);
  })

  

6. dir()方法

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

  console.dir(document.getElementById('header'));

  

7. count()方法

• 输出每一次被调用的次数。

  console.count('肖奇 马斯克');
  console.count('拉贾 佩奇');
  console.count('埃隆 马斯克');
  console.count('埃隆 马斯克');
  console.count('拉贾 佩奇');
  console.count('埃隆 马斯克');
  console.count('埃隆 马斯克');
  console.count('拉贾 佩奇');

  

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);
      });

  

10. assert()方法

• 第一个参数接受一个断言(声明), 第二个参数是一个message。 如果断言为false，则将一个错误消息写入控制台；如果断言是true，就当做没发生。

  // 语法：console.assert(assertion, message [, subst1, ..., substN]);
  console.assert(1 === 1, '此条消息不会在控制台输出!');
  console.assert(1 === 2, '1 === 2 这是个错误!');