使用 JavaScript 的 console.table() 进行 debug

一般情况下，我们都使用 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