1、console.log(object[, object, …])
console.log 输出信息到 console 窗口,支持多个参数,并一起显示:
console.log('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');
console.log 方法支持类似C语言的占位符,如 %s=>字符串, %d=>整数, %f=>浮点数, %o=>object,用法如下:
console.log('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});
2、console.debug, console.info, console.warn, console.error
用法与console.log一样,只是显示的样式不一样:
console.debug('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');
console.debug('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});
console.info('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');
console.info('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});
console.warn('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');
console.warn('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});
console.error('I like', {'a': 'Dog', 'b': 'Cat'}, 'A');
console.error('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'});
3、console.assert(expression[, object, …])
当expression的值为false时,输出后面的信息:
console.assert(1 == 2, 3);
console.assert('a' == 'a', {'a': 'Hello'});
console.assert('a' == 'b', {'b': 'World'});
4、console.clear()
清空console中在该方法之前输出的所有信息:
console.log('Hello');
console.clear();
console.log('World!');
5、console.dir(object)
输出一个对象所有的属性和方法:
var Animal = {
name: '旺财',
type: 'dog',
yell: function () {
console.log('汪汪');
}
};
console.dir(Animal);
6、console.dirxml(node)
输出网页的某个节点(node)包含的html/xml代码,与console.log()类似:
console.log(document.getElementById('myDiv'));
console.dirxml(document.getElementById('myDiv'));
7、console.trace()
查看函数的调用堆栈信息,即当前函数是如何被调用的:
function add(a, b) {
console.trace();
return a + b;
};
function add1(a, b) {
return add(a, b);
}
function add2(a, b) {
return add1(a, b);
};
function add3(a, b) {
return add2(a, b);
};
var c = add3(2, 5);
console.log(c);
8、console.group(object[, object, …]),console.groupCollapsed(),consoele.groupEnd()
把log等方法的输出信息分组显示以方便查看,groupCollapsed于group用法相同,只是默认折叠显示:
console.group('第一组');
console.log('1.1');
console.log('1.2');
console.groupEnd();
console.groupCollapsed('第二组');
console.log('2.1');
console.log('2.2');
console.groupEnd();
9、console.time(timeName),console.timeEnd(timeName)
计算time和timeEnd之间代码的执行时间并显示:
console.time('time');
for(var i = 0; i < 1000; i++) {
for(var j = 0; j < 1000; j++) {
}
}
console.timeEnd('time');
10、console.profile(profileName),console.profileEnd(profileName)
分析profile和profileEnd之间代码的执行情况,即js代码的性能分析。注意,如果代码运行时间过短,则在性能分析时可能会被忽略(如下面的函数funcB):
function All(){
for(var i=0;i<100;i++){
funcA(10000);
}
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');
All();
console.profileEnd();
11、console.count([title])
count方法用于统计代码被执行的次数,title参数是可选的标题,方便阅读:
function add(a, b) {
console.count('add called times:');
return a + b;
}
var sum = 0;
for(var i = 0; i < 100; i++) {
if(i % 20 == 0) {
sum = add(sum, i);
}
}
console.log(sum);
12、console.table(data)
table方法用于把data对象用表格的方式显示出来,在显示数组或格式一样的JSON数据时很有用:
var dataArr = [[11, 22, 33], [44, 55, 66]];
console.table(dataArr);
var dataJson = [{'a':'1', 'b':'2'}, {'a':'11', 'b':'22'}, {'a':'111', 'b':'222'}];
console.table(dataJson);