控制台调试小技巧

Console.log打印的内容是什么？

    async function getName() {
      return 'jack';
    }

    function showPerson() {
      const person = {}
      getName().then(val => {
        person.name = val;
        person.age = 10;
      })
      console.log('person', person, 'name', person.name, 'age', person.age, 'gender', person.gender)
      person.gender = 'boy';
    }
    showPerson();

console打印引用类型与值类型的区别

• console.log()无法实时打印引用类型的值
• console.log()传入的参数如果指向一个可变对象，它会默默记录下这个引用
• 在你查看这个输出结果的时候，才会读取这个对象，把相关的属性和值显示出来
• 优点：最小化对于正在运行的程序性能的影响
• 缺点：调试一些对象时不准确
• 使用console.log()不准确，如果需要查看准确的值，可以使用debugger

function foo(){
      var person = {name:'lilei',age:10};
      console.log(person);
      console.log(person);
      console.log(person);
      setTimeout(()=>{
        person.age = 11;
      },2000);
      setTimeout(()=>{
        person.age = 12;
      },4000);
      setTimeout(()=>{
        person.age = 13;
      },6000);
    }
    foo();

console对象并不是属于JS的，而是属于浏览器的。
正因如此，各大浏览器关于console对象API的实现也各不相同。
（低版本的IE甚至没有console对象，chrome和火狐的方法也有差异。）

console.log(console);

浏览器兼容性：

关于控制台的小技巧

console的基本类型

console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');

• warn与error会有更明显的提示，本质上没有区别
• console.info()与console.log
  本质上是一样的，console.info()会有一个i小图标（chrome上并没有，firefox有）。

console.debug('使用console.debug()方法进行调试');

注：一般情况下，console.debug()输出的信息不会显示，需要设置log level，勾选上verbose

占位符

console.table

async function getResponse() {
      const dataList = [{
        name: 'tom',
        age: '10',
        gender: 'boy',
        address: 'Washington',
        phone: '123'
      },
      {
        name: 'lilei',
        age: '12',
        gender: 'boy',
        address: 'Shanghai',
        phone: '456'
      },
      {
        name: 'hanmeimei',
        age: '11',
        gender: 'girl',
        address: 'Beijing',
        phone: '789'
      }]
      return dataList;
    }

    async function getList() {
      let list = [];
      await getResponse().then(res => {
        list = res;
      })
      console.table(list);
      console.table(list, ['name', 'age'])
    }

    getList();

用来比较类似的数据:

console.table([[1,2,3], [2,3,4],[2,4]]);

console.time

**console.time(), console.timeEnd()**测量代码两个执行点之间所需的时间。
注：一对console.time(), console.timeEnd()中的参数要一致。

console.time('计时器1');
    for (var i = 0; i < 100; i++) {
      for (var j = 0; j < 100; j++) { }
    }
    console.timeEnd('计时器1');
    console.time('计时器2');
    for (var i = 0; i < 1000; i++) {
      for (var j = 0; j < 1000; j++) { }
    }
    console.timeEnd('计时器2');

// 测量一个百万级数组的初始化时间
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

console.count

计算当前位置执行的次数。

// 计算同一个字符串传递给函数的次数
function login(user) {
    console.count("Login called for user " + user);
}
users = [
    'Ming',
    'Li Lei',
    'Han Meimei'
];
users.forEach(function(element, index, array) {
    login(element);
});
login(users[0]);

注：反复执行上述代码，计数会累加，直到页面刷新

console.trace

打印当前的调用栈。

function d(a) { 
    console.trace();
    return a;
}
function b(a) { 
    return c(a);
}
function c(a) { 
    return d(a);
 }
var a = b('123');

console.assert

通过调用console.assert()，错误条件作为第一个参数，将断言放在JavaScript代码中。当这个表达式（第一个参数）的计算结果为false时，会有相应的控制台记录。

function isEven(num) {
  return num % 2 == 0;
}

console.assert(isEven(2), '是偶数');
console.assert(isEven(1), '不是偶数');

console.group

console.group()与console.groupEnd()是控制台打印的日志更加清晰可读

function foo(){
  console.group('foo');
  console.log('content in foo')
  bar();
  console.groupEnd();
}
function bar(){
  console.group('bar');
  console.log('content in bar');
  console.groupEnd();
}
foo();

console.dir

使用console.dir()方法对一个对象进行检查，并易于阅读和打印的格式显示（与log相比，firefox中dir默认展开显示，chrome中则显示类型）。

console.log({f1:'foo',f2:'bar'});
console.dir({f1:'foo',f2:'bar'});

chrome：

firefox：

console.dirxml

console.dirxml()方法主要用于以目录树的形式，显示DOM节点，若参数不是DOM节点，而是普通JS对象，则等同于console.dir()方法

console.dirxml(document.body);
console.dirxml([1,2,3]);

console.memory

console.clear()

清空输出，over。

监听事件

• monitorEvents()监听某一类型的事件。
• unmonitorEvents()停止监听。
• getEventListeners()获取DOM元素的监听器，返回指定对象上注册的事件。

monitorEvents(document.body, "click");
unmonitorEvents(document.body);

getEventListeners(document.getElementById('inner'))

• Event Listeners Inspector（事件监听器面板）获取有关事件监听器的信息。
  

关于debugger

• debugger-Javascript关键字
• debugger 语句调用任何可用的调试功能，例如设置断点。 如果没有调试功能可用，则此语句不起作用。
• 当 debugger 被调用时, 执行暂停在 debugger 语句的位置。就像在脚本源代码中的断点一样。
• 在Chrome中调试