无聊的时候，喜欢打开一些无聊的网页，搞一下chrome爸爸的控制台。
常规操作
- 开发前端页面过程中，少不了的就是开启控制台，打印一些定义的东西，看看到底输出是什么；
- 打个断点，让代码飞慢一点，一步步的……深.……入……；
- 瞅一瞅network的加载资源，静态资源、参数、请求头，如果实用，顺势扒下来模拟一下，做个小东西；
- 找一下奇怪的dom元素，看看css样式是怎样的；
- 某些页面音频需要充钱？不慌，能在页面试听的，打开控制台，全局搜索一下<audio,可能会有意外的收获；
然而，在忙碌的开发过程中，哪儿有这么悠闲，用的最多的就是:
console.log("变量a初始值:",a);
xxxxx；
对a的某些赋值；
xxxxx；
console.log("变量a变化后的值:",a);
或者是：
$.ajax({
url:"/xxx",
type:"post",
data:{ start:0},
dataType:"json",
success:function (data) {
//先抱着试一试的态度对比下后端返回的数据及格式与接口文档
console.log(data);
}
})
或者……常规操作，不多说
换个姿势操作
想必你一定打开过百度首页，按过F12，如果那样，你一定了解百度也会觊觎你的才华，毕竟常打开控制台的毕竟多数是程序猿嘛。
一张网页，要经历怎样的过程，才能抵达用户面前？
一位新人，要经历怎样的成长，才能站在技术之巅？
探寻这里的秘密；
体验这里的挑战；
成为这里的主人；
加入百度，加入网页搜索，你，可以影响世界。
再来看看知乎
以及滴滴
hello，程序员哥哥，又见到这个彩蛋是不是很开心？
我知道你此刻想吐槽，想攻击我们官网；
更重要的是你想优化，想改变这个网站，甚至是整个滴滴。
找到了合适了你的起点了么？
从这扇门开始改变滴滴，改变世界，改变自己。
芝麻开门:发送简历至 hr@diditaxi.com.cn（ 邮件标题请以“姓名-应聘XX职位-来自console”命名）
你创造世界的舞台：：http://job.didichuxing.com/
console.log（"竟然可以这样玩儿打印消息么？")
他们的控制台太高逼格了，我的控制台信息就不一样，我姿势到位啊！
嗯,姿势很不错吧？搞怪的同时，了解了console的一些有用的用法:
1. console.warn("网络不稳定") -----打印一个警告信息;
2. console.error("网络错误") -----打印一条错误信息;
3. console.group('嘲讽(💩)') -----打印树状结构，配合groupCollapsed以及groupEnd方法;
4.console.groupEnd()-----结束当前Tree;
5.console.table(Arr)------将数据打印成表格;
var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
]
console.table(Arr);
- console.log()的变量值替换
console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415);
//输出：圆周率整数部分：3，带上小数是：3.1415
7.console.assert(false, "我们好像在哪儿见过")-----判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息。
8.console.log()的css样式设置
先看下代码:
console.log("%c3"," 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:6em;line-height:60px;")
console.log("%c2"," 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:4em;line-height:60px;")
console.log("%c1"," 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:2em;line-height:60px;")
console.log('%c南京热还是东京热.', 'color: #fff; background: #f40; font-size: 24px;border-radius:0 15px 15px 0;padding:10px;');
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;width:1px;height:40px;padding:2px;")
console.log("%c 热 热 热", "color:red;font-size:30px;font-weight:bolder;padding:50px 420px;line-height:10px;background:url('http://img.zcool.cn/community/0127c0577e00620000012e7e12da0e.gif') repeat-x;background-size:contain;");
大致意思就是第一个参数是"%c" + 打印的内容，第二个参数就是css样式了。
是不是换个姿势很简单？
赶快做些高逼格的打印信息放在自己的网站上吧，别人偷瞟代码的时候一定会大吃一斤！
技术文档我就不扒过来了，想要深……入……研究一下的，进……去……看看MDN
