JavaScript------你真的会用console来调试打印么？

部分打印API展示如下：

assert()	如果断言为false，则将一个错误消息写入控制台。如果断言是 true，没有任何反应。
clear()	清空控制台.Google Chrome浏览器中，如果用户在设置中勾选了“Preserve log”选项，console.clear()将不会起作用。
count()	输出 count() 被调用的次数。此函数接受一个可选参数 label。[lable]:1 如果 label 被忽略，此函数输出 count() 在其所处位置上被调用的次数。
countReset()	重置计数器。此函数有一个可选参数 label。console.countReset([label]);
debug()	输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。√ verbose
dir()	在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。
dirxml()	显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示，那么会以JavaScript对象的形式作为替代。
error()	向 Web 控制台输出一条错误消息。
group()	在 Web控制台上创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd()之后,当前分组结束.
groupCollapsed()	和 console.group()方法的不同点是,新建的分组默认是折叠的.用户必须点击一个按钮才能将折叠的内容打开.
groupEnd()	group()的对应尾部方法，在 Web控制台中退出一格缩进(结束分组).
info()	向web控制台输出一个通知信息。仅在Firefox，web控制台的日志中的项目旁边会显示一个小的‘I‘图标
log()	向 Web 控制台输出一条消息。
table()	将数据以表格的形式显示。 这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。
time()	console.time(timerName);  启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
timeEnd()	console.timeEnd(label); 停止一个通过 console.time() 启动的计时器,
timeLog()	console.timeLog(label);  在控制台输出计时器的值，该计时器必须已经通过 console.time() 启动。如果没有传入 label 参数，则以 default: 作为引导返回数据：default: 1042ms
trace()	console.trace( [...any, ...data ]);   向 Web控制台 输出一个堆栈跟踪。
warn()	向 Web 控制台输出一条警告信息。 console.warn(obj1 [, obj2, ..., objN]); console.warn(msg [, subst1, ..., substN]);

实例调用展示如下：

log info error warn 四个打印的简单展示

console.log('默认消息！')
console.info('提示消息！')
console.error('错误消息！')
console.warn('警告消息！')

// log和info本质差不多，相差不大！！！
// warn的话就是有黄色的警告背景，参数展示上也有些许不同
// error的话同warn多个背景，红色背景


// 最最最重要的是这几个都可以都可以用通配符来插入对应的文字或者样式！！！

---

console.assert() 

let BOOLEAN = true
// 第一个参数为true,则无打印
console.assert(BOOLEAN, 'params', [1,2,3,4,5])
undefined
// 第一个参数为false,则打印后面对应的值
console.assert(!BOOLEAN, 'params', [1,2,3,4,5])
VM6195:1 Assertion failed: params (5) [1, 2, 3, 4, 5]

---

console.table() 

const data = [
  {
    id: 1,
    name: 'Node'
  },
  {
    id: 2,
    name: 'React'
  },
  {
    id: 3,
    name: 'Vue'
  },
  {
    id: 4,
    name: 'Angular'
  }
]

console.table(data)

---

console.clear()

在代码任意需要清除日志的地方直接调用console.clear(),清除浏览器上面的打印日志！！！

---

console.count()

//起过名字的打印值:
console.count("count-name");
count-name: 1
count-name: 2

//未起名字的打印值:
console.count();
default: 1
default: 2

---

  console.countReset()

console.countReset()  // 重置count调用次数为0
// 如下：
1. 直接调用的话，只会清除掉默认的count打印
2. 对于具名count调用,要在调用时也加一个特定的key字符串参数，指定清除对应count

 

---

 console.debug()

console.debug(对象1 [, 对象2, ..., 对象N]);
console.debug(消息[, 字符串1, ..., 字符串N]);

//一般情况下使用无打印数据，要开启下列开关：

---

 console.dir() |  console.dirxml()

dir和dirxml的实测区别，就打印对象时，后者直接展示对象的值，方便一点

---

console.error()

console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);

---

console.group() | console.groupEnd()

console.group('前端');
console.log('前端-react.js');
console.log('前端-vue.js');
console.log('前端-angular.js');
console.groupEnd();

console.group('后端');
console.log('后端-java');
console.log('后端-python');
console.log('后端-php');
console.groupEnd();

 

 

---

 console.groupCollapsed()

---

  console.info()

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);

同log一样，区别不大！！！

---

   console.log()

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.log(`temp的值为: ${temp}`)


console.log("%d年%d月%d日", 2016, 8, 22); // console支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）
console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整数
console.log("%f",3.1415926);//%f小数
console.log("%o",console);//%o表示对象
console.log("%c自定义样式","font-size:30px;color:#00f"); // %c 后面的字符会被样式修改
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

 

---

 console.time()  console.timeEnd()

计时打印的方法，匿名time要配对匿名的timeEnd;具名time要配对具名的timeEnd;
console.time(timerName);
console.timeEnd(timerName);

---

 console.timeLog()

timeLog的参数就一个，就是需要打印时间的具名time
1. 在timeEnd前可以无限次调用，时间叠加打印
2. 具名的要加参数字符串名称，匿名的则可以直接调用

time/timeLog/timeEnd 三个函数一般配对使用最为完美！！！

// 如下图展示：

---

 console.trace()

该函数将在控制台打印出从 console.trace() 被调用的位置开始的堆栈信息。
直接展示的是调用的先后顺序！

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

// 打印如下： 
bar
foo
<anonymous>