console有趣的用法

实验看点

1.修改控制台输出内容样式
2.重写控制台输出格式(追加出错日期)
3.以表格的形式显示控制台输出内容
4.如何统计一个函数在程序中被调用的总次数
5.以便于阅读的形式输出打印内容
6.统计程序执行的时间
7.分组显示控制台输出内容
8.获取当前代码在堆栈中的调用路径
9.清除控制台显示的所有内容
10.断言输出

1.修改控制台输出内容样式

console.log("ddd")

javascript中的控制台输出语法各位已经很熟知了

但是如何将输出在控制台上的内容改变css样式呢?

console.log(
  '%c改变样式',
  'color: yellow; background: red; font-size: 24px;font-size:100px'
)

Mac ：option + command + c 打开safari 控制台 输入上面代码后 按enter键,可以看到下面的效果

image.png

---

2.重写控制台输出格式(追加出错日期)

['log', 'info', 'warn', 'error'].forEach(function(methodName) {
    console[methodName] = console[methodName].bind(
      console,
      new Date().toISOString()
    );
  });

输入

console.log("报错了") 2018-12-10T08:17:14.846Z 报错了

---

3.以表格的形式显示控制台输出内容

var students = [
    { name: "小明", sex: "10" },
    { name: "小黄", sex: "12" },
    { name: "小路", sex: "13" }
  ];
  
  console.table(students);

转换的内容如下图所示

image.png

---

4.如何统计一个函数在程序中被调用的总次数

function sayTo(){
    console.count()
}

sayTo() //  1
sayTo()  // 2
sayTo() // 3

image.png

5.以便于阅读的形式输出打印内容

var person  = {name:"酷走天涯",sex:27,address:'上海市浦东新区反病毒研究所'}
console.log(person)
console.dir(person)

image.png

---

6.统计程序执行的时间

console.time('array');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('array');

Array initialize: 347.118ms

注意 参数 array 是设置计数器的名称，必须保持两次调用参数一致

---

7.分组显示控制台输出内容

console.group
console.groupEnd
必须成对出现

console.group("小学")
// 内部嵌套
console.group("一年级")
console.log("语文")
console.log("数学")
console.groupEnd()
//内部嵌套
console.group("二年级")
console.log("语文")
console.log("数学")
console.groupEnd()
console.groupEnd()

image.png

默认分组是展开的 如果不想展开可以使用折叠的写法

console.groupCollapsed("小学")
// 内部嵌套
console.groupCollapsed("一年级")
console.log("语文")
console.log("数学")
console.groupEnd()
//内部嵌套
console.groupCollapsed("二年级")
console.log("语文")
console.log("数学")
console.groupEnd()
console.groupEnd()

需要点击才能展开

image.png

---

8.获取当前代码在堆栈中的调用路径

console.trace()

at Object.<anonymous> (/test.js:1:71)
at Module._compile (module.js:641:30)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Function.Module.runMain (module.js:682:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:613:3

---

9.清除控制台显示的所有内容

console.clear()

10 断言输出

console.assert(true, '判断条件不成立')

第一个参数为false的情况下,第二个参数的内容才会被打印到控制台