0%

Javascript Console命令详解

基础篇

打印字符串

1
console.log("http://www.ttwinbug.com/");

打印提示消息

1
console.info("http://www.ttwinbug.com/");

打印警告消息

1
console.warn("http://www.ttwinbug.com/");

打印错误消息

1
console.error("http://www.ttwinbug.com/");

打印调试信息

1
console.debug("http://www.ttwinbug.com/");

进阶篇

查看Console所有方法

1
console.log(console);

会输出

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
Object {
assert: ...,
clear: ...,
count: ...,
debug: ...,
dir: ...,
dirxml: ...,
error: ...,
group: ...,
groupCollapsed: ...,
groupEnd: ...,
info: ...,
log: ...,
markTimeline: ...,
profile: ...,
profileEnd: ...,
table: ...,
time: ...,
timeEnd: ...,
timeStamp: ...,
timeline: ...,
timelineEnd: ...,
trace: ...,
warn: ...
}

*根据浏览器的不同,此方法并不是都能实现,本篇内容,都已最新的Chrome浏览器进行操作

清理控制台

1
console.clear()

分组 *console.groupCollapsed也可以实现此效果

1
2
3
4
5
6
7
8
9
console.group('number');
console.log("1");
console.log("2");
console.groupEnd();

console.group('text');
console.log("abc");
console.log("bcd");
console.groupEnd();

查看对象信息 *以表格形式展现

1
2
3
4
5
6
7
8
9
10
11
var data = [
{
'name': 'mike',
'age': '10'
},
{
'name': 'jack',
'age': 11
}
];
console.table(data);

console.dir显示更详细的对象信息
console.dirxml 查看页面中对应元素的html/xml内容

1
2
3
4
5
6
<div id='person'>
<p>http://www.ttwinbug.com</p>
</div>

var person = document.getElementById('person');
console.dirxml(person);

性能测试

1
2
3
4
5
6
console.time 和 console.timeEnd
console.time("tim");
(function () {
******
})();
console.timeEnd("tim");

更详细的测试

1
2
3
4
5
6
console.profile和console.profileEnd
console.profile("pro");
(function () {
******
})();
console.profileEnd("pro");

判断真假

1
2
3
console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

统计次数

1
2
3
4
5
6
7
8
9
10
11
12
13
console.count
function hi(name) {
console.count(name);
return "hi " + name;
}

for(var i = 0; i < 10; i++) {
if(i < 4) {
hi("person");
} else {
hi("god");
}
}

console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。