オブジェクトと配列のdebugに便利なconsole.tableの使用方法

console.tableの使い方

console.tableはオブジェクトや配列を表形式で表示することができる。

使い方はconsole.logと同じように引数を入れるだけ…と思われそうだがChromeの開発ツールだとそれだけでは表形式では表示されない。

Chromeの開発ツールでconsole.tableで表形式で値がすべて表示されるのは二次元配列のみ。ちなみに三次元以降になると値がArrayやObjectと省略されて表示される。

また、文字列と連結してconsole.table("result:", a2);のように記述すると結果が表示されなくなるのでこちらも注意が必要だ。

var a1 = ["a", "b", "c"];
var a2 = [["a", "b"], ["c", "d"]];
var a3 = [[["a", "b"], ["c", "d"]]];
console.table(a1);
console.table(a2);
console.table(a3);
console.table("result:", a2);

どうしてもChromeで一次配列を表形式で表示したい場合は配列をconsole.table(arr)ではなくconsole.table([arr])と[]で囲んで強制的に二次配列にしてしまう方法がある。

console.tableのサンプル

Firefoxのconsole.table

Firefoxの開発ツールおよびFirebugでのconsole.tableは1次配列でも表形式で表示されるため[]で囲って二次に直す必要はない。

IEのconsole.table

IEは最新のIE11でもconsole.tableを使用できない。
（IE…またお前か…）

Safariのconsole.table

Safariもconsole.tableは使用不可。Macを使用している開発者は大抵FirefoxかChromeを使用しているのでIEよりは影響が少なそう。