奇奇怪怪的知识之带样式的console.log()

在这之前,经常使用的就只有info和log,并且也没有深入了解过它们之间的区别。
偶然想起见过一些带着样式的控制台打印,在这里做个汇总。

1.console.warn("警告信息");//打印一个警告信息
2.console.error("错误信息");//打印一条错误信息
3.console.table(Arr);//将数据打印成表格
4.console.log('%cTEXT','color: yellow; background: black; font-size: 24px;font-size:100px');//打印个带样式的信息
5.console.count();//可以用来统计函数调用次数
6.console.dir({});//适合打印json 具有折叠效果
7.console.time('array');
  var array= new Array(1000000);
  for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
  };
  console.timeEnd('array')//统计程序执行的时间
8.console.group("小学")
  // 内部嵌套
  console.group("一年级")
  console.log("语文")
  console.log("数学")
  console.groupEnd()
  //内部嵌套
  console.group("二年级")
  console.log("语文")
  console.log("数学")
  console.groupEnd()
  console.groupEnd()//分组显示控制台输出内容 默认展开  不想展开的话就使用groupCollapsed
9.console.trace()//获取当前代码在堆栈中的调用路径
10.console.clear()//清除控制台显示的所有内容
11.console.assert(true, '判断条件不成立')//断言输出
12.console.profile([profileLabel]) console.profileEnd();
//这是个挺高大上的东西,可用于性能分析。在 JS 开发中,我们常常要评估段代码或是某个函数的性能。
//在函数中手动打印时间固然可以,但显得不够灵活而且有误差。
//借助控制台以及console.profile()方法我们可以很方便地监控运行性能

大概就这么几种
最花哨的来了,那就是占位符,支持的占位符有四种,分别是字符(%s)、整数(%d 或%i)、浮点数(%f)和对象(%o)。
还有一种特殊的标示符%c,对输出的文字可以附加特殊的样式
%c标示符可以用各种 CSS 语句来为输出添加样式,举个栗子,background属性的url()中添加图片路径就可以实现图片的输出了

最后搞个3D文字来小刀割屁股

console.log("%c开开眼"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

原文地址:https://www.cnblogs.com/Lm-Ui-Gne/p/13724721.html