一般情况下,我们都使用 JavaScript 的 console.log() 进行 debug 但是,对于 Object 来说,每次 console.log 之后,输出的都是不是十分有好的数据,例如:
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.log(languages);
输出的就如同下图所示(当然,会根据不同的浏览器以及不同的版本会有所差别):
然后呢,其实看起来还是那么回事,虽然麻烦点,但是还可以看的清楚,到底什么是什么东西。
再然后呢?如果我们使用这里介绍的 console.table 呢?
不过,聪明的人一眼就看出来其中的玄机了,或者,看到这里,直接就去浏览器的console里面,执行这句代码就完了。怎么样?很好用吧?
不过还是给个例子比较好,因为大部分都比较懒嘛。
还是上边的对象,然后使用 console.table(language) 输出看看。
看到了吧,多么的一目了然!
然后点击各个表头试试看,还可以排序哦。
好了,上面是数组,但是其实对于对象也是可以使用的哦。
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
然后看看结果,看到了吧?
可是,如果就这么点,那么除了更好的阅读方式之外,就没什么意思。
那么,它还可以过滤,哈哈。
这么:
console.table(languages, ["name", "paradigm"]); //多个 key 组成的数组
或者这么:
console.table(languages, "name”); //单个 key
很多内容来自:http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable