详解js console对象 让浏览器控制台更精彩

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/8/16

Chrome(版本 25.0.1364.172 m)下的console对象的方法有:

memory profiles _commandLineAPI debug error info log warn dir dirxml trace assert count markTimeline profile profileEnd time timeEnd timeStamp group groupCollapsed groupEnd clear

以上方法,你可以通过下边的js获取到:

for(var m in console) console.log(m);

FireFox(版本 22.0)下的console对象的方法有:

该有的都有的...(掠过),上边版本的Chrome没有table,此版本FF有的(下边会介绍table的使用)。

console的方法不全部介绍,此文,仅介绍常用的有意义的几个method。

作为一名前端开发工程师,对浏览器控制台肯定都不陌生。加上最近大家纷纷在控制台玩出花来(douban百度知道),大家对Console的热情又上升了不少。这里记录一下我知道的几个小技巧,欢迎大家补充。

本文所有内容我都在Chrome28自带Console和Firefox的Firebug1.12试过。Firefox也自带了一个Console,不过有点弱,用Firefox的同学还是建议装个Firebug。

格式化log

console.log除了能接受多个参数,还支持指定输出内容的格式,还可以这样混着用:

console.log("I am %s and I have:", myName, thing1, thing2, thing3);

下面是console.log支持的几种格式:

格式 说明
%s 字符串
%d, %i 整数(不支持指定位数)
%f 浮点数(不支持指定位数)
%o 对象
%c CSS样式

其中比较有趣的是%c,可以这么玩(我很佩服想到在Console做招聘广告甚至还附带网站logo的同学):

console.log('%c小呀嘛小二郎,背着那书包上学堂,不怕太阳晒,也不怕那风雨狂...啦啦啦,我是卖报的小行家...', 'font-size:30px;background:url(http://camnpr.com/upload/2013/8/logo@93x30.png) top left no-repeat #e48632');
点击测试console
注意:背景图片中的no-repeat在Chrome(版本 25.0.1364.172 m)下无效,显示会平铺。

指定log的级别

与很多其它编程语言类似,控制台的log也支持各种级别,console.debug(),console.info(),console.warn(),console.error(),不同级别的log会标上不同的icon。

合理使用不同的log级别,一方面可以方便地筛选自己关注的log,另一方面有些级别的log还会在控制台打印调用堆栈和源码位置。

使用断言

有时候,我们需要在特定情况下打印log,这时候console.assert方法就很有用:

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

如果expression返回的不是true,控制台会打印异常信息及源码位置。

log分组

有时候需要打印在控制台的log太多,我们可以对其分组,这样可以按组来折叠log信息。具体效果是怎样的,大家试下就知道了:

console.group("分组1");
    console.log(1);
    console.group("分组1.1");
        console.log(1.1);
console.groupEnd();
console.groupEnd();
console.group('分组2');
    console.log(2);
console.groupEnd();

输出表格

console.table方法可以在控制台打印表格,这在输出复杂信息时很有用。这个方法在Chrome和Firebug下有点点不一样,大家可以自己试试:

console.table({'first' : {'name' : 'ququ', 'age' : 27}, 'second' : {'name' : 'kitty', 'age' : 100}});

console.table的高级用法,可以参考此文

计时器

很多时候,我们用两个new Date相减获取时间差,其实也可以这样用:

console.time('time1')
console.timeEnd('time1');
time1: 15922.000ms

改变当前所在window

在Chrome开发工具的Console标签下,有个写着“<top frame>”的下拉框,通过它我们就可以选择所处的window环境。

Firebug中要稍微麻烦一点,需要用到cd方法,它唯一的参数就是要改变到的window,类似这样:

cd(window.frames[0])
当前 window: Window about:blank
cd(top)
当前 window: Window www.camnpr.com

快速引用

控制台内置了一些变量,可以让我们快速引用某些内容。这里介绍两个我最常用到的:

$_,引用控制台最近一次运算结果,如:

1+1
2
$_+1
3

$0,引用当前选中的元素。在控制台,我们可以方便的选中或“吸中”某个元素,然后通过$0就可以使用它,大家动手试下就明白了。更爽的是,Chrome开发工具“Elements”等标签下,可以通过esc键呼出Console,谁用谁知道。

随便提一句,clear()和console.clear()都可以清空Console已有的信息。

来源:http://www.imququ.com/post/about-browser-devtools-console.html

扩展阅读

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/learning-js-console-object.html