console 输出信息美化

  不久前在一些前端的网站上看到的效果,以前觉得console只是拿来做做调试,不过现在看到别人网站的console美化效果,这个还可以作为一种网站个性来显示的..

%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;
可以尝试多个样式,每碰到一个%c开头就会应用对应的样式:

console.log("%c 第一个信息 %c 第二个信息 %c 第三个信息", "color:red","","color:orange;font-weight:bold") 

效果图:

比如还可以写样式生成彩色文字

console.log(‘%c彩色文字啊 ‘, ‘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("%c ", "background: url(http://images.cnblogs.com/cnblogs_com/cnsevennight/619778/o_smohan_logo.png) no-repeat center;padding-left:300px;padding-bottom: 200px;")

效果图:

  

console参数API

console.log(object[, object, …])

使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的:

console.log(“The %s jumped over %d tall buildings”, animal, count);
console.log(“The”, animal, “jumped over”, count, “tall buildings”);

console.debug(object[, object, …])

向控制台输出一条信息,它包括一个指向该行代码位置的超链接。

console.info(object[, object, …])

向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。

console.warn(object[, object, …])

同 info。区别是图标与样式不同。

console.error(object[, object, …])

同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, …])

断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。

console.dir(object)

输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。

console.dirxml(node)

输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。

console.trace()

输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, …])

输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()

同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)

计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。

注:console.time(slugName) – console.timeEnd(slugName) – 记录某一个时间戳的执行时间,可用于优化循环语句

console.profile([title])

与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。

console.count([title])

输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。

console.clear()

清空控制台

命令行

控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍:

$(id)

返回一个给定 id 的元素。

$$(selector)

返回给定的 css 选择器匹配到的一组元素。

$x(xpath)

返回给定的 XPath 表达式匹配到的一组元素。

$0

在 HTML 面板中选中的元素。

$1

上一次在 HTML 面板中选中的元素。

$n(index)

访问最近 5 个被选中过的元素,index 的范围: 0 – 4。

dir(object)

同 console.dir(object)。

dirxml(node)

同 console.dirxml(node)。

clear()

同 console.clear()。

inspect(object[, tabName])()

在合适的(或一个指定的) tab 中检视一个对象。

keys(object)

返回一个对象的所有属性的键。

values(object)

返回一个对象的所有属性的值。

debug(fn)

在函数第一行添加一个断点,使用 undebug(fn) 移除断点。

monitor(fn)

开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。

monitorEvents(object[, types])

开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:

monitorEvents($0,[‘click’])

上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。

profile([title])

同 console.profile([title])

console在线API文档

console的API在线文档: http://getfirebug.com/wiki/index.php/Console_API

时间: 2024-10-07 07:08:04

console 输出信息美化的相关文章

控制台console输出信息原理理解

Eclipse控制台输出信息的控制 标签: Eclipse控制台输出信息 2015-01-02 14:11 22454人阅读 评论(1) 收藏 举报  分类: Some Tips(15)  版权声明:本文为博主原创文章,未经博主允许不得转载. 当你在Eclipse中 running/debugging一个应用程序的时候,有关该应用程序的运行调试信息及日志信息都会输出到控制台(console )显示,但是Eclipse只会显示最后一部分的日志信息,如果你的应用程序会产生大量的运行调试信息及日志信息

u-boot启动输出信息分析——基于tiny6410

CPU: [email protected] Fclk = 532MHz, Hclk = 133MHz, Pclk = 66MHz, Serial = CLKUART (SYNC Mode) Board: MINI6410DRAM: 256 MBFlash: 0 kBNAND: 2048 MB In: serialOut: serialErr: serialMAC: 08:90:90:90:90:90下面代码的输出信息就可以在里面查得到1.初始化本阶段要使用到的硬件设备2.检测系统内存映射3.将

php cli模式或者内置server命令行输出信息

1 /* 2 * php cli模式或者内置server命令行输出信息 3 * param fixed $data 参数可以是除了对象以外的所有数据类型,比如:字符串,数组,jason等 4 */ 5 public function console($data) { 6 7 // 中文编码处理 8 $wp = json_encode ( $data, JSON_UNESCAPED_UNICODE ); 9 10 $stdout = fopen ( 'php://stdout', 'w' ); 1

创建Vue.js对象:我的第一个Vue.js输出信息

<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</title><script src=”js/vue.js”></script></head><body><div id=”app”><p>{{ message }}</p></div> <script&g

【转】MFC中调试过程中查看输出信息 -- 不错

原文网址:http://blog.sina.com.cn/s/blog_4e24d9c501014o39.html 笔记&&方便查阅. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PrintWriter 输出信息乱码

异步方式,返回json给前台时,向前台输出信息使用PrintWriter,但是在输出的过程中,出现乱码的情况. 于是我想起来response.setCharacterEncoding("utf-8");设置页面编码,以及response.setContentType("text/html; charset=utf-8");设置内容类型编码,但是在实验后不成功,乱码依旧. PrintWriter out = response.getWriter(); response

mysql输出信息保留++--边框方法

我这方法是通过expect实现的. 安装expect yum install -y expect 操作: [[email protected] ~]# cat test.sh /usr/local/mysql/bin/mysql -e "select version();"[[email protected] ~]# ll test.sh -rwxr-xr-x 1 root root 50 08-13 16:44 test.sh[[email protected] ~]# sh tes

liblinear 训练时去掉输出信息

liblinear 在训练时,会有个输出信息,而且这个信息又很长, 在多次迭代时,会影响查看体验, info("\noptimization finished, #iter = %d\n",iter); 等等. 这里info #if 1 static void info(const char *fmt,...) { char buf[BUFSIZ]; va_list ap; va_start(ap,fmt); vsprintf(buf,fmt,ap); va_end(ap); (*li

C# Console 输出

C# Console 输出 C#控制台输出有两种方法:Write()和WriteLine(),它们都是命名空间System中Console类的方法,能够直接输出C#提供的所有基本数据类型.区别是后者输出后换行. 1.基本输出 基本数据类型的简单输出形式为: Console.Write("格式串{参数序号}",参数表); {0}和{1}分别代表后面的参数,0为第一个参数,1为第二个,以此类推. Console.Write(对象); 2.格式化输出 其形式为: Console.Write(