显示信息
1 |
console.log('hello world'); |
2 |
console.debug('debug'); |
3 |
console.info('信息'); |
4 |
console.error('错误'); |
5 |
console.warn('警告'); |
最常用的就是 console.log 了。
占位符
console 对象还可以使用 printf 风格的占位符。不过只支持字符(%s)、整数(%d 或 %i)、浮点数(%f)、对象(%o)和 css 样式(%c)。
1 |
var person = {}; |
2 |
person.name = 'Jack'; |
3 |
person.age = 30; |
4 |
console.log('%o', person); |
5 |
console.log('%d年%d月%d日', 2016, 08, 23); |
6 |
console.log('圆周率：%f', 3.1415926); |
7 |
console.log('%c改变文本颜色', 'color:green;'); |
信息分组
1 |
console.group("第一组信息"); |
2 |
console.log("第一组第一条"); |
3 |
console.log("第一组第二条"); |
4 |
console.groupEnd(); |
5 |
console.group("第二组信息"); |
6 |
console.log("第二组第一条"); |
7 |
console.log("第二组第二条"); |
8 |
console.groupEnd(); |
查看对象的信息
console.dir() 可以显示一个对象所有的属性和方法。
1 |
var person = {}; |
2 |
person.name = 'Jack'; |
3 |
person.age = 30; |
4 |
person.talk = function(str) { |
5 |
console.log(str); |
6 |
} |
7 |
console.dir(person); |
显示某个节点的内容
console.dirxml() 用来显示网页的某个节点(node)所包含的 html/xml 代码
01 |
<!DOCTYPE html> |
02 |
<html lang="en"> |
03 |
<head> |
04 |
<meta charset="UTF-8"> |
05 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
06 |
<meta name="renderer" content="webkit"> |
07 |
<meta name="keywords" content=""> |
08 |
<meta name="description" content=""> |
09 |
<title>Document</title> |
10 |
</head> |
11 |
<body> |
12 |
<table id="table"> |
13 |
<tr> |
14 |
<td>1</td> |
15 |
<td>2</td> |
16 |
<td>3</td> |
17 |
</tr> |
18 |
</table> |
19 |
</body> |
20 |
</html> |
21 |
<script> |
22 |
var oTable = document.getElementById('table'); |
23 |
console.log(oTable); |
24 |
</script> |
判断是否为真
console.assert() 用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
1 |
console.assert(1); |
2 |
console.assert(1 === 2); |
追踪函数的调用轨迹
console.trace() 用来追踪函数的调用轨迹。
01 |
function add(a, b) { |
02 |
console.trace(); |
03 |
return a + b; |
04 |
} |
05 |
var x = add3(1, 1); |
06 |
function add3(a, b) { |
07 |
return add2(a, b); |
08 |
} |
09 |
function add2(a, b) { |
10 |
return add1(a, b); |
11 |
} |
12 |
function add1(a, b) { |
13 |
return add(a, b); |
14 |
} |
运行后，会显示 add() 的调用轨迹，从上到下依次为 add()、add1()、add2()、add3()。
计时功能
console.time() 和 console.timeEnd()，用来显示代码的运行时间。
1 |
console.time('计时器一'); |
2 |
for (var i = 0; i < 1000; i++) { |
3 |
for (var j = 0; j < 1000; j++) {} |
4 |
} |
5 |
console.timeEnd('计时器一'); |
性能分析
性能分析(Profiler)就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
假定有一个函数 Foo()，里面调用了另外两个函数 funcA() 和 funcB()，其中 funcA() 调用 10 次，funcB() 调用 1 次。
01 |
function Foo() { |
02 |
for (var i = 0; i < 10; i++) { |
03 |
funcA(1000); |
04 |
} |
05 |
funcB(10000); |
06 |
} |
07 |
08 |
function funcA(count) { |
09 |
for (var i = 0; i < count; i++) {} |
10 |
} |
11 |
12 |
function funcB(count) { |
13 |
for (var i = 0; i < count; i++) {} |
14 |
} |
然后，就可以分析 Foo() 的运行性能了。
1 |
console.profile('性能分析器一'); |
2 |
Foo(); |
3 |
console.profileEnd(); |
