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的情况下,第二个参数的内容才会被打印到控制台

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券