399

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

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

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

Chrome コンソール ( Ctrl+ Shift+ J) でこれを試して、私の意味を確認してください。

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

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

私の質問は、なぜこれら 2 つの一見同一の関数が に存在するのconsoleですか?

4

9 に答える 9

391

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

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

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

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

また、通常のオブジェクトとは異なる方法で作成された配列 (例: console.dir([1,2,3]))との明確な違いも確認できます。log

> 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 オブジェクトも異なる動作を示します。

于 2012-08-14T14:28:58.020 に答える
165

DOM 要素をコンソールに送信する場合、Chrome にはもう 1 つの便利な違いがあります。

知らせ：

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

具体的にconsole.logは、DOM 要素を特別に扱いますが、そうではありconsole.dirません。これは、DOM JS オブジェクトの完全な表現を確認しようとする場合に便利です。

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

于 2013-10-09T10:48:33.837 に答える
4

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));
于 2012-08-14T14:25:15.827 に答える
3

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

console.dir(obj/this/anything)

Chromeコンソールでオブジェクト全体を表示するには?

于 2012-08-14T14:15:39.623 に答える
2

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

console.dir(object) を呼び出すと、オブジェクトのプロパティのインタラクティブな一覧がログに記録されます。 > DOM タブの縮小版です。

于 2012-08-14T14:13:26.180 に答える
1

Felix Klings のアドバイスに従って、Chrome ブラウザーで試してみました。

console.dir([1,2])次の出力が得られます。

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

console.log([1,2])次の出力が得られます。

[1, 2]

したがってconsole.dir()、配列やオブジェクトのプロトタイプなどの詳細情報を取得するために使用する必要があると思います。

于 2013-03-20T12:24:55.280 に答える