console使用小技巧

作为一个前端开发者，可能每天都会用到console对象的方法进行调试等，但是你真的了解console么？什么是console呢？

最初，console是firebug提供的一个内置对象，它可以用于我们跟踪调试在网页加载过程中的各类信息。

那么我们首先来看下它的基本用法。

一、基本用法

1
console.log("log info");

根据信息的不同性质，console对象还有4种显示信息的方法，分别是：

  • 一般信息console.info()
  • 出错信息console.debug()
  • 警告提示console.warn()
  • 错误提示console.error()

二、格式化输出

console对象支持类似于C语言printf占位符写法的输出，一些复杂的输出利用这种方法可以让结构更加的清晰。

先看一个例子:

1
console.log('%d + %d = %d', 1, 1, 2);

console支持的占位符格式有如下几种：

  • %s : 字符串

  • %d / %i ： 整数

  • %f ： 浮点数

  • %o / %O ： 对象，可以用来查看一个对象内部的情况。虽然对于普通对象这两者打印出来的信息是一样的，但是需要注意的是，在Chrome控制台中打印的如果是一个dom节点，那么此时二者是有区别的，%o打印的为和非格式化输出的结果一样，包括节点、内容、子节点等，但是对于%O来说，打印的是dom节点中各个对象的属性。

  • %c ： css样式

下面我们来看几个例子：

1
2
3
//chrome中
console.log("%O",  document.body);
console.log("%o",  document.body);

1
console.log("%c%s %chas %d fingers", "color:green;text-shadow:1px 1px 1px rgba(0,0,0,.2); font-size: 16pt", "amo", "color: #333333; font-size: 16pt", 10);

原来在控制台里还可以进行样式的控制，是不是很有趣？但是对于IE并不支持样式，所以注意哦既然可以加样式，自然而然就会问，那能不能进行图片的输出呢，答案是否定的（firefox提供console.image插件），可是我们可以通过背景图的方式来进行图片的输出。只是这里的图片大小需要通过padding和line-height来控制。用的时候请谨慎调节(chrome下生效)。

看个例子：

1
2
//chrome
console.log("%c", "padding: 80px 100px;height:1px; background:url(http://p1.gexing.com/G1/M00/24/A6/rBACFFH2hjPAQgmdAAAVighCO6A353_200x200_3.jpg);line-height:200px");

三、分组输出

如果需要打印较多的信息，可以利用分组输出进行结构化的管理。console.group()定义组的开始，console.groupEnd()定义组的结束。

1
2
3
4
5
6
7
8
9
console.group("amo");
console.log("a's hand");
console.log("a's work");
console.groupEnd();
console.group("zicheng");
console.log("z's hand");
console.log("z's work");
console.groupEnd();

四、其他用法

  • console.dir()显示一个对象所有的属性和方法
1
2
var cat = {"eyes": 2, "ears": 2, "sayHi": function(){ return "miao~"; }};
console.dir(cat);

  • console.trace()追踪函数调用时的栈信息

  • 计时功能

console.time()和console.timeEnd()，利用它们分别在代码执行开始和结束时打上标识，以用来显示代码的运行时间。

1
2
3
4
5
console.time("for");
for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}
}
console.timeEnd("for"); //for: 3.000ms
  • 计数器

console.count()，用于记录函数被调用的次数统计，在某些复杂场景的调试中很有用。

1
2
3
4
5
function login(user) {
    console.count("Login called for user '" +  user + "'");
}
login("amo"); //Login called for user 'amo': 1
login("zicheng"); //Login called for user 'zicheng': 1
  • 性能分析

console.profile()，可以帮助我们进行性能分析，找出瓶颈。（firefox有效）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Foo(){
    for(var i=0;i<10;i++){
        funcA(1000);
    }
    funcB(10000);
}
function funcA(count){
　　 for(var i=0;i<count;i++){}
}
function funcB(count){
 　　for(var i=0;i<count;i++){}
}
console.profile('profile');
Foo();
console.profileEnd();

由上图可以看到各个函数执行的情况。

  • 清空所有调试信息
1
console.clear();

需要注意的是浏览器兼容性

对于IE较老版本，或者是某些属性，并不是所有浏览器都兼容的，所以调试信息请尽量在开发时使用，并不要带到线上。但是我们也看到有些网站会将招聘信息通过console.log()的方式输出到控制台中，这个时候就要注意做好兼容。以下为腾讯所做的处理，仅供参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
(function(){
    if(!console || !console.log){
        return;
    }
    var toFixedVersion = function(ver, floatLength){
        ver= (""+ver).replace(/_/g,".");
        floatLength = floatLength || 1;
        ver = String(ver).split(".");
        ver = ver[0] + "." + (ver[1] || "0");
        ver = Number(ver).toFixed(floatLength);
        return ver;
    };
    var ua = navigator.userAgent.toLowerCase(),
    browserName,
    browserVer,
    s;
    var setVer = function(name, ver){
        browserName = name;
        browserVer = ver;
    };
    (s = ua.match(/chrome\/([\d]+)/)) ? setVer("chrome",toFixedVersion(s[1])) : 0;
    var isSupport = (browserName === 'chrome' && browserVer >= 25);
    if(isSupport){
        var imgList = [];
        for(var i = 0; i < 9; i++){
            imgList.push('padding:49px 55.5px;line-height:111px;background:url(http://codestar.alloyteam.com/1/style/image/beauty' + (i+1) +   '.jpg) no-repeat;');
        }
        console.log('%c云云无情，腾腾有爱', 'font-size:18px;text-shadow: rgb(153, 153, 153) 2px 2px 2px;font-weight:bold;line-height:1.8;font  -family:"微软雅黑"');
        console.log('%c', imgList[Math.round(Math.random()*(imgList.length-1))]);
        console.log('%c如果你没有100个“往来”好友，那就来腾讯领红包吧！红包精彩，腾讯更精彩！', 'color:#08c;');
        console.log('http://www.ipresst.com/jointencent');
        console.log('\n-------------华丽的分割线-------------\n');
        console.log('%c【前端特工】\n“据内线消息，TX公司将于近期推出一个新的HTML5重磅产品。\n公司担心该产品会带来威胁，特命你潜入TX，探查底细  ……”\nhttp://codestar.alloyteam.com\n\n', 'line-height:1.8;');
    } else {
        console.log('【云云无情，腾腾有爱】\n如果你没有100个“往来”好友，那就来腾讯领红包吧！红包精彩，腾讯更精彩！\nhttp://www.ipresst.com/jo  intencent');
        console.log('\n-------------华丽的分割线-------------\n');
        console.log('【前端特工】\n“据内线消息，TX公司将于近期推出一个新的HTML5重磅产品。\n公司担心该产品会带来威胁，特命你潜入TX，探查底细……  ”\nhttp://codestar.alloyteam.com\n\n');
    }
})();

参考资料

console-api