概述

本周分享review的文章是JavaScript中Console函数的使用，觉得很棒所以将其整理出来分享给大家。

Console的作用

JS中的console是每个浏览器必备的一个特性。它允许开发者：

  • View a log of errors and warnings that occur on a web page.
    查看出现在web页面中错误和警告
  • Interact with the web page using JavaScript commands.
    使用JS命令与web页面进行交互
  • Debug applications and traverse the DOM directly in the browser
    直接绕过DOM调试应用
  • Inspect and analyze network activity
    监测和分析网络活动

调试类

使用如下函数，可以传入多个参数，它们会自动拼接，并以空格分隔，最终显示要查看的内容。

  • Console.log
  • Console.error
  • Console.warn
  • Console.info

示例：

1
2
3
4
const niceJson = {a:1, b:2, c:3};
console.log("log", niceJson, new Date());
console.warn("warn", niceJson, new Date());
console.info("info", niceJson, new Date());

归类

使用console.group把log（或者info或者warn)归为一起。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
function doSomething(obj) {
    console.group('doSomething Profile');
    const _data = new Date();
    console.log('evauating data:', _data);
    
    const _fullName = `${obj.firstName} ${obj.lastName}`
    console.log('fullName:', _fullName);
    const _id = Math.random(1);
    console.log('id:', _id);
    console.groupEnd();
}

doSomething({"firstName":"yun", "lastName":"feng"});

doSomething Profile
evauating data: Sun Jul 08 2018 15:46:11 GMT+0800 (China Standard Time)
fullName: yun feng
id: 0.26763583139597613

数据表格化

可以使用console.table将对象或者对象数组表格化。

示例：

1
2
3
4
5
6
7
const typeOfConsole = [
    {name:'log', type:'standard'},
    {name:'info', type:'standard'},
    {name:'table', type:'wow'}
];

console.table(typeOfConsole);

结果：

(index) name type
0 “log” “standard”
1 “info” “standard”
2 “table” “wow”

示例2：

1
2
3
4
5
6
7
8
9
const mySocial = {
    facebook:true,
    linkedin:false,
    flickr:false,
    instagram:true,
    Vkontaktebadoo:false
};

console.table(mySocial);
(index) Value
facebook true
linkedin false
flickr false
instagram true
Vkontaktebadoo false

统计类

测试函数的运行时间或者统计某一行代码执行的总数。

  • console.count
  • console.time
  • console.timeEnd

示例：

1
2
3
4
5
6
7
8
9
10
11
console.time('total');
console.time('init arr');
const arr = new Array(20);
console.timeEnd('init arr');

for (var i = 0; i < arr.length; ++i) {
    arr[i] = new Object();
    const _type = (i % 2 === 0) ? 'even' : 'odd';
    console.count(_type + " added");
}
console.timeEnd('total');

结果：

init arr: 0.003662109375ms
even added: 1
odd added: 1
even added: 2
odd added: 2
even added: 3
odd added: 3
even added: 4
odd added: 4
even added: 5
odd added: 5
even added: 6
odd added: 6
even added: 7
odd added: 7
even added: 8
odd added: 8
even added: 9
odd added: 9
even added: 10
odd added: 10
total: 2.650146484375ms

堆栈跟踪类

  • console.trace
  • console.assert

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
function lesserThan(a, b) {
    console.assert(a < b, {"message":"a is not lesser than b", "a":a, "b:":b});
}

lesserThan(6, 5);
console.trace("End");

// result
VM634:2 Assertion failed: {message: "a is not lesser than b", a: 6, b:: 5}
lesserThan @ VM634:2
(anonymous) @ VM634:5
VM634:6 End
(anonymous) @ VM634:6

清除console

使用uglifyjs-webpack-plugin清除所有的console。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const UglifyJsPlugin = require('uglify-webpack-plugin')
var debug = process.env.NODE_ENV !== 'production'

// ...

optimization:{
    minimizer:!debug ? [
            new UglifyJsPlugin({
                // compression specific options
                uglifyOption: {
                    // Eliminate comments
                    comments:false,
                    compress: {
                        // removing warnings
                        warnings:false,
                        // drop console statements
                        drop_console: true
                    },
                }
            })] :[]
}

总结

毕竟使用console是用来调试代码的，不能让这些代码上生产版本，所以需要注意之处。另外，就是在十分明确的地方就没有必要使用console,以免滥用误用。