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