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 这是个毛病!');