console.log()による配列データのログ記録
プログラミング言語とそのファイル拡張子の表を作成したとします：
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.log(languages)
console.log関数を呼び出すと、以下のようにデータが表示されます：
console.table()による配列データのログ記録
console.log()関数の代わりに、console.table()を呼び出します：
console.table(languages);
コンソールがリフレッシュ・ページで開かれることを確認してください。すべて正しく行えば、このように小さなテーブルが表示されます：
美しいでしょう？テーブルの各カラムでソートできます：
もちろん、このテーブルには表形式のデータに対するサポートはありません。すべてのオブジェクトがまったく異なるデータ構造を持っている場合、テーブルのほとんどのセルに未定義の値が含まれることになります。それでも、プロパティ値の整然とした配列は、あなたに素晴らしい概観を与えてくれるでしょう。
console.table() によるオブジェクトデータのログ記録
console.table()のもう一つの良いところは、オブジェクトデータにも適用できることです：
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
このギフトは上の写真です。
表示オブジェクトのプロパティのフィルタリング
// Multiple property keys
console.table(languages, ["name", "paradigm"]);
テーブルのカラムを何らかのプロパティで制限したい場合は、console.table() 呼び出しの第2引数にキーと値の配列を渡すことで可能です：
// Multiple property keys
console.table(languages, ["name", "paradigm"]);
単一のプロパティの場合は、単純な文字列パラメータで十分です：
// A single property key
console.table(languages, "name");
概要
Chromeデベロッパーツールに搭載されている機能はほとんど知っているつもりでしたが、どうやら間違っていたようです。デベロッパーツールには、便利な機能がたくさんあります。まじめな話、公式ドキュメントのページをチェックしてみてください。もしかしたら、あなたの知らない素晴らしい機能が見つかるかもしれません。
