Console API介绍

原文:http://getfirebug.com/wiki/index.php/Console_API#console.log.28object.5B.2C_object.2C_....5D.29

Firebug插件 和 Chrome的JavaScript控制台 都有一个全局变量conslole .

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

这样就能在控制台打印出 : Here is log!

console.log("Here is log!");

如果要输入的内容存在变量,可以用多个参数的方式实现:

var firstName = "Maple", familyName = "Jan";
console.log("My name is ", firstName, " ", familyName); // My name is Maple Jan

还可以像C语言那样使用占位符:

var firstName = "Maple", familyName = "Jan";
console.log("My name is %s %s", firstName, familyName); // My name is MapleJan

还可以这样写

var firstName = "Maple", familyName = "Jan", m = "m", a = "a", n = "n";
console.log("My name is %s %s. I am a ", firstName, familyName, m, a, n); // My name is Maple Jan. I am a  m a n

FireFox的Firebug插件还支持css样式:

console.log('%cThis is red text on a green background', 'color:red; background-color:green');

这样在控制台就会输出 绿色背景 红色字体的 This is red text on a green background

但此功能在Chrome中不支持.

占位符:

Pattern	Type
%s	String (字符串)
%d, %i	Integer (整数)
%f	Floating point number (浮点数)
%o	Object hyperlink (对象)
%c	Style formatting (CSS样式)

console.debug(object[, object, ...])
debug 的输入和 log 输出的效果一样,但在Firebug中会被记录下来,可以在"调试信息"中找到.

console.info(object[, object, ...])
在Firebug中,输出信息的前面有蓝色感叹号的图标,会被记录到"消息"中.

console.warn(object[, object, ...])
Firebug和Chrome控制台中,输出信息的前面有黄色感叹图标,会被记录到"Warning"中.

console.error(object[, object, ...])
Firebug和Chrome控制台中,输出信息的前面有红色叉图标,会被记录到"Warning"中.

console.log("Here is log");
console.info("Here is info");
console.debug("Here is debug");
console.warn("Here is warn");
console.error("Here is error");;

Firebug

Chrome

console.assert(expression[, object, ...])
判断表达式或变量是否为真.

console.clear()

清空控制台

console.dir(object)

返回对象的全部属性和方法.

console.dirxml(object)

以 xml 的树状结构返回对象.

console.trace()

追踪函数的调用路径,返回相应位置.

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

以树状结构分组显示,分组的内容全部展开显示.

console.groupCollapsed(object[, object, ...])

和 console.group() 作用一样,不过 console.groupCollapsed()分组的内容不展开显示.

console.groupEnd()

无论用 console.group() 还是 console.groupCollapsed(), 都要以 console.groupEnd() 为结束标记.

console.group("1");
console.log("1.1");
console.log("1.2");
console.log("1.3");
console.groupCollapsed("1.4");
console.log("1.4.1");
console.log("1.4.2");
console.groupEnd();
console.log("1.5");
console.groupEnd();

Firebug

Chrome

console.time(name) 和 console.timeEnd(name)

计算代码运行所需时间;

console.time("times");
var n = 0;
for(var i = 0; i < 9999999; i++) {
	n += 2;
};
console.timeEnd("times")

console.profile([title]) 和 console.profileEnd()

测试代码的性能;

function f(){
for(var i=0;i<999999;i++){}
}
console.profile('power');
f();
console.profileEnd();

console.count([title])

计算改行代码执行的次数

for(var i=0;i<999;i++) {
	console.count("aaa");
}

console.table(data[, columns])

以表格方式显示数组

var table1 = new Array(5);
for (var i=0; i<table1.length; i++)
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
console.table(table1);

上面这些API都是Firebug的,

虽然Chrome的控制器也基本支持,但兼容得还不算很好.