其实，console.log 不仅仅有一下应用

console.log() 这个应该是最常用的

console.error() 输出错误信息 会以红色显示

console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印

console.warn() 打印警告信息 会以黄色显示

console.info() 打印一般信息
console.log("%d年%d月%d日",2018,10,25);console.log("圆周率是%f",3.1415926);占位符console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

console.time()和console.timeEnd() 显示代码的运行时间
......

我们逛网站的时候经常发现很多网站控制台打印了好多有意思的东西，招聘信息，彩色样式......(ctrl+shift+J 打开控制台快捷键)

console.log("%c console.log %c 前端开发 %c 纯", "","color:red","color:orange;font-weight:bold");
console.log('%c Oh my heavens!','background: #222; color: #bada55','more text');
console.log("%c ", "background: url(https://www.cnblogs.com/images/cnblogs_com/lisaShare/1344634/o_lalala.gif) no-repeat center;padding-left:80px;padding-bottom: 100px;border-radius:50%;");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log("%c3D Text","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");
console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
 

第一张图是chrome的 第二章图是firefox 可能存在兼容问题吧

console.log的更多相关文章

  1. const let,console.log('a',a)跟console.log('a'+a)的区别

    const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...

  2. console.log("A"-"B"+"3")=？

    (点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...

  3. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  4. alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...

  5. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  6. JS高级群的日常！写一个从10到0的倒计时，用console.log打印，不可以用 setInterval！本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。

      JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力..   小森执行一 ...

  7. console.dir() 与 console.log() 区别

    Difference console.log prints the element in an HTML-like tree console.dir prints the element in a J ...

  8. 简述alert和console.log的区别

    生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...

  9. console.log()与alert()的区别

    1.alert() a.有阻塞作用,不点击确定,后续代码无法继续执行 b.alert只能输出string,如果alert输出的是对象,会自动调用toString()方法 eg:alert([1,2,3 ...

  10. firefox的console log功能

    http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html Firebug是网页开发的利器,能够极大地提升工作效率. 但是 ...

随机推荐

  1. Oracle 里 case 和decode的简单用法

    case 就相想当于C#里面switch    l 列:根据员工的职位,计算加薪后的薪水数据 如果职位是Analyst , 加薪10% 如果职位是Programmer 加薪5% 如果职位是clerk ...

  2. 二值化神经网络(BNN)基础学习(一)

    目录 1.简介 2.优点 3.基本原理 3.1 权重和激活值二值化[3] 3.2 乘法优化 3.3 权重和激活值更新 4.结论[3] 参考资料 1.简介 ​ 二值化神经网络,在浮点型(权重值和激活函数 ...

  3. 网络流板子/费用流板子 2018南京I题+2016青岛G题

    2018南京I题: dinic,链式前向星,数组队列,当前弧优化,不memset全部数组,抛弃满流点,bfs只找一条增广路,每次多路增广 #include <bits/stdc++.h> ...

  4. 013_UDP专项研究监控

    数据源: /proc/net/snmp; 采集方式:累计值,每10秒采集一次取差值: 指标:net.snmp.udp (key: system); Out Datagrams: udp层发送的数据包总 ...

  5. eclpse：安装explorer或eExplorer插件

    结论:个人感觉 eExplorer更好. 1.安装explorer Help->Eclipse Marketpalce find:explorer dian 点击"Install&qu ...

  6. java各种数据类型的数组元素的默认值

    public class DataTypeDefaultValue { public static void main(String[] args) { // string类型数组的默认值null / ...

  7. 清晰讲解SQL语句中的外连接，通用于Mysql和Oracle，全是干货哦

    直入主题: 我们做一个操作,将员工SCOTT的部门去掉,再次通过内连接查看数据,看看会产生什么现象? 使用内连接,查询数据 问题:找不到SCOTT员工了,只有13条数据,这显然不合理:这就是内连接的缺 ...

  8. struts2第一章-基本用法

    一.struts简介 1.回顾 MVC M-model模型层 V-view 视图层  前端界面 C-controller 控制层 struts2: Apache提供的开源的控制层框架,相当于servl ...

  9. Jmeter4.0+版本If Controller使用

    最近需要混合压测, 需要按比例混压多个接口, 需要使用if controller, 直接写比较的函式就是不通, 关于if controller的使用, 网上找了一些资料, 发现在jmeter4.0+版 ...

  10. C# 编译运行原理