web-dev-qa-db-ja.com

console.dirとconsole.logの違いは何ですか？

Chromeではconsoleオブジェクトは同じことをするように見える2つのメソッドを定義します。

console.log(...)
console.dir(...)

dirはログに記録する前にオブジェクトのコピーを取得するのですが、logはコンソールへの参照を渡すだけなので、ログに記録されたオブジェクトを調べるときには変更されている可能性があります。しかし、いくつかの予備テストでは違いがないことと、ログに記録されたときとは異なる状態のオブジェクトを表示する可能性があることを示しています。

Chromeコンソールでこれを試してください（Ctrl+Shift+J）私が何を言っているのか見るために：

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

ここで、logステートメントの下にある[Object]を展開し、値が2のfooを表示していることに注意してください。dirの代わりにlogを使用して実験を繰り返す場合も同様です。

私の質問は、どうしてこれら二つの一見同じような関数がconsoleに存在するのでしょうか？

javascriptgoogle-chromeconsole
318
Drew Noakes

Firefoxでは、これらの関数はまったく異なる動作をします。logはtoString表現のみを出力しますが、dirはナビゲーション可能なツリーを出力します。

Chromeでは、logはすでにほとんどの場合 - ツリーを出力します。ただし、Chromeのlogは、プロパティを持っていても、オブジェクトの特定のクラスを文字列化します。最も明確な違いの例は、おそらく正規表現です。

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

また、通常のオブジェクトとは異なるlogで配列されている配列（console.dir([1,2,3])など）との明らかな違いもわかります。

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

DOMオブジェクトも異なる振る舞いを示します 別の答えで述べたように 。

319
apsillers

Chromeには、DOM要素をコンソールに送信するときにも便利な違いがあります。

通知：

  • console.logはHTMLのようなツリーで要素を出力します
  • console.dirはJSON風のツリーで要素を出力します

特にconsole.logはDOM要素に特別な扱いをしますが、console.dirはしません。これはDOM JSオブジェクトの完全な表現を見ようとするときにしばしば役に立ちます。

この機能およびその他の機能については、 ChromeコンソールAPIリファレンス に詳しい情報があります。

132
Drew Noakes

FirebugはChromeの開発ツールとは異なる動作をすると思います。 Firebugがあなたにオブジェクトの文字列化されたバージョンを与える一方、console.dirがあなたに拡張可能なオブジェクトを与えるように見えます。どちらもChromeで拡張可能なオブジェクトを提供します。混乱が生じる可能性があるのはそこだと思います。あるいはChromeのバグにすぎません。

Chromeでは、両方とも同じことをします。あなたのテストを拡張して、私はあなたがそれを広げるときChromeがオブジェクトの現在の値を得ることに気づいた。

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2

それがあなたが見たいものであるならば、あなたはオブジェクトの文字列化されたバージョンを得るために以下を使うことができます。展開したときではなく、この行が呼び出されたときのオブジェクトの内容がわかります。

console.log(JSON.stringify(o));
4
sachleen

次のように.toString（）バージョンの代わりにクリックスルー可能なブラウズ可能オブジェクトを出力するには、console.dir（）を使用します。

console.dir(obj/this/anything)

Chromeコンソールでフルオブジェクトを表示する方法

3
Scorpion-Prince

Firebugサイトから http://getfirebug.com/logging/

Console.dir（object）を呼び出すと、> DOMタブのミニチュア版のように、オブジェクトのプロパティの対話型リストが記録されます。

2
Dries Marien

Felix Klingsのアドバイスに従って、私は自分のクロムブラウザで試した。

console.dir（[1,2]）は、次のように出力されます。

Array [2]

：1

1：2

長さ：2

_proto_：Array [0]

While console.log（[1,2]）は、以下のように出力されます。

[1、2]

そのため、配列やオブジェクトのプロトタイプなどの詳細情報を取得するには、console.dir（）を使用する必要があります。

0
Bimal