一般情况下,我们都使用 JavaScript 的 console.log() 进行 debug 但是,对于 Object 来说,每次 console.log 之后,输出的都是不是十分有好的数据,例如:

1
2
3
4
5
6
7
var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
 
console.log(languages);

输出的就如同下图所示(当然,会根据不同的浏览器以及不同的版本会有所差别):

logging_with_console_log.

然后呢,其实看起来还是那么回事,虽然麻烦点,但是还可以看的清楚,到底什么是什么东西。

再然后呢?如果我们使用这里介绍的 console.table 呢?

不过,聪明的人一眼就看出来其中的玄机了,或者,看到这里,直接就去浏览器的console里面,执行这句代码就完了。怎么样?很好用吧?

不过还是给个例子比较好,因为大部分都比较懒嘛。
还是上边的对象,然后使用 console.table(language) 输出看看。

logging_with_console_table

看到了吧,多么的一目了然!

然后点击各个表头试试看,还可以排序哦。

logging_with_console_table_sorted

好了,上面是数组,但是其实对于对象也是可以使用的哦。

1
2
3
4
5
6
var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};
 
console.table(languages);

然后看看结果,看到了吧?

logging_with_console_table_object

可是,如果就这么点,那么除了更好的阅读方式之外,就没什么意思。

那么,它还可以过滤,哈哈。

这么:

1
console.table(languages, ["name", "paradigm"]); //多个 key 组成的数组

或者这么:

1
console.table(languages, "name”); //单个 key

很多内容来自:http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable