console调试

简介

浏览器的开发者工具为我们提供了强大的调试系统，可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等。今天我们就来看看console调试的那些实用的调试技巧。

我们使用最多的就是console.log()了，当然多数情况下，console.log() 就能满足我们的需求，但是当数据变得比较复杂时，console.log() 就显得有些单一。

基础打印

console.log()

let age = 18;
console.log("message:", age) 

占位符：

• 字符串：%s
• 整数：%d
• 浮点数：%f
• 对象：%o或%O
• CSS样式：%c

        let name = "HYC";
        let age = 18;
        let height = 180;
        console.log('Name: %s, Age: %d', name, age)     // Name: HYC, Age: 18
        console.log('Age: %d, Height: %d', age, height) // Age: 18, Height: 180
        console.log('My Name is %cHYC ฅ՞•ﻌ•՞ฅ', 'color: skyblue; font-size: 30px;background: #000') 

这里将后面的变量赋值给了前面的占位符的位置，他们是一一对应的。
这种写法在复杂的输出时，能保证模板和数据分离，结构更加清晰。不过如果是简单的输出，就没必要这样写了

console.warn()

在控制台输出警告信息。它的用法和console.log是完全一样的，只是显示的样式不太一样，信息最前面加一个黄色三角。

console.error()

在控制台输出错误信息

能打印调用栈

  function a() {
            b();
        }
        function b() {
            console.error("error");
        }
        function c() {
            a();
        }
        c();

打印出来了函数函数调用栈的信息：b→a→c

console.info()

打印资讯类说明信息，它和console.log()的用法一致，打印出来的效果也是一样的

打印时间

console.time() & console.timeEnd()

获取一段代码的执行时间

console.time();

setTimeout(() => {
 console.timeEnd();
}, 1000);  //default: 1005.7451171875 ms

传递一个参数，该参数是一个字符串，用来标记唯一的计时器。如果有多个计时器，就需要使用这个标签来标记每一个计时器：

console.time("timer1");
console.time("timer2");

setTimeout(() => {
 console.timeEnd("timer1");
}, 1000);

setTimeout(() => {
 console.timeEnd("timer2");
}, 2000);

console.time() & console.timeLog()

需要使用console.time()来启动一个计时器，然后console.timeLog()就是打印计时器当前的时间，而console.timeEnd()是打印计时器，直到结束的时间
timeEnd 会终止当前的计时

console.time("timer");

setTimeout(() => {
    console.timeLog("timer")
  setTimeout(() => {
     console.timeLog("timer");
    }, 2000);
}, 1000);

// timer: 1002.80224609375 ms
// timer: 3008.044189453125 ms

console.time("timer");
setTimeout(() => {
  console.timeEnd("timer")
 setTimeout(() => {
     console.timeLog("timer"); // Timer 'timer' does not exist
    }, 2000);
}, 1000);

分组打印

console.group() & console.groupEnd()

这两个方法用于在控制台创建一个信息分组。一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束。

console.group();
console.log('First Group');
console.group();
console.log('Second Group')
console.groupEnd();
console.groupEnd();

console.groupCollapsed()

也需要使用console.groupEnd()来结束分组，区别是默认打印的信息是折叠展示的，而group()是默认展开的

        console.groupCollapsed();
        console.log('First Group');
        console.groupCollapsed('name2');
        console.log('Second Group')
        console.groupEnd();
        console.groupEnd();

打印计次

console.count()

获取当前执行的次数,也可以传一个参数来进行标记（如果为空，则为默认标签default）
可以使用这个方法来确定是否少调用或者重复调用了该方法。

  for (i = 0; i < 5; i++) {
            console.count();
            console.count('hello');
        }

console.countReset()

重置计算器，需要配合上面的console.count()方法使用。它有一个可选的参数label：

• 如果提供了参数label，此函数会重置与label关联的计数，将count重置为0。
• 如果省略了参数label，此函数会重置默认的计数器，将count重置为0。

  console.count();
        console.count("a");
        console.count("b");
        console.count("a");
        console.count("a");
        console.count();
        console.count();

        console.countReset();
        console.countReset("a");
        console.countReset("b");

        console.count();
        console.count("a");
        console.count("b");

其他打印

console.table()

console.table() 方法有两个参数，第一个参数是要打印的对象，第二个参数是需要打印的表格的标题，这里就是数组对象的属性值

const users = [ 
   { 
      "first_name":"Harcourt",
      "last_name":"Huckerbe",
      "gender":"Male",
      "city":"Linchen",
      "birth_country":"China"
   },
   { 
      "first_name":"Allyn",
      "last_name":"McEttigen",
      "gender":"Male",
      "city":"Ambelókipoi",
      "birth_country":"Greece"
   },
   { 
      "first_name":"Sandor",
      "last_name":"Degg",
      "gender":"Male",
      "city":"Mthatha",
      "birth_country":"South Africa"
   }
]

console.table(users, ['first_name', 'last_name', 'city']);

打印数组：

const app = ["facebook", "google", "twitter"];
console.table(app);

console.clear()

清除控制台的信息

console.assert()

用于语句断言，当断言为 false时，则在信息到控制台输出错误信息。它的语法如下：

console.assert(expression, message)

• expression: 条件语句，语句会被解析成 Boolean，且为 false 的时候会触发message语句输出；
• message: 输出语句，可以是任意类型。

        let num = 120
        console.assert(num < 100, "Node num is > 100");

console.trace()

console.trace()方法可以用于打印当前执行的代码在堆栈中的调用路径

function a() {
  b();
}
function b() {
  console.trace();
}
function c() {
  a();
}
c();

这里输出了调用栈的信息：b→a→c，这个堆栈信息是从调用位置开始的

console.dir()

可以在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示
在多数情况下，使用consoledir()和使用console.log()的效果是一样的。但是当打印元素结构时，就会有很大的差异了，console.log()打印的是元素的DOM结构，而console.dir()打印的是元素的属性

console.dirxml()

用于显示一个明确的XML/HTML元素的包括所有后代元素的交互树。如果无法作为一个element被显示，那么会以JavaScript对象的形式作为替代。它的输出是一个继承的扩展的节点列表，可以让你看到子节点的内容。其语法如下：
该方法会打印输出XML元素及其后代元素，对于XML和HTML元素调用console.log()和console.dirxml()是等价的。

console.dirxml(object);

console.memory

是 console 对象的一个属性，而不是一个方法。它可以用来查看当前内存的使用情况，如果使用过多的console.log()会占用较多的内存，导致浏览器出现卡顿情况。

• jsHeapSizeLimit: 堆内存大小的限制。
• totalJSHeapSize: 当前已分配的堆内存大小。
• usedJSHeapSize: 当前已使用的堆内存大小。