其实，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. vue-router.esm.js:1905 TypeError: Cannot convert undefined or null to object

    环境:vue+vuex+element 报错原因 ...mapState('isDialNumber') mapState如果传递一个参数,参数必须是数组 ...mapState(['isDialNu ...

  2. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  3. 20175333曹雅坤 实验二 Java面向对象程序设计

    实验二 Java面向对象程序设计 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计 ...

  4. Node Graph ......

    以前写过好多次,但是都没写完....主要是节点树的执行过程.这次打算好好写完. 这次目的是写一个 类似houdini sop下的 管理过程 目的是把大量流程中的杂乱比如后台处理,Arnold-> ...

  5. request模块

    一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 # 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模 ...

  6. 我的redis入门之路

    1:操作环境:vmware12 , centOs7 ,redis5.0.3 centOs7安装与下载链接(原文地址): https://blog.csdn.net/qq_42570879/articl ...

  7. Python IDLE配置清屏快捷键（Ctrl+L）

    1.在Python\Lib\idlelib下,新建一个ClearWindow.py文件(没有时就新建),内容如下: """ Clear Window Extension ...

  8. 先进过程控制之一：浅说APC

    先进过程控制(APC)技术作为在生产装置级的信息化应用,在优化装置的控制水平和提高生产过程的管理水平的同时,还为企业创造了可观的经济效益. 1.什么是APC 先进过程控制,简称APC,并不是什么新概念 ...

  9. jenkins+git（完全萌新的一篇，求指点）

    自己不熟悉所以打算写一份新手的自我理解,有错误欢迎大家指出 公司使用jenkins和git对代码进行管理 首先我们将代码放在git上,然后通过一些方法(我还不知道啥方法) 将git的代码放在jenki ...

  10. HDU 1060  Leftmost Digit

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...