日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

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 来调试代码，使得我们测试更加便利。