或许你已经习惯了console.log()来调试js，非常好用，但是今天微博看到console.table()调试javascript，和console.log()类似，主要区别在于:
主要用来输出对象和数组;
更加直接的可视化，以表格形式展现;
可以单独输出某个或某几个属性
例
| 代码如下 | 复制代码 |
|
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> /** * * @authors Benjamin * @date 2013-11-18 13:08:18 * console.table()调试javascript * 直接进入实例 */ //定义一个对象 var obj = { "name":"张三", "age" :20, "sex" :"male" }; console.log("------obj------"); console.log("console.log()打印："); console.log(obj); console.log("console.table打印："); console.table(obj); //定义一个数组 var arr = ["aa","bb","cc","dd"]; console.log("------arr------"); console.log("console.log()打印："); console.log(arr); console.log("console.table打印："); console.table(arr); //定义一个多维数组 var arr = ["aa","bb","cc","dd",["ee","ff","gg",["hh","ii"]]]; console.log("------arr------"); console.log("console.log()打印："); console.log(arr); console.log("console.table打印："); console.table(arr); //定义一个对象数组 var objArr = [{ "name":"张三", "age" :20, "sex" :"male" },{ "name":"张三", "age" :20, "sex" :"male" }]; console.log("------objArr------"); console.log("console.log()打印："); console.log(objArr); console.log("console.table打印："); console.table(objArr); //定义一个多级对象数组 var objGradeArr = [{ "name":"张三", "age" :20, "sex" :"male", "attribute":{ "a":"aa", "b":"bb", "c":"cc" } },{ "name":"张三", "age" :20, "sex" :"male", "attribute":{ "a":"aa2", "b":"bb2", "c":"cc2" } }]; console.log("------objGradeArr------"); console.log("console.log()打印："); console.log(objGradeArr); console.log("console.table打印："); console.table(objGradeArr); </script> </body> </html> |
|
由于本人英文不好不懂译了，直接上英文后面有地址大家可进入参考。
Imagine you have created this list of programming languages and their file extensions:
| 代码如下 | 复制代码 |
|
var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts" }, { name: "CoffeeScript", fileExtension: ".coffee" } ]; console.log(languages); |
|
The console.log() call will give you the following representation of your data:
That tree view is helpful for debugging purposes, but I find it a little cumbersome to have to open every collapsed object manually. I'm saying we can do a little better with console.table().
Logging Array Data with console.table()
Instead of calling console.log(), we'll use console.table() now:
console.table(languages);
Make sure the console is opened before refreshing the page, otherwise you won't see any output. If you did everything correct, you'll be rewarded with this nice, little table view:
Pretty neat, isn't it?
Of course, tables work best for tabular data. If all the objects have a totally different structure, you'll end up with most of the cells containing undefined values. Still, the property values are neatly arranged and give you a good overview.
Logging Object Data with console.table()
Another nice thing about console.table() is that it also works with objects:
| 代码如下 | 复制代码 |
|
var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" } }; |
|
console.table(languages);
'nuff said.
Filtering the Displayed Object Properties
If you want to restrict the columns to certain properties, you can pass an array of their keys as a second parameter to the console.table() call:
| 代码如下 | 复制代码 |
|
// Multiple property keys console.table(languages, ["name", "paradigm"]); For a single property, a simple string is sufficient: // A single property key |
|
如果你看不懂上在，可进入看英文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable