• 奇奇怪怪的知识之带样式的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")
    

  • 相关阅读:
    Mysql权限控制
    ionic中修改图标的问题
    在centos中使用vim编辑器
    使用laravel的任务调度(定时执行任务)
    在预装win8的电脑上换win7系统讲解
    游戏电脑需要看的配置
    数据结构学习之二叉树
    数据结构排序算法之希尔排序
    数据结构排序算法之归并排序
    数据结构排序算法之简单插入排序
  • 原文地址:https://www.cnblogs.com/Lm-Ui-Gne/p/13724721.html
Copyright © 2020-2023  润新知