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

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

私の質問は、なぜこれらの2つの一見同じ機能が存在するのconsoleですか？

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

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

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

通知：

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

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

Chrome Console APIリファレンスには、この関数やその他の関数に関する詳細情報があります。

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));

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

console.dir(obj/this/anything)

Chromeコンソールでオブジェクト全体を表示するにはどうすればよいですか？

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

console.dir（object）を呼び出すと、DOMタブのミニチュアバージョンなど、オブジェクトのプロパティのインタラクティブなリストが記録されます。

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

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

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

while console.log([1,2])は次の出力を提供します。

[1, 2]

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

違いconsole.log()とconsole.dir()：

ここに一言で言えば違いがあります：

• console.log(input)：ブラウザは適切にフォーマットされた方法でログインします
• console.dir(input)：ブラウザはすべてのプロパティを持つオブジェクトのみをログに記録します

例：

次のコード：

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

google dev toolsに以下を記録します。

7つの前の答えはどれもその言及していないconsole.dirサポート追加の引数を：depth、showHidden、とするかどうかを使用しますcolors。

特に興味深いのはdepth、（理論的には）がconsole.logサポートするデフォルトの2レベル以上にオブジェクトを移動することを可能にすることです。

「理論的に」と書いたのは、実際にはMongooseオブジェクトがあり、実行さconsole.log(mongoose)れたconsole.dir(mongoose, { depth: null })とき、出力は同じだったからです。実際にmongooseオブジェクトに深く再帰したものは次のものを使用していますutil.inspect：

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));