Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

JavaScriptオブジェクトをconsoleに出力する

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便利。


参考URL:Console API Reference

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away