More than 5 years have passed since last update.

console.log()でオブジェクトを出力するときにラベルをつける方法

Last updated at 2013-06-21Posted at 2013-06-21

別のエントリで紹介し忘れてた書き方を紹介します。
[Chrome] console.log()の色々な書き方

var obj = {
	hoge : "hoge",
	huga : "huga"
};

console.log(obj);

と書くとコンソール上にはこう表示されます。

console

Object
  hoge: "hoge"
  huga: "huga"
__proto__: Object

出力するのが1個ならいいんですが、出力したいオブジェクトが複数あるとき、どこで出力したものかわかるようにこんな書き方をするときがあると思います。

console.log('objの出力');
console.log(obj);

複数行使ってしまうので数が多いとこれでも見づらいかもしれません。
ワンライナーで識別子をつけようと思ってconsole.log(obj + 'objの出力');と書くと加算処理がされて謎のオブジェクトになります。

%Oで出力する

[Chrome] console.log()の色々な書き方のエントリで紹介した書き方で%sや%dでの指定があったのですが、オブジェクトは**%O**で出力できます。

console.log('%O', obj);

この書き方だと第一引数が文字列なので好き勝手に書けます。

console.log('objの出力だぞ！ %O', obj);

と書くとconsole上には

objの出力だぞ！ Object
				hoge: "hoge"
				huga: "huga"
				__proto__: Object

と表示されます。
地味に便利。

※ コメントで別の書き方をいただいたので追記

console.log('objの出力だぞ！', obj);

+するんじゃなくて第2引数にすることで出力できます。
出力の表示が微妙にちがっていて

objの出力だぞ！ Object {hoge: "hoge", huga: "huga"}

とルートレベル？にある要素が横に展開されます。(__proto__プロパティは見えない)

オブジェクトのネストが1段階深くなると表示が変わります。

var obj = {
	hoge : "hoge",
	huga : "huga",
	hogehuga:{
		aaa : "aaa",
		bbb : "bbb"
	}
};
console.log('objの出力だぞ！', obj);

出力は

objの出力だぞ！ Object {hoge: "hoge", huga: "huga", hogehuga: Object}
				hoge: "hoge"
				hogehuga: Object
				huga: "huga"
				__proto__: Object

となります。

console.log()はStyleの指定もできるので合わせて使うともう少しわかりやすくできます。

var sty = "color:red;background-color:black;";
console.log('%cobjの出力だぞ！ %O', sty, obj);
// or
console.log('%cobjの出力だぞ！', sty, obj);

と書くとobjの出力だぞ！の部分にstyで指定したスタイルが適用されて黒背景の赤文字で表示されます。

console便利。