酷玩console控制台
首先了解一下console对象有哪些常用方法:
Console.assert()
如果断言为false，则将一个错误消息写入控制台。如果断言是true，没有任何反应。
Console.clear()
清空控制台。
Console.count()
以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
Console.debug()
console.log方法的别称，使用方法可以参考Console.log()
Console.error()
打印一条错误信息，使用方法可以参考 string substitution。
Console.info()
打印以感叹号字符开始的信息，使用方法和log相同
Console.log()
打印字符串，使用方法比较类似C的printf格式输出，可参考 string substitution 。
Console.table()
将数据打印成表格。
Console.time()
计时器，接受一个参数作为标识。
Console.timeEnd()
接受一个参数作为标识，结束特定的计时器。
Console.warn()
打印一个警告信息。
接下来是本文重点，酷玩console，输出彩色文字，图片，超链接等。先看下API (chrome)。
| 格式化标识符 | 说明 |
| %s | 格式化为字符串 |
| %d %i | 格式化为整型 |
| %f | 格式化为浮点型 |
| %o | 格式化为DOM文档 |
| %O | 格式化为JavaScript Object |
| %c | 用CSS进行修饰 |
1. 格式化输出为字符串
console.log("%s",{"name":"ccued"}); // Object
2. 格式化为整型/格式化为浮点型
console.log("%d",123.456); // 123
console.log("%f",123.456); // 123.456
3. 格式化为dom
console.log("%o",document.body) ; // dom..
4. 格式化为Object
console.log('%O',{name:"ccued"}); // Object
5. 用CSS修饰
A)加些颜色与背景
console.log("%cccued","color:red;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px;border-radius:4px;");
console.log("%cccued%c.com","color:red;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px","color:green;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px;");
B)加个图片
console.log("%cdd","background:url(http://blog.lenton.cn/zb_users/upload/2017/01/201701081483861801265618.jpg);width:518px;height:378px;padding:189px 259px;font-size:0");
C)加个超链接
console.log("http://www.ccued.com");
放一个例子里，打开控制台看看效果：
<!DOCTYPE html>
<html>
<head>
<title>Console</title>
</head>
<body>
<script type="text/javascript">
//1. 格式化输出为字符串
console.log("%s",{"name":"ccued"});
//格式化为整型/格式化为浮点型
console.log("%d",123.456);
console.log("%f",123.456);
//格式化为dom
console.log("%o",document.body) ;
//格式化为Object
console.log('%O',{name:"ccued"});
//加些颜色与背景
console.log("%cccued","color:red;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px;border-radius:4px;");
console.log("%cccued%c.com","color:red;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px","color:green;font-size:36px;text-shadow:0 1px 0 #fff;background:#000;padding:4px 8px;");
//加个图片
console.log("%cdd","background:url(http://blog.lenton.cn/zb_users/upload/2017/01/201701081483861801265618.jpg);width:518px;height:378px;padding:189px 259px;font-size:0");
//加个超链接
console.log("http://www.ccued.com");
</script>
</body>
</html>
参与讨论