console.tableを使ってちょっと便利にJavaScriptをDebug

2013-11-26

JavaScriptのオブジェクトや配列のDebugの際にconsole.logを使っていましたが、console.tableという便利なAPIがあった。

console.table APIはFirebug 1.6X.0a12にて対応してるので、結構前からあったっぽい。

以下のようなスクリプトをconsole.tableでDebugすると、

consoleパネルにhash keyとvalueがテーブル形式で表示される。

第二引数にhash keyを渡してやることで、出力をフィルタリングできる。
[javascript]
console.table(family, [‘firstName’, ‘age’]);
[/javascript]

配列もcosnole.tableでDebugすると展開される。

[javascript]
console.table([1, 2, 3]);
[/javascript]

console.logでは下記のような感じで出力されるため、プロパティを見たいときはいちいちクリックして展開してやる必要があった。

ちなみにDeepな配列やオブジェクトだと

[javascript]
console.table([[1, 2], [3, 4]]);
console.table({dog:{age:1},cat:{age:2}});
[/javascript]

という具合にテーブルが表示される。

console.tableを使用することで、一目で俯瞰できるので、これまでより少し便利にDebugできそう。

69log